/* ============================================================
   Luminaya Design System — Tokens
   colors_and_type.css
   ============================================================

   A small palette tuned for a Tokyo-Night-meets-cream aesthetic.
   The deep navy "Ink" line is our default surface; the cream
   "Parchment" is a warm flip for marketing / docs / quotes.

   Import this once in any HTML file:
     <link rel="stylesheet" href="/colors_and_type.css">
   ============================================================ */

/* ---------- Fonts ----------
   Fira Code = display + UI text (humanist-mono, calmer).
   JetBrains Mono = code, terminals, numeric data, captions.
   We treat BOTH as mono — there is no proportional sans in
   the system. That's the point: technical agency, mono-first.
   --------------------------- */

/* Fira Code — self-hosted (brand-provided TTFs) */
@font-face {
  font-family: "Fira Code";
  src: url("fonts/FiraCode-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Code";
  src: url("fonts/FiraCode-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Code";
  src: url("fonts/FiraCode-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Code";
  src: url("fonts/FiraCode-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Code";
  src: url("fonts/FiraCode-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono — self-hosted (brand-provided TTFs).
   The "NL" variants (no-ligature) are also in fonts/ if you ever
   need them — alias them to a separate family if so. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Thin.ttf") format("truetype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-ThinItalic.ttf") format("truetype");
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-ExtraLight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-BoldItalic.ttf") format("truetype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-ExtraBoldItalic.ttf") format("truetype");
  font-weight: 800; font-style: italic; font-display: swap;
}

:root {
  /* ============ Brand palette ============ */
  /* Soft / cream side */
  --brand-ink:        #111844;  /* deep navy — primary surface, primary text on cream */
  --brand-indigo:     #4B5694;  /* muted indigo — secondary */
  --brand-slate:      #7288AE;  /* dusty slate-blue — tertiary / muted UI */
  --brand-parchment:  #EAE0CF;  /* warm cream — alternate surface */

  /* Tokyo Night side */
  --tn-mint:          #00FFD2;  /* signal cyan — accents, focus, success */
  --tn-pink:          #FF4499;  /* hot magenta — danger, highlight, marketing pop */
  --tn-void:          #000000;  /* true black — terminals, max contrast */
  --tn-night:         #0A0047;  /* deep night-violet — alt dark surface */
  --tn-deep:          #004687;  /* ocean-blue — link, info */

  /* ============ Surfaces (dark, default) ============ */
  --bg-0:             #06081C;  /* page — slightly cooler than tn-night */
  --bg-1:             #0E1230;  /* card, panel */
  --bg-2:             #161B40;  /* raised, hover */
  --bg-3:             #1F2552;  /* pressed, selected */
  --bg-inset:         #04061A;  /* inset wells, code blocks */

  /* ============ Surfaces (cream / parchment alt) ============ */
  --bg-cream-0:       #EAE0CF;
  --bg-cream-1:       #F2EBDE;
  --bg-cream-2:       #DDD1B9;

  /* ============ Foreground (on dark) ============ */
  --fg-1:             #EAE0CF;  /* primary text — warm cream, not pure white */
  --fg-2:             #B9C0DB;  /* secondary — cool dusty blue */
  --fg-3:             #7288AE;  /* tertiary, labels, captions */
  --fg-4:             #4B5694;  /* quaternary, disabled */
  --fg-on-accent:    #06081C;  /* text placed on mint/pink/parchment buttons */

  /* ============ Borders & strokes ============ */
  --border-1:         rgba(234, 224, 207, 0.08);  /* hairline */
  --border-2:         rgba(234, 224, 207, 0.14);  /* default */
  --border-3:         rgba(234, 224, 207, 0.24);  /* emphasized */
  --border-mint:      rgba(0, 255, 210, 0.40);
  --border-pink:      rgba(255, 68, 153, 0.40);

  /* ============ Semantic ============ */
  --accent:           var(--tn-mint);
  --accent-soft:      rgba(0, 255, 210, 0.12);
  --accent-pink:      var(--tn-pink);
  --accent-pink-soft: rgba(255, 68, 153, 0.12);
  --link:             var(--tn-mint);
  --link-hover:       #6BFFE5;
  --success:          var(--tn-mint);
  --warning:          #FFC857;
  --danger:           var(--tn-pink);
  --info:             #6FB3E0;

  /* Syntax-ish accents (used sparingly in UI for state) */
  --syntax-kw:        var(--tn-pink);     /* keyword pink */
  --syntax-fn:        #82AAFF;            /* function blue */
  --syntax-str:       #C3E88D;            /* string green */
  --syntax-num:       #F78C6C;            /* number orange */
  --syntax-cmt:       var(--fg-3);        /* comment slate */

  /* ============ Typography ============ */
  --font-display:     "Fira Code", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body:        "Fira Code", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono:        "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — every step is a minor third (1.2x) starting at 14 */
  --fs-12:            0.75rem;    /* 12 — micro labels, ALL CAPS */
  --fs-13:            0.8125rem;  /* 13 — captions */
  --fs-14:            0.875rem;   /* 14 — body small / UI */
  --fs-16:            1rem;       /* 16 — body */
  --fs-18:            1.125rem;   /* 18 — body lead */
  --fs-20:            1.25rem;    /* 20 — h5 */
  --fs-24:            1.5rem;     /* 24 — h4 */
  --fs-30:            1.875rem;   /* 30 — h3 */
  --fs-38:            2.375rem;   /* 38 — h2 */
  --fs-48:            3rem;       /* 48 — h1 */
  --fs-64:            4rem;       /* 64 — display */
  --fs-88:            5.5rem;     /* 88 — hero */

  --lh-tight:         1.1;
  --lh-snug:          1.25;
  --lh-normal:        1.5;
  --lh-loose:         1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.16em;     /* used for SECTION_LABELS */

  /* ============ Spacing (4px base) ============ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ============ Radii ============ */
  --radius-xs: 2px;     /* code chips, tag badges */
  --radius-sm: 4px;     /* inputs, small buttons */
  --radius-md: 6px;     /* cards, panels */
  --radius-lg: 10px;    /* large cards, modals */
  --radius-xl: 16px;    /* hero blocks */
  --radius-pill: 999px;

  /* ============ Shadows / glow ============ */
  /* Shadows are subtle. The "glow" set is the signature move:
     a tight colored ring for active/focus states. */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 6px 24px -8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-lg:  0 24px 64px -16px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4);
  --glow-mint:  0 0 0 1px rgba(0,255,210,0.5), 0 0 24px -4px rgba(0,255,210,0.4);
  --glow-pink:  0 0 0 1px rgba(255,68,153,0.5), 0 0 24px -4px rgba(255,68,153,0.4);
  --inner-well: inset 0 1px 0 rgba(0,0,0,0.4), inset 0 0 0 1px rgba(234,224,207,0.04);

  /* ============ Motion ============ */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;
}

/* ============================================================
   Base + semantic element styles
   ============================================================ */

html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  font-feature-settings: "calt", "liga", "ss02";  /* Fira Code ligatures on */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — all monospace, tight tracking on display sizes */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-38);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

/* Display sizes — for hero / marketing only */
.display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-88);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.display-md {
  font-family: var(--font-display);
  font-size: var(--fs-64);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Section eyebrow — UPPERCASE mono with bracket motif */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--tn-mint);
}
.eyebrow::before { content: "// "; opacity: 0.6; }

/* Body */
p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0;
}
.body-lg { font-size: var(--fs-18); line-height: var(--lh-loose); }
.body-sm { font-size: var(--fs-14); line-height: var(--lh-normal); }

/* Caption / label */
.caption {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-3);
}

/* Inline code + code blocks */
code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-inset);
  color: var(--tn-mint);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-1);
}
pre {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  background: var(--bg-inset);
  color: var(--fg-1);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-1);
  overflow: auto;
  line-height: var(--lh-normal);
  margin: 0;
}
pre code {
  background: none; border: none; padding: 0; color: inherit;
}

/* Links */
a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px dashed var(--border-mint);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--link-hover);
  border-bottom-color: var(--tn-mint);
}

/* Selection */
::selection { background: var(--tn-pink); color: var(--fg-on-accent); }

/* Focus ring — universal */
:focus-visible {
  outline: none;
  box-shadow: var(--glow-mint);
  border-radius: var(--radius-sm);
}

/* hr / divider */
hr {
  border: 0;
  height: 1px;
  background: var(--border-2);
  margin: var(--sp-8) 0;
}