/* ==========================================================================
   Clova Co / WeRoster — Design tokens
   Import this file first. Exposes:
     - brand & neutral color palette (CSS vars)
     - semantic colors matching the shadcn/ui v4 Tailwind token contract
     - Geist Sans / Geist Mono type scale (utility classes + vars)
     - radii, spacing, elevation, motion
   Type stack: Geist Sans (UI) + Geist Mono (code/numerics).
     Matches shadcn/ui v4 default — `font-geist` in the CLI registry.
   Components: shadcn/ui ONLY. No Fluent, no Material.
   ========================================================================== */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/GeistVF.woff') format('woff'),
       url('./fonts/GeistVF.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMonoVF.woff') format('woff'),
       url('./fonts/GeistMonoVF.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- Brand --------------------------------------------------------- */
  --brand-cyan:         #0F91D0;   /* logo dark stroke */
  --brand-sky:          #5BB7E4;   /* logo light stroke, secondary */
  --brand-primary:      #4090CD;   /* COM primary — flagship blue */

  /* COM ramp (light) */
  --com-shade-50: #1D415C;
  --com-shade-30: #26567B;
  --com-shade-20: #306C9A;
  --com-shade-10: #3373A4;
  --com-primary: #4090CD;
  --com-tint-10: #C4DDF0;
  --com-tint-20: #E2EEF8;
  --com-tint-30: #ECF4FA;

  /* COM ramp (dark) */
  --com-dark-primary:  #5BB7E4;
  --com-dark-tint-10:  #376E89;
  --com-dark-tint-20:  #295267;
  --com-dark-tint-30:  #204050;

  /* ----- Neutral ramp (light) ----------------------------------------- */
  --n-1000: #000000;
  --n-900:  #0A0A0A;
  --n-800:  #171717;   /* PRIMARY TEXT */
  --n-750:  #262626;
  --n-700:  #303030;
  --n-600:  #525252;
  --n-500:  #737373;   /* muted text */
  --n-400:  #A3A3A3;   /* icons */
  --n-300:  #D4D4D4;
  --n-250:  #E5E5E5;   /* border */
  --n-200:  #EFEFEF;   /* divider */
  --n-150:  #F5F5F5;   /* tertiary surface */
  --n-100:  #FAFAFA;   /* secondary surface */
  --n-50:   #FFFFFF;   /* primary surface */

  /* ----- Status / message -------------------------------------------- */
  --danger:        #F7444E;
  --danger-tint-40:#FFEBEB;
  --warning:       #FFD335;
  --warning-tint-40:#FFF2C8;
  --success:       #27AE60;
  --success-tint:  #E6F6EC;
  --info:          var(--com-primary);
  --info-tint:     var(--com-tint-20);

  /* =====================================================================
     Semantic tokens — shadcn/ui v4 contract
     ===================================================================== */
  --radius: 0.625rem; /* 10px */

  --background: var(--n-50);
  --foreground: var(--n-800);

  --card: var(--n-50);
  --card-foreground: var(--n-800);

  --popover: var(--n-50);
  --popover-foreground: var(--n-800);

  --primary: var(--com-primary);
  --primary-foreground: #FFFFFF;

  --secondary: var(--n-100);
  --secondary-foreground: var(--n-800);

  --muted: var(--n-100);
  --muted-foreground: var(--n-500);

  --accent: var(--com-tint-30);
  --accent-foreground: var(--com-shade-30);

  --destructive: var(--danger);
  --destructive-foreground: #FFFFFF;

  --border: var(--n-250);
  --input: var(--n-250);
  --ring: var(--com-primary);

  --surface: var(--n-100);
  --surface-foreground: var(--n-800);

  /* sidebar */
  --sidebar: var(--n-100);
  --sidebar-foreground: var(--n-800);
  --sidebar-primary: var(--com-primary);
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: var(--com-tint-30);
  --sidebar-accent-foreground: var(--com-shade-30);
  --sidebar-border: var(--n-250);
  --sidebar-ring: var(--com-primary);

  /* charts */
  --chart-1: var(--com-primary);
  --chart-2: var(--brand-sky);
  --chart-3: var(--com-shade-20);
  --chart-4: var(--warning);
  --chart-5: var(--success);

  /* ----- Type — Geist --------------------------------------------------
     Geist Sans is a Swiss-inspired neo-grotesque from Vercel. It is the
     default face of shadcn/ui v4. Geist Mono partners it for code, IDs,
     numerics in tables. Stack falls back to ui-sans-serif for safety.
     -------------------------------------------------------------------- */
  --font-sans:    'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', monospace;

  /* Type ramp (shadcn-style, Tailwind text-* aligned) */
  --fs-display:      36px;  --lh-display:      40px;  --fw-display:      600;  /* @kind font */  --tr-display:     -0.025em;  /* @kind font */
  --fs-title-1:      24px;  --lh-title-1:      32px;  --fw-title-1:      600;  /* @kind font */  --tr-title-1:     -0.02em;   /* @kind font */
  --fs-title-2:      20px;  --lh-title-2:      28px;  --fw-title-2:      600;  /* @kind font */  --tr-title-2:     -0.015em;  /* @kind font */
  --fs-heading:      18px;  --lh-heading:      26px;  --fw-heading:      600;  /* @kind font */  --tr-heading:     -0.01em;   /* @kind font */
  --fs-subheading-1: 16px;  --lh-subheading-1: 24px;  --fw-subheading-1: 500;  /* @kind font */  --tr-subheading-1:-0.005em;  /* @kind font */
  --fs-subheading-2: 16px;  --lh-subheading-2: 24px;  --fw-subheading-2: 600;  /* @kind font */  --tr-subheading-2:-0.005em;  /* @kind font */
  --fs-body-1:       14px;  --lh-body-1:       20px;  --fw-body-1:       400;  /* @kind font */  --tr-body-1:       0;        /* @kind font */
  --fs-body-2:       14px;  --lh-body-2:       20px;  --fw-body-2:       500;  /* @kind font */  --tr-body-2:       0;        /* @kind font */
  --fs-caption:      12px;  --lh-caption:      16px;  --fw-caption:      400;  /* @kind font */  --tr-caption:      0;        /* @kind font */

  /* ----- Spacing ------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-14: 56px;
  --space-18: 72px;

  /* ----- Radii --------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ----- Elevation (neutral, shadcn-ish) ------------------------------ */
  --el-02: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --el-03: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --el-04: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06);
  --el-08: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.06);
  --el-12: 0 12px 20px -6px rgba(0,0,0,.10), 0 6px 12px -6px rgba(0,0,0,.06);
  --el-16: 0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.06);
  --el-24: 0 25px 50px -12px rgba(0,0,0,.18);

  /* ----- Motion -------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --ease-enter:    cubic-bezier(0, 0, 0.2, 1);  /* @kind other */
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);  /* @kind other */
  --dur-fast:    150ms;  /* @kind other */
  --dur-default: 200ms;  /* @kind other */
  --dur-slow:    300ms;  /* @kind other */
  --dur-sheet:   320ms;  /* @kind other */
}

/* Dark mode override */
.dark, [data-theme='dark'] {
  --background: var(--n-900);
  --foreground: #EDEDED;

  --card: var(--n-800);
  --card-foreground: #EDEDED;

  --popover: var(--n-800);
  --popover-foreground: #EDEDED;

  --primary: var(--com-dark-primary);
  --primary-foreground: var(--n-900);

  --secondary: var(--n-750);
  --secondary-foreground: #EDEDED;

  --muted: var(--n-750);
  --muted-foreground: var(--n-400);

  --accent: var(--com-dark-tint-20);
  --accent-foreground: var(--com-dark-primary);

  --destructive: #FF6B73;
  --destructive-foreground: var(--n-900);

  --border: rgba(255,255,255,0.10);
  --input: rgba(255,255,255,0.12);
  --ring: var(--com-dark-primary);

  --surface: var(--n-800);
  --surface-foreground: #EDEDED;

  --sidebar: var(--n-800);
  --sidebar-foreground: #EDEDED;
  --sidebar-primary: var(--com-dark-primary);
  --sidebar-accent: var(--com-dark-tint-20);
  --sidebar-accent-foreground: var(--com-dark-primary);
  --sidebar-border: rgba(255,255,255,0.10);
}

/* =========================================================================
   Base element styles
   ========================================================================= */
html, body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--fs-body-1);
  line-height: var(--lh-body-1);
  font-weight: var(--fw-body-1);
  font-feature-settings: 'cv11', 'ss01', 'ss03'; /* Geist stylistic sets: tabular, straight-l */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .t-display  { font: var(--fw-display) var(--fs-display)/var(--lh-display) var(--font-sans); letter-spacing: var(--tr-display); margin: 0; }
h2, .t-title-1  { font: var(--fw-title-1) var(--fs-title-1)/var(--lh-title-1) var(--font-sans); letter-spacing: var(--tr-title-1); margin: 0; }
.t-title-2      { font: var(--fw-title-2) var(--fs-title-2)/var(--lh-title-2) var(--font-sans); letter-spacing: var(--tr-title-2); }
h3, .t-heading  { font: var(--fw-heading) var(--fs-heading)/var(--lh-heading) var(--font-sans); letter-spacing: var(--tr-heading); margin: 0; }
.t-subheading-1 { font: var(--fw-subheading-1) var(--fs-subheading-1)/var(--lh-subheading-1) var(--font-sans); letter-spacing: var(--tr-subheading-1); }
.t-subheading-2 { font: var(--fw-subheading-2) var(--fs-subheading-2)/var(--lh-subheading-2) var(--font-sans); letter-spacing: var(--tr-subheading-2); }
.t-body-1, p    { font: var(--fw-body-1) var(--fs-body-1)/var(--lh-body-1) var(--font-sans); margin: 0; }
.t-body-2       { font: var(--fw-body-2) var(--fs-body-2)/var(--lh-body-2) var(--font-sans); }
.t-caption, small { font: var(--fw-caption) var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--muted-foreground); }
.t-overline {
  font: 500 11px/14px var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}
.t-mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-feature-settings: 'zero', 'ss01';
}
.t-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }