/* Design tokens. Mirrors the Flutter app's theme; the app is the source of truth. */

:root {
  --primary: #366A6A;
  --primary-tint: #EBF0F0;
  --primary-text: #366A6A;
  --secondary: #399F9F;
  --error: #F33B3B;

  --text-1: #282828;
  --text-2: #747474;
  --text-3: #9B9B9B;
  --disabled: #C2C2C2;
  --outline: #D8D7D7;

  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --background: #FDFDFD;
  --fill: #F2F2F2;
  --fill-strong: #E6E6E6;
  /* alternating band: recedes behind cards in light *and* dark */
  --section-alt: #F4F6F6;
  --on-primary: #FFFFFF;

  --warning-fill: #FFF8E1;
  --warning-border: #FFE082;
  --warning-text: #A98042;
  --info-fill: #E3F2FD;
  --info-border: #BBDEFB;
  --info-accent: #1976D2;
  --info-text: #0D47A1;

  /* Backdrops that read as "teal light" without tinting every surface. */
  --aurora-a: rgba(54, 106, 106, 0.28);
  --aurora-b: rgba(57, 159, 159, 0.22);
  --aurora-c: rgba(169, 128, 66, 0.10);
  --grid-line: rgba(40, 40, 40, 0.062);
  --scrim: rgba(255, 255, 255, 0.72);
  --hairline: rgba(40, 40, 40, 0.08);

  --shadow-sm: 0 1px 2px rgba(20, 30, 30, 0.05), 0 1px 3px rgba(20, 30, 30, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 30, 30, 0.06), 0 12px 28px rgba(20, 30, 30, 0.07);
  --shadow-lg: 0 12px 32px rgba(20, 30, 30, 0.08), 0 32px 64px rgba(20, 30, 30, 0.10);
  --shadow-device: 0 24px 48px rgba(15, 30, 30, 0.14), 0 60px 120px rgba(15, 30, 30, 0.16);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --radius-pill: 26px;

  --pad: clamp(1.25rem, 5vw, 1.5rem);
  --max: 1200px;
  --nav-h: 68px;

  --font-head: 'Raleway', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* One easing everywhere so the whole page moves like one object. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 640ms;

  color-scheme: light;
}

/* System default when the visitor has not picked a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {

    --primary: #3E7C7C;
    --primary-tint: #1C2B2B;
    --primary-text: #6CB2B2;
    --secondary: #43ABAB;
    --error: #FF5C5C;

    --text-1: #E7ECEC;
    --text-2: #A6B0B0;
    --text-3: #7E8A8A;
    --disabled: #525E5E;
    --outline: #394444;

    --surface: #121717;
    --surface-elevated: #1B2121;
    --background: #0D1212;
    --fill: #1D2424;
    --fill-strong: #293232;
    --section-alt: #080C0C;
    --on-primary: #FFFFFF;

    --warning-fill: #2A2417;
    --warning-border: #4C4023;
    --warning-text: #D8B770;
    --info-fill: #14212E;
    --info-border: #234459;
    --info-accent: #67B4F5;
    --info-text: #B9DDFB;

    --aurora-a: rgba(62, 124, 124, 0.46);
    --aurora-b: rgba(67, 171, 171, 0.26);
    --aurora-c: rgba(120, 100, 60, 0.14);
    --grid-line: rgba(231, 236, 236, 0.07);
    --scrim: rgba(13, 18, 18, 0.72);
    --hairline: rgba(231, 236, 236, 0.09);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.36), 0 12px 28px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.42), 0 32px 64px rgba(0, 0, 0, 0.44);
    --shadow-device: 0 24px 48px rgba(0, 0, 0, 0.5), 0 60px 120px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}

/* An explicit choice wins in both directions. */
:root[data-theme="dark"] {
  --primary: #3E7C7C;
  --primary-tint: #1C2B2B;
  --primary-text: #6CB2B2;
  --secondary: #43ABAB;
  --error: #FF5C5C;

  --text-1: #E7ECEC;
  --text-2: #A6B0B0;
  --text-3: #7E8A8A;
  --disabled: #525E5E;
  --outline: #394444;

  --surface: #121717;
  --surface-elevated: #1B2121;
  --background: #0D1212;
  --fill: #1D2424;
  --fill-strong: #293232;
  --section-alt: #080C0C;
  --on-primary: #FFFFFF;

  --warning-fill: #2A2417;
  --warning-border: #4C4023;
  --warning-text: #D8B770;
  --info-fill: #14212E;
  --info-border: #234459;
  --info-accent: #67B4F5;
  --info-text: #B9DDFB;

  --aurora-a: rgba(62, 124, 124, 0.46);
  --aurora-b: rgba(67, 171, 171, 0.26);
  --aurora-c: rgba(120, 100, 60, 0.14);
  --grid-line: rgba(231, 236, 236, 0.07);
  --scrim: rgba(13, 18, 18, 0.72);
  --hairline: rgba(231, 236, 236, 0.09);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.36), 0 12px 28px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.42), 0 32px 64px rgba(0, 0, 0, 0.44);
  --shadow-device: 0 24px 48px rgba(0, 0, 0, 0.5), 0 60px 120px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}