/*
  Apple Liquid UI — tokens.css
  Single source of truth. Every other file in this system reads from
  these custom properties. Do not hardcode colors, spacing, radii, or
  motion curves anywhere else — reference these variables instead.
*/

:root {
  /* ---------- Light mode system colors (Apple-style semantic naming) ---------- */
  --system-blue:        #0A84FF;
  --system-green:       #30D158;
  --system-indigo:      #5E5CE6;
  --system-orange:      #FF9F0A;
  --system-pink:        #FF375F;
  --system-purple:      #BF5AF2;
  --system-red:         #FF453A;
  --system-teal:        #40C8E0;
  --system-yellow:      #FFD60A;

  --system-background:            #FFFFFF;
  --system-background-secondary:  #F2F2F7;
  --system-background-tertiary:   #FFFFFF;

  --label-primary:       rgba(0, 0, 0, 0.92);
  --label-secondary:     rgba(60, 60, 67, 0.60);
  --label-tertiary:      rgba(60, 60, 67, 0.30);
  --label-quaternary:    rgba(60, 60, 67, 0.18);

  --fill-primary:        rgba(120, 120, 128, 0.20);
  --fill-secondary:      rgba(120, 120, 128, 0.16);
  --fill-tertiary:       rgba(118, 118, 128, 0.12);
  --fill-quaternary:     rgba(116, 116, 128, 0.08);

  --separator:            rgba(60, 60, 67, 0.29);
  --separator-opaque:     #C6C6C8;

  /* ---------- Liquid Glass material base (light) ---------- */
  --glass-tint:            255, 255, 255;
  --glass-border:          rgba(255, 255, 255, 0.35);
  --glass-highlight:       rgba(255, 255, 255, 0.55);
  --glass-shadow:          rgba(0, 0, 0, 0.12);

  /* ---------- Brand accent (override per-product if needed) ---------- */
  --accent: var(--system-blue);
  --accent-pressed: #0768D1;

  /* ---------- Spacing — 4pt grid ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;

  /* ---------- Radii ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ---------- Elevation (solid surfaces, not glass) ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06), 0 1px 1px rgba(0,0,0,0.04);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.06);

  /* ---------- Motion — spring-approximating cubic-beziers ----------
     For CSS transitions/keyframes. For true damped-spring physics
     (drag, elastic overscroll), use js/spring.js instead. */
  --ease-spring-standard: cubic-bezier(0.36, 0.66, 0.04, 1);
  --ease-spring-snappy:   cubic-bezier(0.2, 0.9, 0.2, 1.3);
  --ease-spring-gentle:   cubic-bezier(0.32, 0.72, 0.28, 1);
  --ease-out-quick:       cubic-bezier(0.16, 1, 0.3, 1);

  --duration-fast:   150ms;
  --duration-base:   280ms;
  --duration-slow:   450ms;

  /* ---------- Icon sizing ---------- */
  --icon-size-sm: 14px;
  --icon-size-md: 18px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;

  /* ---------- Z layers ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-nav: 100;
  --z-sheet: 200;
  --z-toast: 300;
  --z-modal-backdrop: 250;
}

/* ---------- Dark mode (auto, based on OS/browser preference) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --system-background:            #000000;
    --system-background-secondary:  #1C1C1E;
    --system-background-tertiary:   #2C2C2E;

    --label-primary:       rgba(255, 255, 255, 0.92);
    --label-secondary:     rgba(235, 235, 245, 0.60);
    --label-tertiary:      rgba(235, 235, 245, 0.30);
    --label-quaternary:    rgba(235, 235, 245, 0.16);

    --fill-primary:        rgba(120, 120, 128, 0.36);
    --fill-secondary:      rgba(120, 120, 128, 0.32);
    --fill-tertiary:       rgba(118, 118, 128, 0.24);
    --fill-quaternary:     rgba(118, 118, 128, 0.18);

    --separator:            rgba(84, 84, 88, 0.6);
    --separator-opaque:     #38383A;

    --glass-tint:            28, 28, 30;
    --glass-border:          rgba(255, 255, 255, 0.12);
    --glass-highlight:       rgba(255, 255, 255, 0.18);
    --glass-shadow:          rgba(0, 0, 0, 0.45);

    --accent: #409CFF;
    --accent-pressed: #6BB4FF;

    --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-2: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-3: 0 12px 32px rgba(0,0,0,0.6);
  }
}

/* Manual override hooks: <html data-theme="dark"> / data-theme="light" */
html[data-theme="dark"] {
  color-scheme: dark;
}
html[data-theme="light"] {
  color-scheme: light;
}

* { box-sizing: border-box; }