/* ============================================================
   Cheoeum AI · Design Tokens
   Apple-style design language (macOS Tahoe / iOS 26 lineage)
   ============================================================ */

/* ---------- Fonts ---------------------------------------------
   Apple's SF Pro is the canonical face. It ships with macOS / iOS
   and will be picked up by `system-ui`. As a web fallback we use
   Inter — its metrics are very close to SF Pro.
   For Korean (Hangul) we use Pretendard, the de facto Korean
   substitute for SF Pro — very close metrics, optical sizing.
   ------------------------------------------------------------- */
/* ---------- Fonts ---------------------------------------------
   Apple's SF Pro is the canonical face. It ships with macOS / iOS
   and will be picked up by `system-ui`. As a web fallback we use
   Inter — its metrics are very close to SF Pro.
   For Korean (Hangul) we use Pretendard Variable — the de facto
   Korean substitute for SF Pro, served as a small WOFF2 file.
   ------------------------------------------------------------- */
/* Local TTF fallback (works offline and keeps CSP self-contained) */
@font-face {
  font-family: 'Pretendard Variable Local';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('fonts/PretendardVariable.ttf') format('truetype-variations'),
       url('fonts/PretendardVariable.ttf') format('truetype');
}

:root {
  /* ---------- Type families ---------- */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Pretendard Variable Local", "Pretendard Variable", Pretendard, "Inter", "Apple SD Gothic Neo",
    system-ui, sans-serif;
  --font-rounded:
    "SF Pro Rounded", -apple-system, "Pretendard Variable Local", "Pretendard Variable", Pretendard,
    "Inter", system-ui, sans-serif;
  --font-mono:
    "SF Mono", ui-monospace, Menlo, Monaco, "JetBrains Mono", monospace;

  /* ---------- Type scale (Apple HIG) ----------
     All sizes are in pt for macOS / iOS conventions. The web maps
     1pt = 1px at default zoom. */
  --type-largetitle-size: 26px;
  --type-largetitle-weight: 700;
  --type-largetitle-lh: 32px;
  --type-largetitle-tracking: 0.022em;

  --type-title1-size: 22px;
  --type-title1-weight: 700;
  --type-title1-lh: 26px;
  --type-title1-tracking: -0.003em;

  --type-title2-size: 17px;
  --type-title2-weight: 700;
  --type-title2-lh: 22px;
  --type-title2-tracking: -0.022em;

  --type-title3-size: 15px;
  --type-title3-weight: 600;
  --type-title3-lh: 20px;
  --type-title3-tracking: -0.014em;

  --type-headline-size: 13px;
  --type-headline-weight: 700;
  --type-headline-lh: 16px;

  --type-body-size: 13px;
  --type-body-weight: 400;
  --type-body-lh: 16px;

  --type-callout-size: 12px;
  --type-callout-weight: 400;
  --type-callout-lh: 15px;

  --type-subheadline-size: 11px;
  --type-subheadline-weight: 400;
  --type-subheadline-lh: 14px;

  --type-footnote-size: 10px;
  --type-footnote-weight: 400;
  --type-footnote-lh: 13px;

  --type-caption1-size: 10px;
  --type-caption1-weight: 500;
  --type-caption1-lh: 13px;

  --type-caption2-size: 9px;
  --type-caption2-weight: 500;
  --type-caption2-lh: 12px;

  /* ---------- Brand colors ----------
     The Cheoeum AI mark is a two-tone purple asterisk. */
  --brand-purple: #9747FF;        /* primary mark */
  --brand-purple-light: #D9A6FF;  /* secondary tone */
  --brand-purple-deep: #6B1FCC;   /* hover / press */
  --brand-indigo: #6155F5;        /* indigo accent (Figma 97,85,245) */

  /* ---------- Apple system color palette (Light) ---------- */
  --sys-red: #FF3B30;
  --sys-orange: #FF9500;
  --sys-yellow: #FFCC00;
  --sys-green: #34C759;
  --sys-mint: #00C7BE;
  --sys-teal: #30B0C7;
  --sys-cyan: #32ADE6;
  --sys-blue: #007AFF;        /* iOS / macOS canonical action blue */
  --sys-indigo: #5856D6;
  --sys-purple: #AF52DE;
  --sys-pink: #FF2D55;
  --sys-brown: #A2845E;
  --sys-gray: #8E8E93;

  /* Vibrant variants (used on dark glass / hover) */
  --sys-red-vibrant: #FF453A;
  --sys-blue-vibrant: #0A84FF;
  --sys-green-vibrant: #30D158;

  /* ---------- Label colors (Light, opaque) ---------- */
  --label-primary: rgba(0, 0, 0, 0.85);
  --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 colors (Light) ---------- */
  --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);

  /* ---------- Backgrounds (Light) ---------- */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F5F5;
  --bg-tertiary: #FAFAFA;
  --bg-grouped: #F2F2F7;
  --bg-canvas: #E6E6E6;       /* desktop wallpaper-ish neutral */

  /* ---------- Separators ---------- */
  --separator-opaque: #D9D9D9;
  --separator: rgba(60, 60, 67, 0.29);
  --separator-thin: rgba(0, 0, 0, 0.10);

  /* ---------- Liquid Glass materials ----------
     macOS 26 / iOS 26 "Liquid Glass" — translucent panels with
     backdrop-filter and a subtle border. Three sizes: S/M/L map
     to the figma definitions. */
  --glass-radius-s: 12px;
  --glass-radius-m: 22px;
  --glass-radius-l: 34px;

  --glass-light-fill: rgba(245, 245, 245, 0.67);
  --glass-light-stroke: 0 0 0 1px rgba(255,255,255,0.6) inset, 0 0 0 0.5px rgba(0,0,0,0.10);
  --glass-light-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);

  --glass-dark-fill: rgba(38, 38, 38, 0.67);
  --glass-dark-stroke: 0 0 0 1px rgba(255,255,255,0.10) inset, 0 0 0 0.5px rgba(0,0,0,0.6);
  --glass-dark-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);

  --glass-blur: 40px;
  --glass-saturation: 180%;

  /* ---------- Window chrome ---------- */
  --window-radius: 10px;
  --window-shadow:
    0px 16px 48px 0px rgba(0, 0, 0, 0.35),
    0px 0px 0px 1px rgba(0, 0, 0, 0.23);
  --window-shadow-inactive:
    0px 8px 24px rgba(0, 0, 0, 0.20),
    0px 0px 0px 1px rgba(0, 0, 0, 0.18);

  /* ---------- Corner radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-3xl: 34px;
  --radius-pill: 9999px;

  /* ---------- Spacing ---------- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 16px;
  --space-8: 20px;
  --space-9: 24px;
  --space-10: 32px;
  --space-11: 40px;
  --space-12: 56px;
  --space-13: 72px;

  /* ---------- Elevation (non-glass) ---------- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 0.5px rgba(0,0,0,0.10);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.08), 0 0 0 0.5px rgba(0,0,0,0.10);
  --shadow-3: 0 6px 16px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0,0,0,0.12);
  --shadow-4: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0,0,0,0.15);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);  /* Apple's "spring-y" curve */
  --ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --dur-instant: 80ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  /* ---------- Focus ring ---------- */
  --focus-ring: 0 0 0 3px rgba(0, 122, 255, 0.35);
  --focus-ring-brand: 0 0 0 3px rgba(151, 71, 255, 0.30);
}

/* ============================================================
   Dark mode overrides — OFF by default.
   We keep the design system in light mode regardless of the
   user's OS preference so previews render correctly. To enable
   dark mode for an artifact, add `data-theme="dark"` to <html>.
   ============================================================ */
[data-theme="dark"] {
    --label-primary: rgba(255, 255, 255, 0.85);
    --label-secondary: rgba(235, 235, 245, 0.60);
    --label-tertiary: rgba(235, 235, 245, 0.30);
    --label-quaternary: rgba(235, 235, 245, 0.18);

    --bg-primary: #1E1E1E;
    --bg-secondary: #2A2A2A;
    --bg-tertiary: #1A1A1A;
    --bg-grouped: #000000;
    --bg-canvas: #0E0E0E;

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

    --sys-blue: #0A84FF;
    --sys-red: #FF453A;
    --sys-green: #30D158;

    --window-shadow:
      0 16px 48px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Semantic typography classes — apply directly to elements.
   These map to Apple's HIG text styles.
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  color: var(--label-primary);
  background: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.t-largetitle, h1.t {
  font: var(--type-largetitle-weight) var(--type-largetitle-size)/var(--type-largetitle-lh) var(--font-sans);
  letter-spacing: var(--type-largetitle-tracking);
}
.t-title1, h2.t {
  font: var(--type-title1-weight) var(--type-title1-size)/var(--type-title1-lh) var(--font-sans);
  letter-spacing: var(--type-title1-tracking);
}
.t-title2, h3.t {
  font: var(--type-title2-weight) var(--type-title2-size)/var(--type-title2-lh) var(--font-sans);
  letter-spacing: var(--type-title2-tracking);
}
.t-title3, h4.t {
  font: var(--type-title3-weight) var(--type-title3-size)/var(--type-title3-lh) var(--font-sans);
  letter-spacing: var(--type-title3-tracking);
}
.t-headline {
  font: var(--type-headline-weight) var(--type-headline-size)/var(--type-headline-lh) var(--font-sans);
}
.t-body, p.t {
  font: var(--type-body-weight) var(--type-body-size)/var(--type-body-lh) var(--font-sans);
}
.t-callout { font: var(--type-callout-weight) var(--type-callout-size)/var(--type-callout-lh) var(--font-sans); }
.t-subheadline { font: var(--type-subheadline-weight) var(--type-subheadline-size)/var(--type-subheadline-lh) var(--font-sans); }
.t-footnote { font: var(--type-footnote-weight) var(--type-footnote-size)/var(--type-footnote-lh) var(--font-sans); color: var(--label-secondary); }
.t-caption1 { font: var(--type-caption1-weight) var(--type-caption1-size)/var(--type-caption1-lh) var(--font-sans); color: var(--label-secondary); }
.t-caption2 { font: var(--type-caption2-weight) var(--type-caption2-size)/var(--type-caption2-lh) var(--font-sans); color: var(--label-tertiary); }
.t-mono { font-family: var(--font-mono); }
.t-rounded { font-family: var(--font-rounded); font-weight: 500; }

/* ============================================================
   Liquid Glass utility — drop on any panel for the macOS 26 look.
   Use .glass for light, .glass.dark for dark.
   ============================================================ */
.glass {
  background: var(--glass-light-fill);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  box-shadow: var(--glass-light-stroke), var(--glass-light-shadow);
  border-radius: var(--glass-radius-m);
}
.glass.dark {
  background: var(--glass-dark-fill);
  box-shadow: var(--glass-dark-stroke), var(--glass-dark-shadow);
  color: rgba(255,255,255,0.92);
}
.glass.s { border-radius: var(--glass-radius-s); }
.glass.l { border-radius: var(--glass-radius-l); }