/* ==========================================================================
   Raft Management — Colors, Type, and Core Tokens
   Consumed by the admin app, marketing site, and all design artifacts.
   ========================================================================== */

/* ---- Fonts — self-hosted from /fonts/ ---------------------------------
   Using variable-weight WOFF2 files: one upright + one italic per family
   covers every weight we use.
   ---------------------------------------------------------------------- */

/* Inter Tight — display + UI */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterTight-VariableFont_wght.woff2') format('woff2-variations'),
       url('/fonts/InterTight-VariableFont_wght.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Tight';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/InterTight-Italic-VariableFont_wght.woff2') format('woff2-variations'),
       url('/fonts/InterTight-Italic-VariableFont_wght.woff2') format('woff2');
}

/* JetBrains Mono — technical strings, wordmark */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-VariableFont_wght.woff2') format('woff2-variations'),
       url('/fonts/JetBrainsMono-VariableFont_wght.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url('/fonts/JetBrainsMono-Italic-VariableFont_wght.woff2') format('woff2-variations'),
       url('/fonts/JetBrainsMono-Italic-VariableFont_wght.woff2') format('woff2');
}

:root {
  /* ======================================================================
     COLOR — Raw palette
     ====================================================================== */

  /* Amber / Honey — the primary brand family. Warm, workshop-lit. */
  --amber-50:  #FFF7E6;
  --amber-100: #FFEBBF;
  --amber-200: #FFDB8A;
  --amber-300: #FFC74F;
  --amber-400: #FFB01F;   /* brand signature */
  --amber-500: #F59A0B;
  --amber-600: #D97706;
  --amber-700: #B45309;
  --amber-800: #8A3E07;
  --amber-900: #5A2906;

  /* Ember — deeper orange, used for hover, pressed, gradient endpoints. */
  --ember-400: #F97316;
  --ember-500: #EA580C;
  --ember-600: #C2410C;
  --ember-700: #9A3412;

  /* Espresso — near-black, warm-toned. Dominant surface for the admin app. */
  --espresso-50:  #F7F2EB;
  --espresso-100: #E8DFD2;
  --espresso-200: #C8B9A3;
  --espresso-300: #9A8770;
  --espresso-400: #6E5B46;
  --espresso-500: #4B3B2A;
  --espresso-600: #3A2D20;
  --espresso-700: #2B2117;   /* dark surface raised */
  --espresso-800: #1E170F;   /* dark surface base */
  --espresso-900: #141009;   /* deepest, app chrome */

  /* Cream / Parchment — marketing surfaces. */
  --cream-50:  #FDFAF3;
  --cream-100: #F7F1E3;
  --cream-200: #EFE6D0;
  --cream-300: #E3D6B7;

  /* Functional / semantic — muted, flat, never neon. */
  --success-400: #4FB37A;
  --success-500: #2E8B57;
  --success-700: #1F5E3A;

  --warn-400: #E0A83A;
  --warn-500: #B8860B;
  --warn-700: #7A5A07;

  --danger-400: #D65A4B;
  --danger-500: #B3341E;
  --danger-700: #7A1F10;

  --info-400: #6B8FB8;
  --info-500: #3E6FA0;
  --info-700: #254768;

  /* Terminal-green — used sparingly on dark surfaces for live/ok states. */
  --term-green: #8FC651;

  /* ======================================================================
     COLOR — Semantic tokens (prefer these over raw palette)
     ====================================================================== */

  /* Surfaces — LIGHT mode (marketing / light admin panels) */
  --surface-0:      var(--cream-50);     /* page */
  --surface-1:      #FFFFFF;             /* card */
  --surface-2:      var(--cream-100);    /* raised / hover */
  --surface-inset:  var(--cream-200);    /* input wells, code blocks */

  /* Foregrounds */
  --fg-1: var(--espresso-900);           /* primary text */
  --fg-2: var(--espresso-600);           /* secondary text */
  --fg-3: var(--espresso-400);           /* tertiary / meta */
  --fg-4: var(--espresso-300);           /* disabled / placeholders */
  --fg-inverse: var(--cream-50);         /* on dark surfaces */

  /* Borders */
  --border:       var(--espresso-100);
  --border-strong: var(--espresso-200);
  --border-dark:  var(--espresso-700);    /* for dark surfaces */

  /* Brand */
  --brand:          var(--amber-400);
  --brand-hover:    var(--amber-500);
  --brand-press:    var(--amber-600);
  --brand-fg:       var(--espresso-900);  /* text on amber fills */

  /* Focus ring */
  --focus: var(--amber-400);

  /* Status semantic (surface + foreground) */
  --ok-bg:      #E8F3EC;  --ok-fg:      var(--success-700);
  --warn-bg:    #FDF3DA;  --warn-fg:    var(--warn-700);
  --danger-bg:  #FBE5E0;  --danger-fg:  var(--danger-700);
  --info-bg:    #E7EDF5;  --info-fg:    var(--info-700);

  /* Brand gradient — the ONE permitted gradient. */
  --grad-brand: linear-gradient(135deg, var(--amber-400) 0%, var(--ember-500) 100%);

  /* ======================================================================
     TYPE
     ====================================================================== */

  --font-sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Modular scale (1.2) */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.30;
  --lh-normal: 1.50;
  --lh-loose:  1.70;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-mono:    0.01em;

  /* ======================================================================
     SPACING — 4px base unit
     ====================================================================== */
  --space-0:   0;
  --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
     ====================================================================== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ======================================================================
     SHADOWS — warm, tinted toward brown/amber
     ====================================================================== */
  --shadow-xs: 0 1px 2px rgb(56 34 16 / 0.06);
  --shadow-sm: 0 2px 6px rgb(56 34 16 / 0.08);
  --shadow-md: 0 6px 16px rgb(56 34 16 / 0.10);
  --shadow-lg: 0 18px 40px rgb(56 34 16 / 0.14);
  --shadow-xl: 0 28px 64px rgb(56 34 16 / 0.18);

  /* Inset used for pressed / well states */
  --shadow-inset: inset 0 1px 2px rgb(56 34 16 / 0.08);

  /* ======================================================================
     MOTION
     ====================================================================== */
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   320ms;
}

/* ==========================================================================
   DARK THEME — the admin console default.
   Apply by setting [data-theme="dark"] on <html> or <body>.
   ========================================================================== */
[data-theme="dark"] {
  --surface-0:     var(--espresso-900);
  --surface-1:     var(--espresso-800);
  --surface-2:     var(--espresso-700);
  --surface-inset: var(--espresso-900);

  --fg-1: var(--cream-50);
  --fg-2: var(--espresso-200);
  --fg-3: var(--espresso-300);
  --fg-4: var(--espresso-400);
  --fg-inverse: var(--espresso-900);

  --border:        var(--espresso-700);
  --border-strong: var(--espresso-600);

  --brand-fg: var(--espresso-900);

  --ok-bg:     rgb(46 139 87 / 0.15);   --ok-fg:     var(--success-400);
  --warn-bg:   rgb(184 134 11 / 0.18);  --warn-fg:   var(--warn-400);
  --danger-bg: rgb(179 52 30 / 0.20);   --danger-fg: var(--danger-400);
  --info-bg:   rgb(62 111 160 / 0.18);  --info-fg:   var(--info-400);

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.25);
  --shadow-sm: 0 2px 6px rgb(0 0 0 / 0.30);
  --shadow-md: 0 6px 16px rgb(0 0 0 / 0.40);
  --shadow-lg: 0 18px 40px rgb(0 0 0 / 0.50);
}

/* ==========================================================================
   SEMANTIC ELEMENT STYLES — use these for h1/h2/p/code/etc in any HTML
   that opts into the brand (add class .raft to <body> or a wrapper).
   ========================================================================== */

.raft {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.raft h1, .raft .h1 {
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}

.raft h2, .raft .h2 {
  font-size: var(--text-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

.raft h3, .raft .h3 {
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

.raft h4, .raft .h4 {
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

.raft p {
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}

.raft .eyebrow,
.raft .kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--amber-600);
  margin: 0 0 var(--space-2);
}

.raft .display {
  font-size: var(--text-5xl);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: var(--fw-bold);
  color: var(--fg-1);
}

.raft .lead {
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.raft .caption,
.raft small {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}

.raft code,
.raft kbd,
.raft .mono {
  font-family: var(--font-mono);
  font-size: 0.93em;
  letter-spacing: var(--tracking-mono);
}

.raft code {
  background: var(--surface-inset);
  color: var(--fg-1);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.raft pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  background: var(--surface-inset);
  color: var(--fg-1);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow-x: auto;
}

.raft a {
  color: var(--amber-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease);
}
.raft a:hover { color: var(--ember-600); }
[data-theme="dark"] .raft a       { color: var(--amber-300); }
[data-theme="dark"] .raft a:hover { color: var(--amber-200); }

/* Default focus ring */
.raft :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}