/* ============================================================
   Design tokens: Apple Human Interface Guidelines
   System colors, type scale, materials, and spacing.
   Light values are defined on :root; dark mode redefines only
   what changes, so no color has its sole definition in a
   media query.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ---- System colors (light) ----
     Values taken from the macOS 27 UI kit's shared swatches. */
  --blue:   #0088FF;
  --green:  #34C759;
  --indigo: #6155F5;
  --mint:   #00C8B3;
  --cyan:   #00C0E8;
  --orange: #FF8D28;
  --pink:   #FF2D55;
  --purple: #CB30E0;
  --red:    #FF383C;
  --teal:   #00C3D0;
  --yellow: #FFCC00;
  /* The kit's yellow is too light for text on white; its vibrant variant is
     the one that holds contrast, so it is used wherever yellow carries meaning. */
  --yellow-legible: #A67C00;
  --brown:  #AC7F5E;
  --gray:   #8E8E93;

  /* ---- Backgrounds ---- */
  --bg:            #FFFFFF;   /* kit: Window Backgrounds / Light */
  --bg-secondary:  #F2F2F7;
  --bg-tertiary:   #FFFFFF;
  --bg-grouped:    #F2F2F7;
  --bg-elevated:   #FFFFFF;

  /* ---- Labels (light) ---- */
  --label:            #000000D9;
  --label-secondary:  #00000080;
  --label-tertiary:   #00000040;
  --label-quaternary: #0000001A;
  --label-quinary:    #0000000D;

  /* ---- Fills & separators (light) ---- */
  --fill:            #0000001A;
  --fill-secondary:  #00000014;
  --fill-tertiary:   #0000000D;
  --fill-quaternary: #00000008;
  --separator:       #3C3C434A;
  --separator-opaque:#C6C6C8;

  /* ---- Materials ----
     Layered translucency: each surface tints and blurs what sits behind it,
     with a bright top edge so the layer reads as a physical pane rather than
     a flat panel. */
  --material-thick:  rgba(255, 255, 255, 0.72);
  --material-regular:rgba(250, 250, 252, 0.60);
  --material-thin:   rgba(255, 255, 255, 0.48);
  --blur:      saturate(190%) blur(24px);
  --blur-deep: saturate(200%) blur(40px);
  --glass-edge:      rgba(255, 255, 255, 0.70);
  --glass-edge-soft: rgba(255, 255, 255, 0.35);
  --glass-ring:      rgba(0, 0, 0, 0.06);
  /* The ambient ground the glass has something to pick up */
  --ground: radial-gradient(1200px 700px at 12% -10%, #E8EEF8 0%, transparent 60%),
            radial-gradient(1000px 600px at 105% 15%, #EFE9F7 0%, transparent 55%),
            linear-gradient(180deg, #F4F5F8 0%, #EDEFF3 100%);

  /* ---- Board ---- */
  --sq-light: #E9EDF2;
  --sq-dark:  #7D94AB;
  --sq-from:  rgba(255, 204, 0, 0.42);
  --sq-to:    rgba(255, 204, 0, 0.58);
  --sq-check: rgba(255, 59, 48, 0.55);
  --piece-w:  #FFFFFF;
  --piece-w-edge: #4A5058;
  --piece-b:  #2B3138;
  --piece-b-edge: #14181C;

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.05), 0 0 0 .5px rgba(0,0,0,.06);
  --shadow-2: 0 4px 16px rgba(0,0,0,.09), 0 0 0 .5px rgba(0,0,0,.06);
  --shadow-3: 0 12px 40px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.08);

  /* ---- Typography (HIG scale, anchored at 17pt body) ---- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --t-large-title: 700 26px/32px var(--font);
  --t-title1:      700 22px/26px var(--font);
  --t-title2:      700 17px/22px var(--font);
  --t-title3:      600 15px/20px var(--font);
  --t-headline:    700 13px/16px var(--font);
  --t-body:        400 13px/16px var(--font);
  --t-body-loose:  400 13px/18px var(--font);
  --t-callout:     400 12px/15px var(--font);
  --t-subhead:     400 11px/14px var(--font);
  --t-footnote:    400 10px/15px var(--font);
  --t-caption:     400 10px/13px var(--font);
  --t-caption2:    600 10px/13px var(--font);

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

  /* ---- Radii ----
     Concentric: an inner corner equals its parent's radius minus the padding
     between them, so nested rounding stays visually parallel. */
  --r-control: 10px;
  --r-card:    14px;
  --r-large:   20px;
  --r-xl:      26px;
  --r-capsule: 999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 140ms;
  --dur:      240ms;

  /* ---- Minimum hit target ---- */
  --tap: 44px;

  /* ---- List metrics ----
     The phone block below raises these. They are defined here as well so
     anything that reaches for them outside a phone width — a sheet on a
     short landscape window, say — still gets a real number rather than an
     invalid var() that wipes out the whole declaration. */
  --row-min: 34px;
  --inset:   16px;
}

/* ---- Dark mode: system preference, unless explicitly set to light ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue:   #0091FF;
    --green:  #30D158;
    --indigo: #6D7CFF;
    --mint:   #00DAC3;
    --cyan:   #3CD3FE;
    --orange: #FF9230;
    --pink:   #FF375F;
    --purple: #DB34F2;
    --red:    #FF4245;
    --teal:   #00D2E0;
    --yellow: #FFD600;
    --yellow-legible: #FFD600;
    --brown:  #B78A66;
    --gray:   #98989D;

    --bg:            #1E1E1E;   /* kit: Window Backgrounds / Dark */
    --bg-secondary:  #1C1C1E;
    --bg-tertiary:   #2C2C2E;
    --bg-grouped:    #1E1E1E;
    --bg-elevated:   #1C1C1E;

    --label:            #FFFFFF;
    --label-secondary:  #FFFFFF8C;
    --label-tertiary:   #FFFFFF40;
    --label-quaternary: #FFFFFF1A;
    --label-quinary:    #FFFFFF0D;

    --fill:            #FFFFFF1A;
    --fill-secondary:  #FFFFFF14;
    --fill-tertiary:   #FFFFFF0D;
    --fill-quaternary: #FFFFFF08;
    --separator:       #FFFFFF26;
    --separator-opaque:#38383A;

    --material-thick:  rgba(38, 38, 42, 0.68);
    --material-regular:rgba(30, 30, 34, 0.58);
    --material-thin:   rgba(40, 40, 45, 0.42);
    --glass-edge:      rgba(255, 255, 255, 0.14);
    --glass-edge-soft: rgba(255, 255, 255, 0.07);
    --glass-ring:      rgba(0, 0, 0, 0.45);
    --ground: radial-gradient(1200px 700px at 12% -10%, #1B2330 0%, transparent 60%),
              radial-gradient(1000px 600px at 105% 15%, #241E2E 0%, transparent 55%),
              linear-gradient(180deg, #0C0D10 0%, #141519 100%);

    --sq-light: #5A6B7D;
    --sq-dark:  #33414F;
    --sq-from:  rgba(255, 214, 10, 0.32);
    --sq-to:    rgba(255, 214, 10, 0.46);
    --piece-w:  #F2F4F7;
    --piece-w-edge: #555D66;
    --piece-b:  #10151A;
    --piece-b-edge: #000000;

    --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 0 0 .5px rgba(255,255,255,.08);
    --shadow-2: 0 4px 16px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.08);
    --shadow-3: 0 12px 40px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.10);
  }
}

/* ---- Dark mode: explicit user choice wins in both directions ---- */
:root[data-theme="dark"] {
  --blue:#0091FF; --green:#30D158; --indigo:#6D7CFF; --orange:#FF9230;
  --pink:#FF375F; --purple:#DB34F2; --red:#FF4245; --teal:#00D2E0;
  --mint:#00DAC3; --cyan:#3CD3FE; --brown:#B78A66;
  --yellow:#FFD600; --yellow-legible:#FFD600; --gray:#98989D;
  --bg:#1E1E1E; --bg-secondary:#1C1C1E; --bg-tertiary:#2C2C2E;
  --bg-grouped:#1E1E1E; --bg-elevated:#1C1C1E;
  --label:#FFFFFF;
  --label-secondary:#FFFFFF8C;
  --label-tertiary:#FFFFFF40;
  --label-quaternary:#FFFFFF1A;
  --label-quinary:#FFFFFF0D;
  --fill:#FFFFFF1A;
  --fill-secondary:#FFFFFF14;
  --fill-tertiary:#FFFFFF0D;
  --fill-quaternary:#FFFFFF08;
  --separator:#FFFFFF26;
  --separator-opaque:#38383A;
  --material-thick:rgba(38,38,42,0.68);
  --material-regular:rgba(30,30,34,0.58);
  --material-thin:rgba(40,40,45,0.42);
  --glass-edge:rgba(255,255,255,0.14);
  --glass-edge-soft:rgba(255,255,255,0.07);
  --glass-ring:rgba(0,0,0,0.45);
  --ground: radial-gradient(1200px 700px at 12% -10%, #1B2330 0%, transparent 60%),
            radial-gradient(1000px 600px at 105% 15%, #241E2E 0%, transparent 55%),
            linear-gradient(180deg, #0C0D10 0%, #141519 100%);
  --sq-light:#5A6B7D; --sq-dark:#33414F;
  --sq-from:rgba(255,214,10,0.32); --sq-to:rgba(255,214,10,0.46);
  --piece-w:#F2F4F7; --piece-w-edge:#555D66;
  --piece-b:#10151A; --piece-b-edge:#000000;
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 0 0 .5px rgba(255,255,255,.08);
  --shadow-2:0 4px 16px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.08);
  --shadow-3:0 12px 40px rgba(0,0,0,.6), 0 0 0 .5px rgba(255,255,255,.10);
}

/* ---- Move classification: color is paired with a glyph everywhere it is
        used, so meaning never rests on hue alone. ---- */
:root {
  --q-brilliant:  var(--teal);
  --q-great:      var(--indigo);
  --q-best:       var(--green);
  --q-good:       var(--green);
  --q-book:       var(--gray);
  --q-inaccuracy: var(--yellow-legible);
  --q-mistake:    var(--orange);
  --q-blunder:    var(--red);
}

/* ============================================================
   iOS 27, applied at phone widths.
   The two platforms are genuinely different systems: iOS anchors body text
   at 17px where macOS anchors at 13px, and its label, fill and background
   ramps are their own. Values from the Apple iOS 27 UI Kit. System colours
   are identical across both kits, so they are not repeated here.
   ============================================================ */
@media (max-width: 760px) {
  :root {
    /* Type scale */
    --t-large-title: 700 34px/41px var(--font);
    --t-title1:      700 28px/34px var(--font);
    --t-title2:      700 22px/28px var(--font);
    --t-title3:      600 20px/25px var(--font);
    --t-headline:    600 17px/22px var(--font);
    --t-body:        400 17px/22px var(--font);
    --t-body-loose:  400 17px/24px var(--font);
    --t-callout:     400 16px/21px var(--font);
    --t-subhead:     400 15px/20px var(--font);
    --t-footnote:    400 13px/18px var(--font);
    --t-caption:     400 12px/16px var(--font);
    --t-caption2:    400 11px/13px var(--font);

    /* Labels */
    --label:            #000000;
    --label-secondary:  #3C3C4399;
    --label-tertiary:   #3C3C434D;
    --label-quaternary: #3C3C432E;
    --label-quinary:    #3C3C4317;

    /* Fills */
    --fill:            #78787833;
    --fill-secondary:  #78788029;
    --fill-tertiary:   #7676801F;
    --fill-quaternary: #74748014;

    /* Backgrounds, grouped: grey page, white rows */
    --bg:            #FFFFFF;
    --bg-secondary:  #F2F2F7;
    --bg-tertiary:   #FFFFFF;
    --bg-grouped:    #F2F2F7;
    --bg-elevated:   #FFFFFF;

    --separator:       #0000001F;
    --separator-opaque:#C6C6C8;

    /* iOS list metrics */
    --row-min: 44px;
    --inset:   16px;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --label:            #FFFFFF;
      --label-secondary:  #EBEBF599;
      --label-tertiary:   #EBEBF54D;
      --label-quaternary: #EBEBF529;
      --label-quinary:    #EBEBF517;
      --fill:            #7878805C;
      --fill-secondary:  #78788052;
      --fill-tertiary:   #7676803D;
      --fill-quaternary: #7676802E;
      --bg:            #000000;
      --bg-secondary:  #1C1C1E;
      --bg-tertiary:   #2C2C2E;
      --bg-grouped:    #000000;
      --bg-elevated:   #1C1C1E;
      --separator:       #FFFFFF1F;
      --separator-opaque:#38383A;
    }
  }
  :root[data-theme="dark"] {
    --label:#FFFFFF; --label-secondary:#EBEBF599; --label-tertiary:#EBEBF54D;
    --label-quaternary:#EBEBF529; --label-quinary:#EBEBF517;
    --fill:#7878805C; --fill-secondary:#78788052;
    --fill-tertiary:#7676803D; --fill-quaternary:#7676802E;
    --bg:#000000; --bg-secondary:#1C1C1E; --bg-tertiary:#2C2C2E;
    --bg-grouped:#000000; --bg-elevated:#1C1C1E;
    --separator:#FFFFFF1F; --separator-opaque:#38383A;
  }
}