/* ============================================================
   Sillok Design System — Claude-style cream/coral/navy
   ============================================================
   Adapted from Anthropic Claude.com marketing surface.
   Token NAMES are kept (paper-*, ink-*, line-*, seal-*) for
   backwards-compat with existing inline styles, but VALUES are
   Claude.com palette: tinted cream canvas + warm coral primary
   + dark navy product surfaces.

   Per project: logo is unchanged. All UI fonts are Pretendard.
   ============================================================ */

/* ---------- Fonts ---------- */
/* Pretendard: single Korean + Latin sans for the entire interface */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');
/* JetBrains Mono: code, transcript IDs, prices */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLOR — Cream Canvas + Coral
     ============================================================
     Warm tinted cream base, coral signature accent, dark navy
     product surfaces. The cream-vs-dark contrast carries pacing.
     ============================================================ */

  /* Paper / surface (backgrounds) */
  --paper-0:        #FAF9F5;   /* canvas — page floor, warm cream */
  --paper-1:        #F5F0E8;   /* surface-soft — section dividers, soft bands */
  --paper-2:        #E8E0D2;   /* surface-cream-strong — emphasized bands, active tabs */
  --paper-card:     #EFE9DE;   /* surface-card — feature/content cards (cream, not white) */

  /* Dark navy product surfaces (Claude code-window, model-showcase, footer) */
  --surface-dark:           #181715;
  --surface-dark-soft:      #1F1E1B;   /* code block bg inside dark cards */
  --surface-dark-elevated:  #252320;   /* elevated cards inside dark bands */
  --on-dark:                #FAF9F5;   /* cream-tinted white for text on dark */
  --on-dark-soft:           #A09D96;   /* secondary labels on dark */

  /* Ink (foreground) */
  --ink-0:          #141413;   /* primary text — warm near-black */
  --ink-1:          #252523;   /* body-strong — emphasized paragraphs */
  --ink-2:          #6C6A64;   /* muted — sub-headings, secondary */
  --ink-3:          #8E8B82;   /* muted-soft — captions, fine-print */
  --ink-4:          #A09D96;   /* hairline-on-dark / very faint text */

  /* Hairlines (borders) */
  --line-1:         #E6DFD8;   /* hairline — default 1px border on cream */
  --line-2:         #D8CFC1;   /* emphasized border */
  --line-3:         #141413;   /* document rule (hard line) */

  /* Coral — signature Anthropic accent (mapped onto seal-* names) */
  --seal-50:        #FBF1ED;
  --seal-100:       #F4D9CC;
  --seal-300:       #E0987F;
  --seal-500:       #CC785C;   /* primary — coral CTA */
  --seal-600:       #A9583E;   /* hover/pressed — primary-active */
  --seal-700:       #8C4530;
  --seal-900:       #4A2218;

  /* Coral aliases for clarity at call sites */
  --primary:           var(--seal-500);
  --primary-active:    var(--seal-600);
  --primary-disabled:  #E6DFD8;
  --on-primary:        #FFFFFF;

  /* Companion accents (sparing) */
  --accent-teal:    #5DB8A6;   /* terminal status / "active" dots */
  --accent-amber:   #E8A55A;   /* category badges, inline highlights */

  /* Semantic */
  --success-500:    #5DB872;
  --success-50:     #E5F2E8;
  --warning-500:    #D4A017;
  --warning-50:     #F8ECC9;
  --danger-500:     #C64545;
  --danger-50:      #F7E2E2;
  --info-500:       #5DB8A6;
  --info-50:        #E0F0EC;

  /* Watermark — required for AI drafts per §6 운영 규칙 */
  --watermark:      rgba(204, 120, 92, 0.10);

  /* ============================================================
     TYPOGRAPHY — Pretendard everywhere (per project decision)
     ============================================================ */
  --font-sans:      'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-serif:     var(--font-sans); /* No serif display: Pretendard handles all type */
  --font-mono:      'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — modular, expanded toward Claude display sizes */
  --text-2xs:       11px;
  --text-xs:        12px;
  --text-sm:        13px;   /* body-sm */
  --text-base:      15px;
  --text-md:        16px;   /* body-md / title-sm */
  --text-lg:        18px;   /* title-md */
  --text-xl:        22px;   /* title-lg */
  --text-2xl:       28px;   /* display-sm */
  --text-3xl:       36px;   /* display-md */
  --text-4xl:       48px;   /* display-lg */
  --text-5xl:       64px;   /* display-xl */

  /* Line heights — display tight, body comfortable */
  --lh-tight:       1.05;   /* display-xl */
  --lh-snug:        1.15;
  --lh-display:     1.20;
  --lh-normal:      1.55;
  --lh-loose:       1.6;

  /* Tracking — display sizes need negative tracking for editorial feel */
  --track-display:  -0.025em;  /* aggressive on display-xl/lg */
  --track-tight:    -0.018em;  /* display-md/sm */
  --track-snug:     -0.01em;
  --track-normal:   0;
  --track-wide:     0.06em;
  --track-wider:    0.12em;    /* uppercase eyebrows */

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ============================================================
     SPACING — 4px base (matches Claude tokens)
     ============================================================ */
  --space-0:        0;
  --space-1:        4px;    /* xxs */
  --space-2:        8px;    /* xs */
  --space-3:        12px;   /* sm */
  --space-4:        16px;   /* md */
  --space-5:        20px;
  --space-6:        24px;   /* lg */
  --space-8:        32px;   /* xl */
  --space-10:       40px;
  --space-12:       48px;   /* xxl */
  --space-16:       64px;
  --space-20:       80px;
  --space-24:       96px;   /* section */

  /* ============================================================
     RADII — Claude scale
     ============================================================ */
  --radius-0:       0;
  --radius-sm:      4px;     /* xs */
  --radius:         6px;     /* sm — small inline buttons */
  --radius-md:      8px;     /* md — default CTA / input */
  --radius-lg:      12px;    /* lg — content cards */
  --radius-xl:      16px;    /* xl — hero / large marquee */
  --radius-pill:    9999px;  /* badges */

  /* ============================================================
     ELEVATION — color-block first, shadow rare
     ============================================================ */
  --shadow-0:       none;
  --shadow-1:       0 1px 3px rgba(20, 20, 19, 0.06);
  --shadow-2:       0 4px 14px rgba(20, 20, 19, 0.08),
                    0 1px 3px rgba(20, 20, 19, 0.04);
  --shadow-3:       0 12px 32px rgba(20, 20, 19, 0.10),
                    0 2px 4px rgba(20, 20, 19, 0.06);
  --shadow-inset:   inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* Focus ring — coral, 3px outer */
  --focus-ring:     0 0 0 2px var(--paper-0), 0 0 0 4px var(--seal-500);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:       120ms;
  --dur-base:       180ms;
  --dur-slow:       280ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1440px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
html, body {
  background: var(--paper-0);
  color: var(--ink-0);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  font-feature-settings: "ss01", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--ink-0);
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-display);
  color: var(--ink-0);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--track-snug);
  color: var(--ink-0);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  line-height: var(--lh-display);
  color: var(--ink-0);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--ink-1);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-2);
}

.label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-1);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--ink-2);
  line-height: var(--lh-display);
}

.mono, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
}

code {
  font-size: 0.92em;
  background: var(--paper-1);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-1);
}

pre {
  background: var(--surface-dark);
  color: var(--on-dark);
  border: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  overflow-x: auto;
}

a {
  color: var(--seal-500);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--seal-600); }

::selection {
  background: var(--seal-100);
  color: var(--seal-900);
}

.tnum { font-variant-numeric: tabular-nums; }