/* Charleston School of Law — Design Tokens
 * Primary palette derived from official logo files.
 * Heritage green is the dominant brand color; gold is reserved for accent.
 */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ============== BRAND COLORS ============== */
  --csol-green: #1f4d33;          /* Heritage green — primary */
  --csol-green-deep: #163826;     /* Pressed / dark surface */
  --csol-green-soft: #2c6347;     /* Hover */
  --csol-green-tint: #e6ede9;     /* Subtle backgrounds */
  --csol-green-mist: #f3f6f4;     /* Page tints */

  --csol-gold: #cfb53b;           /* Heritage gold — accent only */
  --csol-gold-deep: #a8902a;
  --csol-gold-soft: #e2cf6e;
  --csol-gold-tint: #f8f1d9;

  --csol-ink: #14181b;            /* Body text */
  --csol-ink-2: #2a3036;
  --csol-ink-3: #4b5560;
  --csol-ink-4: #717b87;
  --csol-rule: #d8dde2;
  --csol-rule-soft: #e9ecef;
  --csol-paper: #fbfaf6;          /* Warm off-white */
  --csol-white: #ffffff;

  /* Semantic */
  --csol-error: #8a2a2a;
  --csol-success: #2f6a3f;
  --csol-info: #2a5481;
  --csol-warning: #b8881f;

  /* ============== SEMANTIC COLOR TOKENS ============== */
  --fg-1: var(--csol-ink);
  --fg-2: var(--csol-ink-2);
  --fg-3: var(--csol-ink-3);
  --fg-muted: var(--csol-ink-4);
  --fg-on-green: #f7f4e6;
  --fg-on-gold: var(--csol-green-deep);

  --bg-page: var(--csol-paper);
  --bg-surface: var(--csol-white);
  --bg-tint: var(--csol-green-mist);
  --bg-inverse: var(--csol-green-deep);

  --border: var(--csol-rule);
  --border-soft: var(--csol-rule-soft);
  --border-strong: var(--csol-ink-2);

  --accent: var(--csol-green);
  --accent-fg: #f7f4e6;
  --gilt: var(--csol-gold);

  /* ============== TYPOGRAPHY ============== */
  /* Display: Cormorant Garamond — closest free match for the elegant didone-ish
     wordmark serif (true match likely Trajan/Garamond Premier — flagged in README) */
  --font-display: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  /* Body: Source Serif 4 — academic, legible long-form */
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  /* UI / sans for forms, navs, dense data */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --fs-eyebrow: 0.75rem;     /* 12 — uppercase tracking */
  --fs-caption: 0.8125rem;   /* 13 */
  --fs-body-sm: 0.9375rem;   /* 15 */
  --fs-body: 1.0625rem;      /* 17 — serif body */
  --fs-lede: 1.25rem;        /* 20 */
  --fs-h6: 1rem;
  --fs-h5: 1.125rem;
  --fs-h4: 1.375rem;
  --fs-h3: 1.75rem;
  --fs-h2: 2.5rem;
  --fs-h1: 3.5rem;
  --fs-display: 5.5rem;

  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.18em;  /* SCHOOL OF LAW spacing */

  /* ============== 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-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ============== RADII ============== */
  /* Brand reads as architectural / classical — radii are conservative. */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-pill: 999px;

  /* ============== SHADOWS ============== */
  --shadow-1: 0 1px 2px rgba(20, 24, 27, 0.06), 0 1px 1px rgba(20, 24, 27, 0.04);
  --shadow-2: 0 4px 12px rgba(20, 24, 27, 0.08), 0 2px 4px rgba(20, 24, 27, 0.04);
  --shadow-3: 0 12px 28px rgba(20, 24, 27, 0.12), 0 4px 10px rgba(20, 24, 27, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(20, 24, 27, 0.06);

  /* Decorative gold rule (mimics the wordmark divider) */
  --rule-gilt: 1px solid var(--csol-gold);
  --rule-thin: 1px solid var(--csol-rule);
  --rule-strong: 2px solid var(--csol-ink);
}

/* ============== SEMANTIC ELEMENT STYLES ============== */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.csol-display, .csol-h1, .csol-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}
.csol-display { font-size: var(--fs-display); font-weight: 400; }
.csol-h1 { font-size: var(--fs-h1); font-weight: 500; }
.csol-h2 { font-size: var(--fs-h2); font-weight: 500; }
.csol-h3 { font-family: var(--font-serif); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); }
.csol-h4 { font-family: var(--font-serif); font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }
.csol-h5 { font-family: var(--font-sans); font-size: var(--fs-h5); font-weight: 600; }
.csol-h6 { font-family: var(--font-sans); font-size: var(--fs-h6); font-weight: 600; }

.csol-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.csol-lede {
  font-family: var(--font-serif);
  font-size: var(--fs-lede);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.csol-body { font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-2); }
.csol-caption { font-family: var(--font-sans); font-size: var(--fs-caption); color: var(--fg-3); }
.csol-mono { font-family: var(--font-mono); font-size: 0.9rem; }

/* The signature "wordmark divider" — a thin rule between title and subtitle */
.csol-rule-divider {
  border: 0;
  border-top: 1px solid var(--csol-ink);
  margin: var(--space-3) 0;
}
.csol-rule-divider--gold { border-top-color: var(--csol-gold); }
.csol-rule-divider--green { border-top-color: var(--csol-green); }