/* =========================================================
  DESIGN TOKENS (Readable)
  - Single source of truth.
  - Component CSS should reference SEMANTIC tokens (section 2).
  - Theme: 2 Degrees Logo (Teal / Sea Glass / Buoy Orange)
========================================================= */


/* =========================================================
  1) PRIMITIVE TOKENS (rarely used directly)
========================================================= */

:root {
  /* ---------- Color Primitives: Neutral Scale ---------- */
  --color-neutral-0:   #ffffff;
  --color-neutral-25:  #fbfcfd;
  --color-neutral-50:  #f6f8fa;
  --color-neutral-100: #eef2f5;
  --color-neutral-200: #dde5ea;
  --color-neutral-300: #c6d2da;
  --color-neutral-400: #9fb0bb;
  --color-neutral-500: #6f8593;
  --color-neutral-600: #4f6471;
  --color-neutral-700: #364954;
  --color-neutral-800: #24333b;
  --color-neutral-900: #141d22;

  /* ---------- Color Primitives: 2 Degrees Logo Palette ---------- */
  /* Pulled from the logo artwork: deep teal + sea glass + buoy orange */
  --color-brand-primary-600: #1E4D5D; /* darker teal */
  --color-brand-primary-500: #256074; /* logo deep teal */
  --color-brand-primary-400: #518090; /* lighter teal (hover/tint) */

  --color-brand-support-500: #7DBCC7; /* logo sea glass */
  --color-brand-support-400: #97C9D2; /* lighter sea glass */
  --color-brand-support-600: #64969F; /* darker sea glass */

  --color-brand-accent-600:  #B05A3A; /* darker buoy orange */
  --color-brand-accent-500:  #DC7048; /* logo buoy orange */
  --color-brand-accent-400:  #E38D6D; /* lighter buoy orange */

  /* ---------- Typography Primitives ---------- */
  --font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Type scale */
  --font-size-small: 0.875rem;
  --font-size-base:  1rem;
  --font-size-lead:  1.125rem;
  --font-size-h3:    1.375rem;
  --font-size-h2:    1.75rem;
  --font-size-h1:    2.25rem;

  /* Line heights */
  --line-height-tight: 1.15;
  --line-height-base:  1.55;
  --line-height-loose: 1.7;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  /* ---------- Spacing Scale ---------- */
  --space-0: 0;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;

  /* ---------- Radius ---------- */
  --radius-small: 0.5rem;
  --radius-medium: 0.75rem;
  --radius-large: 1rem;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-subtle: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-soft:   0 8px 24px rgba(0,0,0,0.10);

  /* ---------- Borders ---------- */
  --border-width-thin: 1px;

  /* ---------- Layout ---------- */
  --layout-container-max-width: 70rem; /* 1120px */
  --layout-container-inline-padding: var(--space-24);

  /* ---------- Motion ---------- */
  --motion-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-duration-fast:   120ms;
  --motion-duration-medium: 200ms;
  --motion-duration-slow:   350ms;

  /* ---------- Focus ---------- */
  --focus-ring: 0 0 0 3px rgba(125, 188, 199, 0.35); /* sea glass ring */
}


/* =========================================================
  2) SEMANTIC TOKENS (Use these everywhere)
========================================================= */

:root {
  /* ---------- Page Surfaces ---------- */
  --color-page-background: var(--color-neutral-25);
  --color-surface-primary: var(--color-neutral-0);
  --color-surface-secondary: var(--color-neutral-50);

  /* ---------- Text ---------- */
  --color-text-primary: var(--color-neutral-800);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-heading: var(--color-neutral-900);

  /* ---------- Brand Roles ---------- */
  --color-brand-primary: var(--color-brand-primary-500);
  --color-brand-primary-hover: var(--color-brand-primary-400);

  --color-brand-support: var(--color-brand-support-500);
  --color-brand-support-hover: var(--color-brand-support-400);

  --color-brand-accent: var(--color-brand-accent-500);
  --color-brand-accent-hover: var(--color-brand-accent-400);

  /* ---------- Borders ---------- */
  --color-border-subtle: var(--color-neutral-200);

  /* ---------- Links ---------- */
  --color-link-default: var(--color-brand-primary);
  --color-link-hover: var(--color-brand-primary-hover);

  /* ---------- Cards ---------- */
  --color-card-background: var(--color-surface-primary);
  --color-card-border: var(--color-border-subtle);
  --shadow-card: var(--shadow-subtle);

  /* ---------- Buttons ---------- */
  --color-button-primary-background: var(--color-brand-primary);
  --color-button-primary-text: var(--color-neutral-0);
  --color-button-primary-background-hover: var(--color-brand-primary-hover);

  --color-button-secondary-background: transparent;
  --color-button-secondary-text: var(--color-brand-primary);
  --color-button-secondary-border: var(--color-border-subtle);
  --color-button-secondary-background-hover: var(--color-neutral-100);

  /* ---------- Typography Roles ---------- */
  --font-family-body: var(--font-family-sans);
  --font-family-code: var(--font-family-monospace);

  --font-size-body: var(--font-size-base);
  --font-size-body-small: var(--font-size-small);
  --font-size-lead: var(--font-size-lead);

  --font-size-heading-1: var(--font-size-h1);
  --font-size-heading-2: var(--font-size-h2);
  --font-size-heading-3: var(--font-size-h3);

  --line-height-body: var(--line-height-base);
  --line-height-heading: var(--line-height-tight);

  --font-weight-body: var(--font-weight-regular);
  --font-weight-heading: var(--font-weight-semibold);

  /* ---------- Spacing Roles ---------- */
  --spacing-section-vertical: var(--space-64);
  --spacing-stack-tight: var(--space-12);
  --spacing-stack-normal: var(--space-20);
  --spacing-stack-loose: var(--space-32);

  /* ---------- Radius Roles ---------- */
  --radius-component: var(--radius-medium);
  --radius-component-small: var(--radius-small);

  /* ---------- Form Roles ---------- */
  --color-input-background: var(--color-surface-primary);
  --color-input-border: var(--color-border-subtle);
  --color-input-text: var(--color-text-primary);
  --radius-input: var(--radius-component-small);

  /* ---------- Overlay / Panel ---------- */
  --color-overlay-backdrop: rgba(20, 29, 34, 0.45); /* neutral-900 with alpha */
  --shadow-drawer: var(--shadow-soft);
  --radius-drawer: var(--radius-large);
}


/* =========================================================
  3) DARK MODE (toggle by adding class="dark" on <html> or <body>)
========================================================= */

:root.dark {
  --color-page-background: #0E1519;                 /* deeper than neutral-900 */
  --color-surface-primary: #141F26;                 /* teal-tinted charcoal */
  --color-surface-secondary: #1B2B34;               /* slightly lighter */

  --color-text-primary: var(--color-neutral-100);
  --color-text-secondary: rgba(255,255,255,0.70);
  --color-text-heading: var(--color-neutral-0);

  --color-border-subtle: rgba(255,255,255,0.14);

  /* Links pop using sea glass in dark mode */
  --color-link-default: var(--color-brand-support-500);
  --color-link-hover: var(--color-brand-support-400);

  /* Buttons: sea glass primary for contrast + “friendly” feel */
  --color-button-primary-background: var(--color-brand-support-500);
  --color-button-primary-text: #0E1519;
  --color-button-primary-background-hover: var(--color-brand-support-400);

  --color-button-secondary-text: var(--color-neutral-0);
  --color-button-secondary-border: var(--color-border-subtle);
  --color-button-secondary-background-hover: rgba(255,255,255,0.08);

  --shadow-card: none;

  --focus-ring: 0 0 0 3px rgba(125, 188, 199, 0.28);
  --color-overlay-backdrop: rgba(0,0,0,0.55);
}