/* ============================================================
   Dissen Studio — Design tokens
   colors_and_type.css

   Single source of truth for the brand. Import once at the
   root of your document:

     <link rel="stylesheet" href="/path/to/colors_and_type.css" />

   Or @import from your own CSS:

     @import url('colors_and_type.css');

   All variables live on :root so they cascade everywhere.
   Some scoped overrides (e.g. .paper-context for print) are
   provided at the bottom.
   ============================================================ */

/* ── 1. Webfonts ─────────────────────────────────────────────
   Syne + Manrope are bundled (woff2). Playfair Display italic
   is loaded from Google Fonts — flag if you need it offline.
   ──────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/Syne.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/Manrope.woff2') format('woff2');
}

/* Editorial italic — Space Mono Italic.
   Technical monospace italic that reads like an engineering callout or
   instrument-cluster annotation — not a magazine pull-quote. Used
   ITALIC-ONLY, never roman. Two alternates pre-loaded:
     • JetBrains Mono Italic — more code-feel
     • DM Mono Italic — softer, geometric mono
   See README §2. */


/* ── 2. Raw tokens ───────────────────────────────────────── */

:root {
  /* ── Brand greyscale (dark surfaces) ─────────────────── */
  --ds-black:           #000000;
  --ds-bg-1:            #0a0a0a;  /* page background — warm near-black */
  --ds-bg-2:            #111111;  /* section / surface */
  --ds-bg-3:            #141414;  /* raised surface */
  --ds-bg-4:            #1c1c1c;  /* hover surface */

  /* Cooler near-black variants used by internal apps (disspro / pipeline) */
  --ds-ink-blueblack:   #080b10;
  --ds-ink-blueblack-2: #0e1218;
  --ds-ink-blueblack-3: #141920;

  --ds-white:           #ffffff;

  /* Foreground on dark — alpha-on-white */
  --ds-fg-1:            rgba(255, 255, 255, 1);     /* primary */
  --ds-fg-2:            rgba(255, 255, 255, 0.7);   /* secondary */
  --ds-fg-3:            rgba(255, 255, 255, 0.4);   /* tertiary / eyebrows */
  --ds-fg-mute:         rgba(255, 255, 255, 0.08);  /* borders / dividers */
  --ds-fg-faint:        rgba(255, 255, 255, 0.05);  /* hairline borders */

  /* Glass surfaces */
  --ds-glass:           rgba(20, 20, 20, 0.75);
  --ds-glass-strong:    rgba(8, 11, 16, 0.88);
  --ds-glass-border:    rgba(255, 255, 255, 0.05);
  --ds-glass-border-2:  rgba(255, 255, 255, 0.12);

  /* ── Warm grayscale (print / stationery) ─────────────── */
  --ds-paper:           #f6f4ef;  /* warm off-white */
  --ds-ink:             #4a4a48;  /* warm gray body */
  --ds-ink-soft:        #8b8b88;  /* warm gray caption */
  --ds-rule:            #d8d4cc;  /* warm hairline */

  /* ── The brand RED ───────────────────────────────────── */
  --ds-red:             #ff0000;
  --ds-red-hover:       #cc0000;
  --ds-red-press:       #b30000;
  --ds-red-glow:        rgba(255, 0, 0, 0.25);

  /* ── Fluo / intense accents — pipeline taxonomy ──────── */
  --ds-fluo-lime:       #ccff00;  /* STARS / success */
  --ds-fluo-blue:       #1a52ff;  /* DAYUN */
  --ds-fluo-blue-soft:  #5b8aff;  /* body-text-safe blue on dark */
  --ds-fluo-cyan:       #00e5ff;  /* ID — active */
  --ds-fluo-cyan-2:     #00f2ff;
  --ds-fluo-pink:       #f72585;  /* CMF — review */
  --ds-fluo-coral:      #ff4d6d;  /* director / alert */
  --ds-fluo-orange:     #f79c42;  /* mid-warning */

  /* Glows (use as box-shadow or text-shadow) */
  --ds-glow-lime:       rgba(204, 255, 0, 0.15);
  --ds-glow-blue:       rgba(26, 82, 255, 0.15);
  --ds-glow-cyan:       rgba(0, 229, 255, 0.20);
  --ds-glow-pink:       rgba(247, 37, 133, 0.15);

  /* ── Type stack ──────────────────────────────────────── */
  --ds-font-heading:   'Syne', 'Inter', sans-serif;
  --ds-font-body:      'Manrope', 'Inter', system-ui, sans-serif;
  --ds-font-editorial: 'Syne', sans-serif;
  --ds-font-mono:      'JetBrains Mono', 'Courier New', Courier, monospace;

  /* Weights */
  --ds-w-light:    300;
  --ds-w-regular:  400;
  --ds-w-medium:   500;
  --ds-w-semi:     600;
  --ds-w-bold:     700;
  --ds-w-heavy:    800;

  /* Tracking — tighter at display sizes, looser for eyebrows */
  --ds-track-display:  -0.04em;
  --ds-track-headline: -0.02em;
  --ds-track-body:     0;
  --ds-track-eyebrow:  0.15em;
  --ds-track-button:   0.05em;
  --ds-track-mono:     0.08em;

  /* Line heights */
  --ds-lh-tight:  1.05;
  --ds-lh-display:1.0;
  --ds-lh-head:   1.15;
  --ds-lh-body:   1.6;
  --ds-lh-prose:  1.75;

  /* ── Spacing scale (4px base) ────────────────────────── */
  --ds-space-1:  0.25rem;   /* 4 */
  --ds-space-2:  0.5rem;    /* 8 */
  --ds-space-3:  0.75rem;   /* 12 */
  --ds-space-4:  1rem;      /* 16 */
  --ds-space-5:  1.5rem;    /* 24 */
  --ds-space-6:  2rem;      /* 32 */
  --ds-space-7:  2.5rem;    /* 40 */
  --ds-space-8:  3rem;      /* 48 */
  --ds-space-10: 4rem;      /* 64 */
  --ds-space-12: 6rem;      /* 96 */
  --ds-space-16: 8rem;      /* 128 — default section padding */

  /* ── Radii ───────────────────────────────────────────── */
  --ds-radius-sharp:  4px;   /* automotive crispness — primary buttons */
  --ds-radius-sm:     8px;   /* small chips, inputs, internal buttons */
  --ds-radius:        12px;  /* card default */
  --ds-radius-lg:     16px;  /* glass panel */
  --ds-radius-xl:     20px;  /* modal, hero card */
  --ds-radius-pill:   999px;

  /* ── Shadow / elevation ──────────────────────────────── */
  --ds-shadow-1: 0 4px 12px rgba(0,0,0,0.35);
  --ds-shadow-2: 0 8px 40px rgba(0,0,0,0.50);
  --ds-shadow-3: 0 20px 60px rgba(0,0,0,0.50);
  --ds-shadow-glass-inset: inset 0 0 20px rgba(255,255,255,0.02);

  /* Used on terminal / classified blocks — colored glow + inset */
  --ds-shadow-classified: 0 0 40px rgba(204, 255, 0, 0.20),
                          inset 0 0 20px rgba(204, 255, 0, 0.05);

  /* ── Motion ──────────────────────────────────────────── */
  --ds-ease-fast:   0.20s cubic-bezier(0.4, 0, 0.2, 1);
  --ds-ease-smooth: 0.40s cubic-bezier(0.16, 1, 0.3, 1);
  --ds-ease-mid:    0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --ds-ease-spring: 0.6s  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index scale ───────────────────────────────────── */
  --ds-z-nav:    50;
  --ds-z-modal:  100;
  --ds-z-toast:  500;
  --ds-z-grain:  9999;
}


/* ── 3. Semantic tokens ──────────────────────────────────────
   These map raw tokens onto roles. Edit these to retheme
   without touching component code.
   ──────────────────────────────────────────────────────────── */

:root {
  /* Background */
  --bg-page:        var(--ds-bg-1);
  --bg-surface:     var(--ds-bg-2);
  --bg-raised:      var(--ds-bg-3);
  --bg-glass:       var(--ds-glass);

  /* Text */
  --fg-strong:      var(--ds-fg-1);
  --fg-default:     var(--ds-fg-2);
  --fg-muted:       var(--ds-fg-3);

  /* Borders & rules */
  --border:         var(--ds-fg-mute);
  --border-strong:  var(--ds-glass-border-2);
  --border-hair:    var(--ds-fg-faint);

  /* Accents */
  --accent:         var(--ds-red);
  --accent-hover:   var(--ds-red-hover);

  /* Status colors (map to fluo set) */
  --status-active:   var(--ds-fluo-cyan);
  --status-success:  var(--ds-fluo-lime);
  --status-review:   var(--ds-fluo-pink);
  --status-warning:  var(--ds-fluo-orange);
  --status-alert:    var(--ds-fluo-coral);
  --status-info:     var(--ds-fluo-blue-soft);

  /* Type roles */
  --font-h:   var(--ds-font-heading);
  --font-b:   var(--ds-font-body);
  --font-e:   var(--ds-font-editorial);
  --font-m:   var(--ds-font-mono);
}


/* ── 4. Semantic typography presets ─────────────────────────
   Apply via class names — these are the "preset" styles the
   studio uses across surfaces.
   ──────────────────────────────────────────────────────────── */

.ds-display {
  font-family: var(--font-h);
  font-weight: var(--ds-w-bold);
  font-size: clamp(3.5rem, 9vw, 7rem);
  line-height: var(--ds-lh-display);
  letter-spacing: var(--ds-track-display);
  color: var(--fg-strong);
}

.ds-h1 {
  font-family: var(--font-h);
  font-weight: var(--ds-w-semi);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: var(--ds-lh-head);
  letter-spacing: var(--ds-track-headline);
  color: var(--fg-strong);
}

.ds-h2 {
  font-family: var(--font-h);
  font-weight: var(--ds-w-semi);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: var(--ds-lh-head);
  letter-spacing: var(--ds-track-headline);
  color: var(--fg-strong);
}

.ds-h3 {
  font-family: var(--font-h);
  font-weight: var(--ds-w-semi);
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
}

.ds-h4 {
  font-family: var(--font-h);
  font-weight: var(--ds-w-semi);
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--fg-strong);
}

.ds-editorial {
  font-family: var(--font-h);
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--accent);
}
.ds-editorial--outline {
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
  paint-order: stroke fill;
}
.ds-editorial--display {
  font-family: 'Bungee Outline', sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  color: inherit;
}

.ds-body-l {
  font-family: var(--font-b);
  font-size: 1.15rem;
  font-weight: var(--ds-w-regular);
  line-height: var(--ds-lh-prose);
  color: var(--fg-default);
}

.ds-body {
  font-family: var(--font-b);
  font-size: 1rem;
  font-weight: var(--ds-w-regular);
  line-height: var(--ds-lh-body);
  color: var(--fg-default);
}

.ds-body-s {
  font-family: var(--font-b);
  font-size: 0.85rem;
  font-weight: var(--ds-w-regular);
  line-height: var(--ds-lh-body);
  color: var(--fg-default);
}

.ds-eyebrow {
  font-family: var(--font-h);
  font-size: 0.75rem;
  font-weight: var(--ds-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--ds-track-eyebrow);
  color: var(--accent);
  display: inline-block;
}

.ds-eyebrow-muted {
  font-family: var(--font-h);
  font-size: 0.7rem;
  font-weight: var(--ds-w-medium);
  text-transform: uppercase;
  letter-spacing: var(--ds-track-eyebrow);
  color: var(--fg-muted);
}

.ds-caption {
  font-family: var(--font-b);
  font-size: 0.78rem;
  color: var(--fg-muted);
  line-height: 1.45;
}

.ds-button-label {
  font-family: var(--font-h);
  font-size: 0.9rem;
  font-weight: var(--ds-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--ds-track-button);
}

.ds-numeral {
  font-family: var(--font-e);
  font-style: italic;
  font-weight: var(--ds-w-regular);
  color: var(--accent);
  line-height: 1;
}

.ds-mono {
  font-family: var(--font-m);
  letter-spacing: var(--ds-track-mono);
  font-size: 0.85rem;
  color: var(--fg-default);
}


/* ── 5. Print / paper context ────────────────────────────── */
.paper-context,
@media print {
  :root {
    --bg-page:    var(--ds-paper);
    --bg-surface: var(--ds-paper);
    --bg-raised:  #ffffff;
    --fg-strong:  var(--ds-ink);
    --fg-default: var(--ds-ink);
    --fg-muted:   var(--ds-ink-soft);
    --border:     var(--ds-rule);
    --border-strong: #c0bbb1;
  }
}


/* ── 6. The red dot — the studio's signature glyph ──────── */
.ds-dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: baseline;
  flex-shrink: 0;
}

.ds-dot--lg { width: 14px; height: 14px; }
.ds-dot--md { width: 8px;  height: 8px;  }
.ds-dot--sm { width: 5px;  height: 5px;  }
.ds-dot--glow { box-shadow: 0 0 10px var(--accent); }