/* ============================================================================
   Liquid Glass — macOS 26  ·  Design Tokens (self-contained)
   ----------------------------------------------------------------------------
   The single source of truth for the whole style. Import this ONCE at the root
   of your app. Every value below is consumed by tailwind.config.js (via var())
   and by glass.css. Dark mode flips automatically under `.dark` (or
   [data-theme="dark"]) — wire it to Tailwind's `darkMode: 'class'`.

   Font: Pretendard (open-source stand-in for Apple SF Pro). Loaded from CDN.
   Icons: use Lucide (https://lucide.dev) at ~1.6px stroke to match SF Symbols.
   ========================================================================== */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

:root {
  /* ---- Font stacks ---- */
  --font-system: "Pretendard", -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --font-rounded: "Pretendard", "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Menlo", "Monaco", monospace;

  /* ---- Text / labels (layered translucent black, adapts over any surface) -- */
  --text-primary: rgba(0, 0, 0, 0.85);
  --text-secondary: rgba(0, 0, 0, 0.5);
  --text-tertiary: rgba(0, 0, 0, 0.25);
  --text-quaternary: rgba(0, 0, 0, 0.1);
  --text-on-tint: #ffffff;

  /* ---- Accent / control tints ---- */
  --tint: rgb(0, 136, 255);            /* system Blue — drives interactive emphasis */
  --tint-control: rgb(13, 111, 255);   /* the deeper "prominent" filled-button color */
  --tint-destructive: rgb(255, 56, 60);
  --focus-ring: color-mix(in srgb, var(--tint) 55%, transparent);

  /* ---- Full accent palette (12 hues) ---- */
  --accent-blue:   rgb(0, 136, 255);
  --accent-brown:  rgb(172, 127, 94);
  --accent-cyan:   rgb(0, 192, 232);
  --accent-green:  rgb(52, 199, 89);
  --accent-indigo: rgb(97, 85, 245);
  --accent-mint:   rgb(0, 200, 179);
  --accent-orange: rgb(255, 141, 40);
  --accent-pink:   rgb(255, 45, 85);
  --accent-purple: rgb(203, 48, 224);
  --accent-red:    rgb(255, 56, 60);
  --accent-teal:   rgb(0, 195, 208);

  /* ---- Surfaces (opaque content; only chrome is glass) ---- */
  --surface-window: rgb(246, 246, 246);   /* opaque window body */
  --surface-content: rgb(255, 255, 255);  /* document / content area */
  --surface-card: rgb(255, 255, 255);
  --surface-grouped: rgb(245, 245, 245);  /* grouped table / settings bg */
  --surface-control: rgba(0, 0, 0, 0.05); /* unfilled control fill */
  --surface-control-hover: rgba(0, 0, 0, 0.08);

  /* ---- Separators / hairlines ---- */
  --separator: rgba(60, 60, 67, 0.29);
  --separator-opaque: rgba(0, 0, 0, 0.1);
  --border-control: rgba(0, 0, 0, 0.12);

  /* ---- Liquid Glass materials (backdrop layers for floating chrome) ---- */
  --material-bar: rgba(246, 246, 246, 0.72);      /* toolbars / title bars */
  --material-sidebar: rgba(246, 246, 246, 0.6);   /* sidebars */
  --material-popover: rgba(246, 246, 246, 0.72);  /* popovers / menus */
  --material-hud: rgba(30, 30, 30, 0.55);         /* dark HUD glass */
  --glass-blur: 30px;                              /* backdrop blur radius */
  --glass-saturate: 1.8;                           /* backdrop saturation boost */
  --glass-highlight: rgba(255, 255, 255, 0.55);    /* top inner edge highlight */
  --glass-edge: rgba(255, 255, 255, 0.4);          /* hairline edge stroke */

  /* ---- Radii (concentric) ---- */
  --radius-window: 12px;
  --radius-card: 10px;
  --radius-popover: 11px;
  --radius-control: 7px;
  --radius-small: 4px;
  --radius-pill: 999px;

  /* ---- Control geometry ---- */
  --control-height-small: 20px;
  --control-height: 28px;
  --control-height-large: 36px;
  --control-pad-x: 13px;

  /* ---- Elevation / shadow system (soft & layered) ---- */
  --shadow-window: 0 22px 70px rgba(0, 0, 0, 0.28), 0 6px 18px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.18);
  --shadow-popover: 0 12px 34px rgba(0, 0, 0, 0.22), 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.14);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  --shadow-glass: 0 1px 2px rgba(0, 0, 0, 0.16), inset 0 1px 0 var(--glass-highlight), inset 0 0 0 0.5px var(--glass-edge);
  --shadow-button: 0 0.5px 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-button-tinted: 0 0.5px 1px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);   /* the macOS "soft snap" */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.12s;   /* state change */
  --dur-base: 0.22s;   /* transition */
  --dur-slow: 0.4s;    /* large transition */
}

/* ============================ DARK MODE ==================================== */
.dark,
:root[data-theme="dark"] {
  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-tertiary: rgba(255, 255, 255, 0.3);
  --text-quaternary: rgba(255, 255, 255, 0.12);
  --text-on-tint: #ffffff;

  --tint: rgb(0, 145, 255);
  --tint-control: rgb(0, 145, 255);

  --accent-blue:   rgb(0, 145, 255);
  --accent-cyan:   rgb(60, 211, 254);
  --accent-green:  rgb(48, 209, 88);
  --accent-indigo: rgb(109, 124, 255);
  --accent-mint:   rgb(0, 218, 195);
  --accent-orange: rgb(255, 146, 48);
  --accent-pink:   rgb(255, 55, 95);
  --accent-purple: rgb(219, 52, 242);
  --accent-red:    rgb(255, 66, 69);
  --accent-teal:   rgb(0, 210, 224);

  --surface-window: rgb(40, 40, 42);
  --surface-content: rgb(30, 30, 32);
  --surface-card: rgb(48, 48, 50);
  --surface-grouped: rgb(36, 36, 38);
  --surface-control: rgba(255, 255, 255, 0.1);
  --surface-control-hover: rgba(255, 255, 255, 0.14);

  --separator: rgba(255, 255, 255, 0.16);
  --separator-opaque: rgba(255, 255, 255, 0.12);
  --border-control: rgba(255, 255, 255, 0.14);

  --material-bar: rgba(40, 40, 42, 0.7);
  --material-sidebar: rgba(40, 40, 42, 0.6);
  --material-popover: rgba(48, 48, 50, 0.72);
  --glass-highlight: rgba(255, 255, 255, 0.18);
  --glass-edge: rgba(255, 255, 255, 0.12);

  --shadow-window: 0 24px 80px rgba(0, 0, 0, 0.55), 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}