/* Native iOS (native-ios) — generated by design-kit/scripts/tokens.mjs
   Mood: familiar, clean, platform-true
   Signature: Grouped inset lists, large titles, bottom tab bar, SF Symbols-style icons, system colors. Replace the accent with the app's brand color.
   Fonts: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?&display=swap">
   Use ONLY these variables for color, type, space, radius, shadow, motion. */
:root {
  color-scheme: light;

  /* color roles */
  --color-bg: #F2F2F7;
  --color-surface: #FFFFFF;
  --color-text: #000000;
  --color-muted: #6C6C70;
  --color-border: #C6C6C8;
  --color-accent: #0066D6;          /* fills: primary buttons, selected states */
  --color-on-accent: #FFFFFF;         /* text on accent fills */
  --color-accent-text: #0066D6;     /* links and accent-colored text on bg */
  --color-accent-soft: #E0ECFE;     /* tinted backgrounds */
  --color-success: #107E31;
  --color-warning: #B25000;
  --color-danger: #D70015;
  --color-on-danger: #FFFFFF;
  --color-focus: #0066D6;
  --accent-50: #F2F7FE;
  --accent-100: #E0ECFE;
  --accent-200: #C0DAFF;
  --accent-300: #95C0FE;
  --accent-400: #60A2FF;
  --accent-500: #2C83F5;
  --accent-600: #116AD6;
  --accent-700: #0153B1;
  --accent-800: #033F87;
  --accent-900: #022B61;

  /* type */
  --font-heading: -apple-system, 'SF Pro Text', system-ui, Inter, sans-serif;
  --font-body: -apple-system, 'SF Pro Text', system-ui, Inter, sans-serif;
  --font-ui: -apple-system, 'SF Pro Text', system-ui, Inter, sans-serif;
  --font-mono: ui-monospace, 'SF Pro Text', system-ui, Inter, sans-serif;
  --step-n2: 0.75rem;   /* 12px */
  --step-n1: 0.875rem;   /* 14px */
  --step-0: 1.0625rem;   /* 17px */
  --step-1: 1.25rem;   /* 20px */
  --step-2: 1.5rem;   /* 24px */
  --step-3: 1.8125rem;   /* 29px */
  --step-4: 2.1875rem;   /* 35px */
  --step-5: 2.625rem;   /* 42px */
  --step-6: 3.1875rem;   /* 51px */
  --weight-heading: 700;
  --tracking-heading: 0.01em;
  --leading-body: 1.3;
  --leading-heading: 1.12;
  --measure: 65ch;

  /* space (use only these) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;

  /* shape and depth */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-1: none;
  --shadow-2: none;

  /* controls */
  --control-sm: 36px;
  --control-md: 40px;
  --control-lg: 44px;

  /* motion */
  --dur-fast: 150ms;
  --dur-slow: 350ms;
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-slow: 0ms; }
}

/* ------------------------------------------------------------------
   Project extension: per-condition palettes for the weather screens.
   Each .cond-* scope redefines the color roles so the UI adapts;
   every pair below is >= 4.5:1 for text/muted on bg/surface.
   --sky-* variables feed the canvas painter (read via getComputedStyle)
   and --sky-base is the solid tone the sky text sits over.
-------------------------------------------------------------------*/
:root {
  --page-bg: #F0F1F4;
  --bar-lo: #5EB1F2;
  --bar-hi: #F2834B;
}

/* Sunny noon — light UI, hard blue sky */
.cond-sunny {
  --color-bg: #EDF4FA; --color-surface: #FFFFFF;
  --color-text: #0A1A29; --color-muted: #4F6176;
  --color-border: #D4E0EC; --color-accent: #0066D6;
  --color-accent-text: #0066D6; --color-accent-soft: #DDEAFB;
  --color-on-accent: #FFFFFF; --color-danger: #D70015;
  --color-warning: #B25000; --color-focus: #0066D6;
  --sky-base: #1668C4; --sky-ink: #FFFFFF;
  --sky-top: #0E5FB8; --sky-mid: #1668C4; --sky-bot: #8FC9F2;
  --sun: #FFF6D8; --sun-glow: #FFE89A;
  --cloud-hi: #FFFFFF; --cloud-lo: #D8E9F8;
}

/* Cloudy afternoon — light UI, grey-blue sky */
.cond-cloudy {
  --color-bg: #E9EDF2; --color-surface: #F7F9FB;
  --color-text: #101820; --color-muted: #4A5563;
  --color-border: #CBD3DC; --color-accent: #0066D6;
  --color-accent-text: #0066D6; --color-accent-soft: #DFE8F3;
  --color-on-accent: #FFFFFF; --color-danger: #D70015;
  --color-warning: #8A5200; --color-focus: #0066D6;
  --sky-base: #41597A; --sky-ink: #FFFFFF;
  --sky-top: #33506F; --sky-mid: #4C6B8E; --sky-bot: #9AB4CB;
  --cloud-hi: #E8EEF4; --cloud-lo: #8FA2B6;
}

/* Tropical rain — dark UI, slate sky */
.cond-rain {
  color-scheme: dark;
  --color-bg: #1B2430; --color-surface: #25303E;
  --color-text: #F2F6FA; --color-muted: #9FB0C2;
  --color-border: #3A4A5C; --color-accent: #5FA8F5;
  --color-accent-text: #7FB8F5; --color-accent-soft: #2B3A4D;
  --color-on-accent: #06131F; --color-danger: #FF8A7A;
  --color-warning: #FFCE7A; --color-focus: #8FC0FA;
  --sky-base: #26374A; --sky-ink: #FFFFFF;
  --sky-top: #1E2E40; --sky-mid: #33475E; --sky-bot: #57708C;
  --cloud-hi: #46586E; --cloud-lo: #1B2836;
  --rain: #BFD6EA;
}

/* Thunderstorm at night — darkest UI */
.cond-storm {
  color-scheme: dark;
  --color-bg: #0E1420; --color-surface: #1A2230;
  --color-text: #F4F7FB; --color-muted: #A5B4C8;
  --color-border: #2E3B4E; --color-accent: #6FA8F0;
  --color-accent-text: #8FC0FA; --color-accent-soft: #26334A;
  --color-on-accent: #060D18; --color-danger: #FF8A7A;
  --color-warning: #FFCE7A; --color-focus: #8FC0FA;
  --sky-base: #070B16; --sky-ink: #FFFFFF;
  --sky-top: #05080F; --sky-mid: #101A2E; --sky-bot: #1D2C46;
  --cloud-hi: #141D31; --cloud-lo: #060A14;
  --rain: #8FA8C8; --bolt: #F2F6FF; --flash: #DFE9FF;
}

/* Clear night — dark indigo UI */
.cond-night {
  color-scheme: dark;
  --color-bg: #0C1124; --color-surface: #181F38;
  --color-text: #EFF3FC; --color-muted: #A3AECB;
  --color-border: #2C3554; --color-accent: #8FB4FF;
  --color-accent-text: #9DBBFF; --color-accent-soft: #232C4E;
  --color-on-accent: #070D22; --color-danger: #FF8A7A;
  --color-warning: #FFCE7A; --color-focus: #9DBBFF;
  --sky-base: #070C22; --sky-ink: #FFFFFF;
  --sky-top: #04081A; --sky-mid: #0C1533; --sky-bot: #1B2A55;
  --star: #FFFFFF; --moon: #F4E9C8;
}
:root { --bezel: #101014; }