/* ============================================================
   Citorum Design System — Tokens
   v1 — 2026-05-03
   Source of truth: Citorum-Brand-System.md (in design bundle)
   ============================================================ */

/* --- Web fonts ---------------------------------------------- */
/* Inter + JetBrains Mono from Google Fonts. Caslon 540 self-hosted below. */
/* @import must precede all other rules except @charset and @layer. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

@font-face {
  font-family: 'Caslon 540';
  src: url('/fonts/Caslon540.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     1. BRAND PALETTE
     ============================================================ */
  --brand-purple-500: #321058;   /* Primary. Logotype, primary buttons, links, info. */
  --brand-purple-600: #4d1f80;   /* Hover for primary purple */
  --brand-purple-300: #9180b8;   /* Soft purple. Input hover borders, inactive pills */

  --brand-cream-500:  #f0e6cf;   /* Page background. Auth card. Light surfaces. */

  --brand-walnut-900: #3d2817;   /* Primary text. Diagram lines. */
  --brand-walnut-700: #6b5640;   /* Secondary text. */
  --brand-walnut-500: #8a7560;   /* Tertiary text. Subdued labels. */
  --brand-walnut-400: #a89580;   /* Quaternary. Disabled state. */

  --brand-sand-500:   #c8b896;   /* Default border */
  --brand-sand-300:   #dccdb0;   /* Soft border. Dividers. */

  --neutral-white:    #ffffff;

  /* ============================================================
     2. SEMANTIC PALETTE
     ============================================================ */
  --semantic-success-500: #2d6149;   /* Forest green — Long Room rope */
  --semantic-success-700: #1f4733;
  --semantic-success-50:  #dceee6;

  --semantic-warning-500: #9d6b1c;   /* Antique ochre — aged gold */
  --semantic-warning-700: #7a5114;
  --semantic-warning-50:  #f3e8d2;

  --semantic-danger-500:  #7b1f25;   /* Library claret / oxblood */
  --semantic-danger-700:  #5e161b;
  --semantic-danger-50:   #f0d8d8;

  --semantic-info-500:    #321058;   /* Same as brand purple */
  --semantic-info-50:     #ece7f3;

  /* ============================================================
     3. SEMANTIC SURFACES & ROLES
     ============================================================ */
  --bg-page:        var(--brand-cream-500);
  --bg-card:        var(--neutral-white);
  --bg-elevated:    var(--brand-cream-500); /* + grain motif (see --grain) */

  --fg-1:           var(--brand-walnut-900);  /* Primary text */
  --fg-2:           var(--brand-walnut-700);  /* Secondary text */
  --fg-3:           var(--brand-walnut-500);  /* Tertiary text / labels */
  --fg-disabled:    var(--brand-walnut-400);
  --fg-on-purple:   var(--neutral-white);

  --border-default: var(--brand-sand-500);
  --border-soft:    var(--brand-sand-300);

  --link:           var(--brand-purple-500);
  --link-hover:     var(--brand-purple-600);
  --focus-ring:     var(--brand-purple-500);

  /* ============================================================
     4. TYPE — FONT STACKS
     ============================================================ */
  --font-display: 'Caslon 540', 'Libre Caslon Display', Georgia, serif;
  --font-sans:    'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* ============================================================
     5. TYPE — SCALE TOKENS
     ============================================================ */
  --display-xl-size: 72px;  --display-xl-lh: 1.05;  --display-xl-tracking: -0.02em;
  --display-lg-size: 56px;  --display-lg-lh: 1.05;  --display-lg-tracking: -0.02em;

  --h1-size: 48px;  --h1-lh: 1.10;  --h1-tracking: -0.02em;
  --h2-size: 36px;  --h2-lh: 1.15;  --h2-tracking: -0.015em;
  --h3-size: 24px;  --h3-lh: 1.25;  --h3-tracking: -0.01em;
  --h4-size: 20px;  --h4-lh: 1.30;  --h4-tracking: -0.005em;
  --h5-size: 14px;  --h5-lh: 1.30;  --h5-tracking: 0.08em;   /* uppercase eyebrow */
  --h6-size: 13px;  --h6-lh: 1.30;  --h6-tracking: 0;

  --body-lg-size: 18px; --body-lg-lh: 1.65;
  --body-md-size: 15px; --body-md-lh: 1.55;
  --body-sm-size: 13px; --body-sm-lh: 1.50;
  --caption-size: 12px; --caption-lh: 1.40; --caption-tracking: 0.01em;
  --code-md-size: 13px; --code-md-lh: 1.50;

  /* ============================================================
     6. SHAPE — RADII, SHADOW, SPACING
     ============================================================ */
  --radius-sm: 2px;   /* diagrams, dense UI */
  --radius-md: 4px;   /* default — matches AntD borderRadius */
  --radius-lg: 8px;   /* cards, modals */
  --radius-pill: 999px;

  /* Shadows are restrained — Citorum is "schematic, flat".
     Used only on elevated cards / menus, never on diagrams. */
  --shadow-sm: 0 1px 2px rgba(61, 40, 23, 0.06);
  --shadow-md: 0 4px 12px rgba(61, 40, 23, 0.08), 0 1px 3px rgba(61, 40, 23, 0.05);
  --shadow-lg: 0 16px 40px rgba(61, 40, 23, 0.12), 0 4px 12px rgba(61, 40, 23, 0.06);

  /* Spacing — 4px base */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Long-form measure */
  --measure-prose: 65ch;     /* ~640px at body.lg */

  /* ============================================================
     7. PAPYRUS GRAIN MOTIF
     ============================================================ */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.11 0 0 0 0 0.06 0.5 0.5 0.5 0 -0.4'/></filter><rect width='240' height='240' filter='url(%23g)' opacity='0.35'/></svg>");
}

/* ============================================================
   8. SEMANTIC TYPE CLASSES
   ============================================================ */
.t-display-xl, .display-xl {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--display-xl-size); line-height: var(--display-xl-lh);
  letter-spacing: var(--display-xl-tracking); color: var(--fg-1);
}
.t-display-lg, .display-lg {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--display-lg-size); line-height: var(--display-lg-lh);
  letter-spacing: var(--display-lg-tracking); color: var(--fg-1);
}
.t-h1, h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--h1-size); line-height: var(--h1-lh);
  letter-spacing: var(--h1-tracking); color: var(--fg-1);
  margin: 0;
}
.t-h2, h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--h2-size); line-height: var(--h2-lh);
  letter-spacing: var(--h2-tracking); color: var(--fg-1);
  margin: 0;
}
.t-h3, h3 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--h3-size); line-height: var(--h3-lh);
  letter-spacing: var(--h3-tracking); color: var(--fg-1);
  margin: 0;
}
.t-h4, h4 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--h4-size); line-height: var(--h4-lh);
  letter-spacing: var(--h4-tracking); color: var(--fg-1);
  margin: 0;
}
.t-eyebrow, .t-h5 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--h5-size); line-height: var(--h5-lh);
  letter-spacing: var(--h5-tracking);
  text-transform: uppercase; color: var(--fg-2);
}
.t-h6 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--fg-1);
}
.t-body-lg {
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--body-lg-size); line-height: var(--body-lg-lh); color: var(--fg-1);
}
.t-body-md, body {
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--body-md-size); line-height: var(--body-md-lh); color: var(--fg-1);
}
.t-body-sm {
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--body-sm-size); line-height: var(--body-sm-lh); color: var(--fg-2);
}
.t-caption {
  font-family: var(--font-sans); font-weight: 500;
  font-size: var(--caption-size); line-height: var(--caption-lh);
  letter-spacing: var(--caption-tracking); color: var(--fg-3);
}
.t-code, code, kbd, samp {
  font-family: var(--font-mono); font-weight: 400;
  font-size: var(--code-md-size); line-height: var(--code-md-lh);
}

/* ============================================================
   9. UTILITY: WORDMARK, GRAIN, MEASURE
   ============================================================ */
.citorum-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--display-lg-size);
  line-height: var(--display-lg-lh);
  letter-spacing: var(--display-lg-tracking);
  color: var(--brand-purple-500);
}

.surface-grain {
  position: relative;
  background-color: var(--brand-cream-500);
}
.surface-grain::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-repeat: repeat;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.measure-prose { max-width: var(--measure-prose); }