/* ============================================================
   Design tokens — "Cupertino on Android"
   Apple / HIG aesthetic. Light + Dark.
   These map 1:1 to Compose theme tokens later.
   ============================================================ */

:root {
  /* Accent (iOS Blue) */
  --accent: #007AFF;
  --accent-pressed: #0062cc;
  --accent-soft: rgba(0, 122, 255, 0.12);

  /* Semantic status */
  --green: #34C759;
  --orange: #FF9500;
  --red: #FF3B30;
  --yellow: #FFCC00;
  --purple: #AF52DE;
  --teal: #30B0C7;

  /* Light mode neutrals (iOS system grays) */
  --bg: #F2F2F7;            /* grouped background */
  --bg-elevated: #FFFFFF;   /* cards / surfaces */
  --bg-nav: rgba(249, 249, 249, 0.82); /* translucent nav bars */
  --separator: rgba(60, 60, 67, 0.18);
  --fill: rgba(120, 120, 128, 0.12);   /* segmented / inputs */
  --fill-strong: rgba(120, 120, 128, 0.2);

  --label: #000000;
  --label-secondary: rgba(60, 60, 67, 0.6);
  --label-tertiary: rgba(60, 60, 67, 0.3);
  --on-accent: #FFFFFF;

  /* Radii — continuous / squircle feel */
  --r-control: 12px;
  --r-card: 18px;
  --r-sheet: 28px;
  --r-pill: 999px;

  /* Spacing — 8pt grid */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-nav: 0 0.5px 0 var(--separator);
  --shadow-fab: 0 6px 20px rgba(0,122,255,0.35);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;
  --t-largetitle: 700 34px/1.1 var(--font);
  --t-title:      700 28px/1.15 var(--font);
  --t-title2:     600 22px/1.2 var(--font);
  --t-headline:   600 17px/1.3 var(--font);
  --t-body:       400 17px/1.4 var(--font);
  --t-callout:    400 16px/1.4 var(--font);
  --t-subhead:    400 15px/1.35 var(--font);
  --t-footnote:   400 13px/1.35 var(--font);
  --t-caption:    400 12px/1.3 var(--font);
}

/* Dark mode — elevated grays, not flat black */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg-elevated: #1C1C1E;
    --bg-nav: rgba(30, 30, 30, 0.78);
    --separator: rgba(84, 84, 88, 0.5);
    --fill: rgba(120, 120, 128, 0.24);
    --fill-strong: rgba(120, 120, 128, 0.36);
    --label: #FFFFFF;
    --label-secondary: rgba(235, 235, 245, 0.6);
    --label-tertiary: rgba(235, 235, 245, 0.3);
    --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
    --accent-soft: rgba(10, 132, 255, 0.22);
    --accent: #0A84FF;
    --green: #30D158; --orange: #FF9F0A; --red: #FF453A;
    --yellow: #FFD60A; --purple: #BF5AF2; --teal: #40C8E0;
  }
}

/* Manual dark override (theme toggle) */
:root[data-theme="dark"] {
  --bg: #000000;
  --bg-elevated: #1C1C1E;
  --bg-nav: rgba(30, 30, 30, 0.78);
  --separator: rgba(84, 84, 88, 0.5);
  --fill: rgba(120, 120, 128, 0.24);
  --fill-strong: rgba(120, 120, 128, 0.36);
  --label: #FFFFFF;
  --label-secondary: rgba(235, 235, 245, 0.6);
  --label-tertiary: rgba(235, 235, 245, 0.3);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --accent: #0A84FF;
  --accent-soft: rgba(10, 132, 255, 0.22);
  --green: #30D158; --orange: #FF9F0A; --red: #FF453A;
  --yellow: #FFD60A; --purple: #BF5AF2; --teal: #40C8E0;
}