/* ============================================================
   DELUCINATE — colors & type foundations
   ============================================================
   Source of truth for tokens. Import via:
     <link rel="stylesheet" href="/colors_and_type.css">
   or @import url("/colors_and_type.css");
   ============================================================ */

/* ---- Fonts -------------------------------------------------- */

@font-face {
  font-family: "Montalban";
  src: url("./fonts/Montalban-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montalban";
  src: url("./fonts/Montalban-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Montalban";
  src: url("./fonts/Montalban-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montalban";
  src: url("./fonts/Montalban-Bold-Italic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Audiowide";
  src: url("./fonts/Audiowide-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("./fonts/SourceSans3-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("./fonts/SourceSans3-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Color: brand core (Del's palette · v2 from delucinate.me) ---- */
  --del-navy:        #0a0f1e;   /* primary background — deeper, pops better */
  --del-navy-mid:    #111827;   /* mid-tone navy */
  --del-navy-board:  #0D1B3E;   /* Del's literal snowboard color */
  --del-navy-deep:   #08122A;   /* deeper still for layered surfaces */
  --del-navy-soft:   #182853;   /* card surface */
  --del-purple:      #6B21A8;   /* primary accent — pink-purple, deeper */
  --del-purple-light:#a855f7;   /* light purple — the pop variant */
  --del-purple-deep: #5A31AF;   /* behavioral / legacy */
  --del-sapphire:    #0047AB;   /* secondary accent — braids, links */
  --del-sapphire-light: #1173FB;/* link hover / accent pop */
  --del-green:       #0C700C;   /* correction / ANH */
  --del-green-light: #3FA53F;   /* lighter green pop */
  --del-gold:        #E5C43D;   /* highlight / featured / Pipeline */
  --del-gold-bright: #F2E300;   /* yellow accent — accuracy */
  --del-electric:    #00BFFF;   /* admin / electric blue */
  --del-white:       #f0f0f0;   /* off-white */
  --del-muted:       #6b7280;   /* muted grey */

  /* ---- Card-suit semantic colors (gallery taxonomy) ------ */
  --suit-navy:      #0D1B3E;    /* Protection (DHS) */
  --suit-red:       #910A0A;    /* Verification (TFL-S) */
  --suit-orange:    #CC5500;    /* Assignment (CIA / TPS) */
  --suit-green:     #0C700C;    /* Correction (ANH) */
  --suit-gold:      #E5C43D;    /* Meta (Gate / Pipeline) */
  --suit-electric:  #00BFFF;    /* Admin */
  --suit-indigo:    #4B0082;    /* Prompt / Response */
  --suit-purple:    #5A31AF;    /* Behavioral Principles */
  --suit-yellow:    #F2E300;    /* Accuracy Constraints */

  /* ---- Foreground / text -------------------------------- */
  --fg1:        #FAF0E6;        /* primary text — warm soft white */
  --fg1-cool:   #e8e8e8;        /* cool soft white alt */
  --fg2:        #b4a8d8;        /* muted lavender — secondary text */
  --fg3:        #8a83a8;        /* tertiary / meta */
  --fg-link:    #00BFFF;        /* links default — electric */
  --fg-link-hov:#6A60C5;        /* link hover — purple */

  /* ---- Surfaces & borders ------------------------------- */
  --bg:         var(--del-navy);
  --bg-deep:    var(--del-navy-deep);
  --surface-1:  #142147;        /* raised */
  --surface-2:  #1c2c58;        /* card */
  --surface-3:  #243668;        /* hovered card */
  --border-1:   #2b3a6b;        /* hairline */
  --border-2:   #4a3f8a;        /* purple-tinted border */
  --border-gold:#7d6a23;        /* dim gold edge */

  /* ---- Code / blocks ------------------------------------ */
  --code-bg:    #0d1b3e;
  --code-fg:    #e5c43d;        /* gold-on-navy for terminal vibes */
  --code-border:#2b3a6b;

  /* ---- Status / log states ------------------------------ */
  --status-pass:   #4caf50;     /* verified, validated, pass */
  --status-warn:   #E5C43D;     /* warning */
  --status-crit:   #ff5470;     /* critical */
  --status-info:   #00BFFF;     /* info */

  /* ---- Shadows & elevation ------------------------------ */
  --shadow-card:  0 4px 14px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-hover: 0 10px 30px rgba(0,0,0,.55), 0 0 0 1px var(--del-purple) inset;
  --shadow-gold:  0 0 0 1px var(--del-gold) inset, 0 0 24px rgba(229,196,61,.25);
  --shadow-glow-purple: 0 0 24px rgba(106,96,197,.45);
  --shadow-glow-electric: 0 0 24px rgba(0,191,255,.45);

  /* ---- Border radii ------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-card: 14px;     /* trading-card outer radius */
  --radius-pill: 999px;

  /* ---- Spacing scale (8pt) ------------------------------ */
  --sp-0:  0;
  --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;

  /* ---- Type families ------------------------------------ */
  --font-display: "Montalban", "Georgia", serif;
                                /* Card titles on Mythic / Artifact (Bold Italic) */
  --font-wordmark: "Audiowide", "Orbitron", "Eurostile Extended", sans-serif;
                                /* The wordmark "delucinate" — lowercase, gold */
  --font-poster:  "Audiowide", "Orbitron", "Eurostile Extended", sans-serif;
                                /* Poster/UI banners, badge labels */
  --font-body:    "Source Sans 3", "Calibri", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", system-ui, sans-serif;
                                /* Body — Calibri is the closest Canva fallback when
                                   Source Sans 3 doesn't load the full weight deck */
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", "Menlo",
                  "Consolas", monospace;

  /* ---- Type scale --------------------------------------- */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-64: 64px;
  --fs-80: 80px;
  --fs-96: 96px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.5;
  --lh-loose: 1.7;

  --tracking-display: -0.01em;
  --tracking-poster: 0.04em;   /* Audiowide breathes a touch */
  --tracking-body:   0;
  --tracking-caps:   0.08em;

  /* ---- Motion ------------------------------------------- */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 380ms;
}

/* ---- Semantic element defaults ------------------------------ */
/* These are opt-in: scope under .del-typography if you don't
   want them to leak into a host app. */

.del-typography,
.del-typography * { box-sizing: border-box; }

.del-typography {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

.del-typography .wordmark,
.del-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 400;
  font-style: normal;
  color: var(--del-gold);
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: lowercase;
}

.del-typography h1,
.del-h1 {
  font-family: var(--font-poster);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 80px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-poster);
  color: var(--fg1);
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
}

.del-typography h2,
.del-h2 {
  font-family: var(--font-poster);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-poster);
  color: var(--fg1);
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
}

.del-typography h3,
.del-h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0 0 var(--sp-2);
}

.del-typography h4,
.del-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg1);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin: 0 0 var(--sp-2);
}

.del-typography p,
.del-p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg1);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.del-typography .lede,
.del-lede {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: var(--lh-body);
  color: var(--fg2);
  font-weight: 400;
}

.del-typography .meta,
.del-meta {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  line-height: var(--lh-body);
  color: var(--fg3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.del-typography .ipa,
.del-ipa {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-16);
  color: var(--del-sapphire);
}

.del-typography .pos,
.del-pos {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-14);
  color: var(--del-sapphire);
}

.del-typography a,
.del-typography .link {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.del-typography a:hover { color: var(--fg-link-hov); }

.del-typography code,
.del-typography pre,
.del-code,
.del-pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-sm);
}
.del-typography code { padding: 2px 6px; }
.del-typography pre,
.del-pre {
  padding: var(--sp-4) var(--sp-5);
  overflow: auto;
}

.del-typography blockquote,
.del-blockquote {
  border-left: 3px solid var(--del-gold);
  padding-left: var(--sp-4);
  color: var(--fg2);
  font-style: italic;
  margin: var(--sp-4) 0;
}

/* Card title in Audiowide w/ chrome-gold gradient fill — the
   signature trading-card title look. */
.del-card-title {
  font-family: var(--font-poster);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-poster);
  background: linear-gradient(180deg, #fff5c2 0%, #e5c43d 45%, #8a6a14 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.5));
}