/* ============================================================
   A28 Global — Design Tokens
   Extracted from Figma "A28 Website.fig"
   Source of truth for colors, type, spacing, radii, motion.
   ============================================================ */

:root {
  /* — Colors — Surfaces & ink — */
  --a28-bone:        #F5F5EB;   /* primary light surface */
  --a28-bone-rgb:    245, 245, 235;
  --a28-ink:         #000000;   /* primary text on bone */
  --a28-ink-rgb:     0, 0, 0;
  --a28-ink-90:      rgba(var(--a28-ink-rgb), 0.90);
  --a28-ink-70:      rgba(var(--a28-ink-rgb), 0.70);
  --a28-ink-50:      rgba(var(--a28-ink-rgb), 0.50);
  --a28-ink-30:      rgba(var(--a28-ink-rgb), 0.30);
  --a28-ink-15:      rgba(var(--a28-ink-rgb), 0.15);
  --a28-ink-08:      rgba(var(--a28-ink-rgb), 0.08);

  --a28-obsidian:    #1C1B1F;   /* dark surface */
  --a28-obsidian-rgb: 28, 27, 31;
  --a28-obsidian-90: rgba(var(--a28-obsidian-rgb), 0.90);

  --a28-paper:       #FFFFFF;   /* pure white (cards on dark) */
  --a28-paper-rgb:   255, 255, 255;
  --a28-paper-70:    rgba(var(--a28-paper-rgb), 0.70);
  --a28-paper-50:    rgba(var(--a28-paper-rgb), 0.50);
  --a28-paper-30:    rgba(var(--a28-paper-rgb), 0.30);
  --a28-paper-15:    rgba(var(--a28-paper-rgb), 0.15);
  --a28-paper-08:    rgba(var(--a28-paper-rgb), 0.08);

  /* — Accent (muted gold). Use sparingly. — */
  --a28-gold:        #8B660D;   /* primary accent — hairlines, marks, key text */
  --a28-gold-rgb:    139, 102, 13;
  --a28-gold-light:  #D7A858;   /* secondary accent — gradients, hover */
  --a28-gold-light-rgb: 215, 168, 88;
  --a28-gold-pale:   #EDD4A8;   /* surfaces only */
  --a28-gold-pale-rgb: 237, 212, 168;
  --a28-gold-mist:   #FCDDA8;   /* high-tint backgrounds */

  /* — States — */
  --a28-border:      rgba(0,0,0,0.12);
  --a28-border-dark: rgba(255,255,255,0.12);
  --a28-shadow-sm:   0 1px 2px rgba(0,0,0,0.04);
  --a28-shadow-md:   0 6px 24px rgba(0,0,0,0.06);
  --a28-shadow-lg:   0 18px 48px rgba(0,0,0,0.10);

  /* — Type — */
  --a28-font-display: "Oranienbaum", "Cormorant Garamond", "Times New Roman", serif;
  --a28-font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --a28-font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Display scale (Oranienbaum) */
  --a28-display-xl:  128px;
  --a28-display-lg:  64px;
  --a28-display-md:  52px;
  --a28-display-sm:  48px;
  --a28-display-xs:  36px;
  --a28-display-2xs: 30px;
  --a28-display-3xs: 22px;

  /* Body scale (Inter) */
  --a28-body-xl:     20px;
  --a28-body-lg:     18px;
  --a28-body-md:     16px;
  --a28-body-sm:     14px;
  --a28-body-xs:     12px;

  /* Weights */
  --a28-w-extralight: 200;
  --a28-w-light:      300;
  --a28-w-regular:    400;
  --a28-w-medium:     500;
  --a28-w-semibold:   600;

  /* Tracking */
  --a28-track-display: -0.02em;
  --a28-track-body:    0em;
  --a28-track-eyebrow: 0.18em;

  /* Line height */
  --a28-lh-tight:   1.0;
  --a28-lh-snug:    1.15;
  --a28-lh-normal:  1.5;
  --a28-lh-relaxed: 1.65;

  /* — Spacing (4pt base) — */
  --a28-space-1:   4px;
  --a28-space-2:   8px;
  --a28-space-3:   12px;
  --a28-space-4:   16px;
  --a28-space-5:   20px;
  --a28-space-6:   24px;
  --a28-space-8:   32px;
  --a28-space-10:  40px;
  --a28-space-12:  48px;
  --a28-space-16:  64px;
  --a28-space-20:  80px;
  --a28-space-24:  96px;
  --a28-space-32:  128px;
  --a28-space-40:  160px;

  /* — Layout — */
  --a28-container-max: 1280px;
  --a28-container-x:   80px;
  --a28-grid-cols:     12;
  --a28-grid-gutter:   32px;

  /* — Radius — */
  --a28-radius-none: 0;
  --a28-radius-xs:   2px;
  --a28-radius-sm:   4px;
  --a28-radius-md:   8px;
  --a28-radius-lg:   12px;
  --a28-radius-xl:   16px;
  --a28-radius-pill: 999px;

  /* — Stroke — */
  --a28-stroke-hair:  0.5px;
  --a28-stroke-thin:  1px;
  --a28-stroke-med:   2px;

  /* — Motion — */
  --a28-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --a28-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --a28-dur-fast:     120ms;
  --a28-dur-base:     200ms;
  --a28-dur-slow:     360ms;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--a28-font-sans);
  font-weight: var(--a28-w-light);
  font-size: var(--a28-body-md);
  line-height: var(--a28-lh-relaxed);
  color: var(--a28-ink);
  background: var(--a28-bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--a28-gold); color: var(--a28-bone); }

/* ===== Type primitives ===== */
.a28-display       { font-family: var(--a28-font-display); font-weight: var(--a28-w-regular); line-height: var(--a28-lh-tight); letter-spacing: var(--a28-track-display); }
.a28-display-xl    { font-size: var(--a28-display-xl); }
.a28-display-lg    { font-size: var(--a28-display-lg); }
.a28-display-md    { font-size: var(--a28-display-md); }
.a28-display-sm    { font-size: var(--a28-display-sm); }
.a28-display-xs    { font-size: var(--a28-display-xs); }
.a28-display-2xs   { font-size: var(--a28-display-2xs); }

.a28-eyebrow {
  font-family: var(--a28-font-mono);
  font-size: var(--a28-body-xs);
  font-weight: var(--a28-w-medium);
  text-transform: uppercase;
  letter-spacing: var(--a28-track-eyebrow);
  color: var(--a28-ink-50);
}
.a28-eyebrow.on-dark { color: var(--a28-paper-50); }

.a28-lede {
  font-size: var(--a28-body-xl);
  font-weight: var(--a28-w-light);
  line-height: var(--a28-lh-relaxed);
  color: var(--a28-ink-70);
}

/* ===== Buttons ===== */
.a28-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--a28-space-3);
  font-family: var(--a28-font-sans);
  font-size: var(--a28-body-sm);
  font-weight: var(--a28-w-medium);
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--a28-radius-pill);
  cursor: pointer;
  transition: background var(--a28-dur-base) var(--a28-ease-out),
              color var(--a28-dur-base) var(--a28-ease-out),
              border-color var(--a28-dur-base) var(--a28-ease-out),
              transform var(--a28-dur-fast) var(--a28-ease-out);
  text-decoration: none;
}
.a28-btn:active { transform: translateY(1px); }
.a28-btn--primary { background: var(--a28-ink); color: var(--a28-bone); }
.a28-btn--primary:hover { background: var(--a28-gold); color: var(--a28-bone); }
.a28-btn--primary.on-dark { background: var(--a28-bone); color: var(--a28-ink); }
.a28-btn--primary.on-dark:hover { background: var(--a28-gold); color: var(--a28-bone); }

.a28-btn--secondary {
  background: transparent; color: var(--a28-ink);
  border-color: var(--a28-ink-30);
}
.a28-btn--secondary:hover { border-color: var(--a28-ink); }
.a28-btn--secondary.on-dark { color: var(--a28-bone); border-color: var(--a28-paper-30); }
.a28-btn--secondary.on-dark:hover { border-color: var(--a28-bone); }

.a28-btn--ghost { background: transparent; color: var(--a28-ink); padding: 12px 0; }
.a28-btn--ghost:hover { color: var(--a28-gold); }
.a28-btn--ghost.on-dark { color: var(--a28-bone); }

.a28-btn--lg { padding: 18px 36px; font-size: var(--a28-body-md); }
.a28-btn--xl {
  padding: 24px 40px;
  font-family: var(--a28-font-display);
  font-size: 28px;
  font-weight: var(--a28-w-regular);
  letter-spacing: var(--a28-track-display);
}

.a28-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.a28-btn:focus-visible { outline: 2px solid var(--a28-gold); outline-offset: 3px; }

/* ===== Inputs ===== */
.a28-field { display: flex; flex-direction: column; gap: var(--a28-space-2); }
.a28-field-label {
  font-family: var(--a28-font-mono);
  font-size: var(--a28-body-xs);
  text-transform: uppercase;
  letter-spacing: var(--a28-track-eyebrow);
  color: var(--a28-ink-50);
}
.a28-field-label.on-dark { color: var(--a28-paper-50); }
.a28-input, .a28-textarea {
  font-family: var(--a28-font-sans);
  font-size: var(--a28-body-md);
  font-weight: var(--a28-w-light);
  color: var(--a28-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--a28-ink-15);
  padding: 10px 0;
  outline: none;
  transition: border-color var(--a28-dur-base) var(--a28-ease-out);
}
.a28-input.on-dark, .a28-textarea.on-dark {
  color: var(--a28-bone);
  border-bottom-color: var(--a28-paper-15);
}
.a28-input:focus, .a28-textarea:focus { border-bottom-color: var(--a28-gold); }
.a28-textarea { resize: vertical; min-height: 96px; }

/* ===== Card ===== */
.a28-card {
  background: var(--a28-paper);
  border: 1px solid var(--a28-border);
  border-radius: var(--a28-radius-xl);
  padding: var(--a28-space-10);
  transition: border-color var(--a28-dur-base) var(--a28-ease-out),
              transform var(--a28-dur-base) var(--a28-ease-out);
}
.a28-card:hover { border-color: var(--a28-ink-30); }
.a28-card--flat { border-radius: 0; border-left: 0; border-right: 0; padding: var(--a28-space-12) 0; }
.a28-card--dark { background: var(--a28-obsidian); color: var(--a28-bone); border-color: var(--a28-border-dark); }
.a28-card--gold {
  background: linear-gradient(180deg, var(--a28-gold-light) 0%, var(--a28-gold-pale) 100%);
  border: none; color: var(--a28-ink);
}

/* ===== Badge ===== */
.a28-badge {
  display: inline-flex; align-items: center; gap: var(--a28-space-2);
  font-family: var(--a28-font-mono);
  font-size: var(--a28-body-xs);
  font-weight: var(--a28-w-medium);
  text-transform: uppercase;
  letter-spacing: var(--a28-track-eyebrow);
  padding: 6px 10px;
  border: 1px solid var(--a28-ink-15);
  border-radius: var(--a28-radius-sm);
  color: var(--a28-ink-70);
}
.a28-badge.on-dark { color: var(--a28-paper-70); border-color: var(--a28-paper-15); }
.a28-badge--gold { color: var(--a28-gold); border-color: var(--a28-gold); }

/* ===== Section utility ===== */
.a28-section { padding: var(--a28-space-32) 0; }
.a28-section--dark { background: var(--a28-obsidian); color: var(--a28-bone); }
.a28-section--ink  { background: var(--a28-ink); color: var(--a28-bone); }

.a28-container {
  max-width: var(--a28-container-max);
  margin: 0 auto;
  padding: 0 var(--a28-container-x);
}

/* ===== Hairline rule ===== */
.a28-rule { height: 1px; width: 100%; background: var(--a28-ink-15); border: 0; }
.a28-rule.on-dark { background: var(--a28-paper-15); }

/* ===== Logo monogram ===== */
.a28-logo {
  font-family: var(--a28-font-display);
  font-size: 22px;
  letter-spacing: 0;
  color: inherit;
  text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.a28-logo .dot { color: var(--a28-gold); }

/* ============================================================
   Theme: Enterprise (warm cream + terracotta)
   Activated by [data-theme="enterprise"] on <html> (and mirrored
   to <body> by theme.js). Only overrides foundational tokens —
   ink-*, paper-*, gold-* alpha ladders auto-recompute via the
   *-rgb companion vars above.
   ============================================================ */
[data-theme="enterprise"] {
  --a28-bone:           #F4EDE0;
  --a28-bone-rgb:       244, 237, 224;
  --a28-ink:            #3D2C20;
  --a28-ink-rgb:        61, 44, 32;

  /* Dark surface stays dark, but warm espresso instead of cool obsidian. */
  --a28-obsidian:       #2A1F18;
  --a28-obsidian-rgb:   42, 31, 24;

  --a28-gold:           #B14E2E;
  --a28-gold-rgb:       177, 78, 46;
  --a28-gold-light:     #D17654;
  --a28-gold-light-rgb: 209, 118, 84;
  --a28-gold-pale:      #F0C9A8;
  --a28-gold-pale-rgb:  240, 201, 168;
  --a28-gold-mist:      #F7E0D0;

  /* — Type — shared with Government route (Oranienbaum/Inter/JetBrains Mono).
     Intentionally no font overrides here — both routes use the same family stack
     defined in :root for visual consistency across the site. — */

  /* Larger pill radii, softer corners */
  --a28-radius-lg:    18px;
  --a28-radius-xl:    24px;

  /* Softer shadows (warmer dark, lower opacity) */
  --a28-shadow-sm:    0 2px 6px rgba(var(--a28-ink-rgb), 0.06);
  --a28-shadow-md:    0 10px 32px rgba(var(--a28-ink-rgb), 0.08);
  --a28-shadow-lg:    0 28px 64px rgba(var(--a28-ink-rgb), 0.10);
}

/* ============================================================
   Theme: Government (current identity — explicit for parity)
   ============================================================ */
[data-theme="government"] {
  /* identical to :root defaults; listed for symmetry only */
}