/* CodeRed Design Tokens
   Single source of truth for brand tokens across all CodeRed properties.
   Served at https://codered.lol/assets/tokens.css

   Referenced by:
     - infra/landing/index.html  (via @import in <style>)
     - apps/codered globals.css  (via <link> in layout.tsx)
*/

:root {
  /* ── Brand palette ─────────────────────────────────────── */
  --cr-red:            #ff0e04;
  --cr-purple:         #450050;
  --cr-purple-soft:    #a04bc0;
  --cr-purple-vibrant: #7B1FA2;
  --cr-blue:           #0099e5;
  --cr-link-red:       #ff4444;
  --cr-link-hover:     #ff7a7a;
  --cr-muted-red:      #d63b35;
  --cr-orange:         #ff4300;
  --cr-grey:           #d1d1d1;

  /* ── Backgrounds ───────────────────────────────────────── */
  --cr-bg-a:      #1f050a;
  --cr-bg-b:      #2f080c;
  --cr-bg-c:      #400c0e;
  --cr-bg-darker: #0a0202;

  /* ── Surfaces ──────────────────────────────────────────── */
  --cr-card-bg:     rgba(22, 22, 26, 0.9);
  --cr-card-border: rgba(150, 60, 180, 0.3);
  --cr-text:        #d8d8d8;
  --cr-muted:       #a0a0a0;
  --cr-heading:     #f0f0f0;

  /* ── Header / topbar ───────────────────────────────────── */
  --cr-header-height: 56px;
  --cr-header-bg:     rgba(20, 5, 9, 0.72);
  --cr-header-blur:   10px;
  --cr-header-border: var(--cr-card-border);

  /* ── Footer ────────────────────────────────────────────── */
  --cr-footer-border: var(--cr-card-border);

  /* ── Semantic (theme-aware) ────────────────────────────────
     Use these for new/converted UI; they flip with data-theme. */
  --cr-page:        var(--cr-bg-a);           /* solid page background */
  --cr-surface:     var(--cr-card-bg);        /* cards, panels, inputs */
  --cr-surface-2:   rgba(255, 255, 255, 0.05);/* hover rows, subtle fills */
  --cr-line:        var(--cr-card-border);    /* borders, dividers */
  --cr-accent:      var(--cr-link-red);       /* links, primary buttons */
  --cr-accent-ink:  #ffffff;                  /* text on --cr-accent */
  --cr-accent-soft: rgba(255, 14, 4, 0.12);   /* tinted chips, focus fills */
  --cr-ok:          #7dff9b;
  --cr-danger:      #ff5b51;
  --cr-shadow:      0 10px 30px rgba(0, 0, 0, 0.45);
  --cr-glow-a:      rgba(255, 14, 4, 0.18);   /* page radial gradients */
  --cr-glow-b:      rgba(69, 0, 80, 0.5);
  --cr-grid:        rgba(255, 255, 255, 0.03);/* grid texture lines */
  --cr-term-bg:     rgba(0, 0, 0, 0.45);      /* terminal/code blocks — stay dark in both */
  --cr-term-text:   #d8d8d8;
}

/* ── Light theme ───────────────────────────────────────────
   Opt-in: <html data-theme="light">, set by cr-theme.js (the toggle) or by a
   page that defaults light (Lares). Only surfaces + text change; brand stays. */
:root[data-theme="light"] {
  color-scheme: light;
  --cr-bg-a:      #fbf9fc;
  --cr-bg-b:      #f4f0f6;
  --cr-bg-c:      #ece5f0;
  --cr-bg-darker: #ffffff;

  --cr-card-bg:     #ffffff;
  --cr-card-border: rgba(69, 0, 80, 0.14);
  --cr-text:        #3a3140;
  --cr-muted:       #6b6275;
  --cr-heading:     #1d1424;
  --cr-link-red:    #d10a02;
  --cr-link-hover:  #8f0701;
  --cr-muted-red:   #b8231d;  /* #d63b35 is too faint on white */
  --cr-blue:        #0072b5;

  --cr-header-bg:     rgba(255, 255, 255, 0.82);

  --cr-page:        #fbf9fc;
  --cr-surface:     #ffffff;
  --cr-surface-2:   rgba(69, 0, 80, 0.04);
  --cr-line:        rgba(69, 0, 80, 0.12);
  --cr-accent:      #c70a02;
  --cr-accent-soft: rgba(199, 10, 2, 0.08);
  --cr-ok:          #1f8a4c;
  --cr-danger:      #c92a20;
  --cr-shadow:      0 1px 2px rgba(29, 20, 36, 0.06), 0 8px 24px rgba(29, 20, 36, 0.08);
  --cr-glow-a:      rgba(255, 14, 4, 0.07);
  --cr-glow-b:      rgba(160, 75, 192, 0.12);
  --cr-grid:        rgba(69, 0, 80, 0.045);
  --cr-term-bg:     #1a1020;
  --cr-term-text:   #e8e2ee;
}
:root[data-theme="dark"] { color-scheme: dark; }

/* The CodeRed mark has white in it, so the shared footer stays a dark band on
   light pages rather than losing half the logo. */
:root[data-theme="light"] cr-footer {
  display: block;
  background: #140a16;
  --cr-text: #d8d8d8;
  --cr-muted: #a0a0a0;
  --cr-card-border: rgba(150, 60, 180, 0.3);
  --cr-line: rgba(150, 60, 180, 0.3);
  --cr-link-red: #ff4444;
  --cr-accent: #ff4444;
}

/* Before cr-layout.js upgrades <cr-topbar>, hold its height and lay slotted
   children out in a row, so app headers don't jump on load. */
cr-topbar:not(:defined) {
  display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem;
  min-height: var(--cr-header-height); position: sticky; top: 0; z-index: 100;
  background: var(--cr-header-bg); border-bottom: 1px solid var(--cr-header-border);
}