/*
 * LLMgram shared design-system foundation — /shared/tokens.css
 *
 * ADDITIVE MIGRATION CONTRACT
 * ───────────────────────────
 * 1. This file lives entirely inside @layer (llm.reset, llm.tokens, llm.primitives).
 *    Unlayered page <style> blocks always win at equal specificity, so linking
 *    tokens.css on a page changes nothing visually until markup opts in via ds-*
 *    classes or --ds-* custom properties.
 * 2. Append-only: never rename or delete existing page tokens/classes. Migration
 *    aliases page vars to shared ones, e.g. --bg: var(--ds-bg); --panel: var(--ds-surface);
 * 3. Link as the first stylesheet in <head>, before the page inline <style>.
 * 4. Do not touch nav-loader.js or the isolated --llm-nav-* / #nav namespace.
 *
 * PER-BRAND ACCENT OVERRIDE
 * ─────────────────────────
 * Default accent is editorial cyan (--ds-cyan). Brand radars keep their --accent;
 * opt in with a single alias on :root: --ds-accent: var(--accent);
 * All ds-* primitives that use accent color reference var(--ds-accent).
 */

@layer llm.reset, llm.tokens, llm.primitives;

/* ── Reset (scoped to ds-* opt-in surface) ─────────────────────────────── */

@layer llm.reset {
  :where(
    .ds-container,
    .ds-section,
    .ds-card,
    .ds-stack,
    .ds-cluster,
    .ds-grid
  ),
  :where(
    .ds-container,
    .ds-section,
    .ds-card,
    .ds-stack,
    .ds-cluster,
    .ds-grid
  )::before,
  :where(
    .ds-container,
    .ds-section,
    .ds-card,
    .ds-stack,
    .ds-cluster,
    .ds-grid
  )::after {
    box-sizing: border-box;
  }
}

/* ── Canonical tokens (--ds-*) ───────────────────────────────────────────── */

@layer llm.tokens {
  :root {
    /* Backgrounds */
    --ds-bg: #08090d;
    --ds-bg-2: #10131a;
    --ds-bg-3: #141925;

    /* Surfaces */
    --ds-surface: #141925;
    --ds-surface-2: #1a2130;
    --ds-surface-raised: rgba(20, 25, 37, 0.86);

    /* Lines */
    --ds-line: rgba(255, 255, 255, 0.08);
    --ds-line-strong: rgba(255, 255, 255, 0.18);
    --ds-line-accent: rgba(0, 220, 255, 0.22);

    /* Text */
    --ds-text: #e6edf3;
    --ds-text-bright: #f4fbfd;
    --ds-text-muted: #93a2b1;
    --ds-text-dim: #66758b;

    /* Semantic accents */
    --ds-cyan: #00dcff;
    --ds-gold: #d4af37;
    --ds-green: #00ff88;
    --ds-red: #e63946;
    --ds-pink: #ec4899;
    --ds-orange: #fb923c;
    --ds-purple: #a78bfa;
    --ds-accent: var(--ds-cyan);
    --ds-accent-bright: color-mix(in srgb, var(--ds-accent) 85%, white);
    --ds-accent-subtle: color-mix(in srgb, var(--ds-accent) 14%, transparent);
    --ds-accent-faint: color-mix(in srgb, var(--ds-accent) 7%, transparent);

    /* Typography */
    --ds-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --ds-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ds-serif: 'Cinzel', 'Times New Roman', serif;
    --ds-font-size-xs: 0.68rem;
    --ds-font-size-sm: 0.78rem;
    --ds-font-size-base: 1rem;
    --ds-font-size-lg: clamp(1.1rem, 1.6vw, 1.35rem);
    --ds-font-size-xl: clamp(1.5rem, 4vw, 2.6rem);
    --ds-line-height-tight: 1.15;
    --ds-line-height-base: 1.65;
    --ds-letter-spacing-wide: 0.18em;
    --ds-letter-spacing-mono: 0.12em;

    /* Spacing scale (base step × multiplier) */
    --ds-step: 4px;
    --ds-space-1: calc(var(--ds-step) * 1);   /*  4px */
    --ds-space-2: calc(var(--ds-step) * 2);   /*  8px */
    --ds-space-3: calc(var(--ds-step) * 3);   /* 12px */
    --ds-space-4: calc(var(--ds-step) * 4);   /* 16px */
    --ds-space-5: calc(var(--ds-step) * 5);   /* 20px */
    --ds-space-6: calc(var(--ds-step) * 6);   /* 24px */
    --ds-space-8: calc(var(--ds-step) * 8);   /* 32px */
    --ds-space-10: calc(var(--ds-step) * 10); /* 40px */
    --ds-space-12: calc(var(--ds-step) * 12); /* 48px */
    --ds-space-16: calc(var(--ds-step) * 16); /* 64px */

    /* Radii */
    --ds-radius-sm: 4px;
    --ds-radius: 8px;
    --ds-radius-lg: 12px;
    --ds-radius-xl: 16px;
    --ds-radius-full: 9999px;

    /* Shadows */
    --ds-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
    --ds-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.32);
    --ds-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.35);
    --ds-shadow-accent: 0 0 8px color-mix(in srgb, var(--ds-accent) 60%, transparent);

    /* Layout widths */
    --ds-width-prose: 60ch;
    --ds-width-content: 1140px;
    --ds-width-wide: 1200px;
    --ds-width-hero: 1400px;
    --ds-gutter: var(--ds-space-6);
    --ds-gutter-sm: var(--ds-space-4);

    /* Focus */
    --ds-focus-color: var(--ds-accent);
    --ds-focus-width: 2px;
    --ds-focus-offset: 3px;
    --ds-focus-ring: var(--ds-focus-width) solid var(--ds-focus-color);
  }
}

/* ── Primitives (ds-*) ───────────────────────────────────────────────────── */

@layer llm.primitives {
  /* Layout */
  .ds-container {
    width: 100%;
    max-width: var(--ds-width-content);
    margin-inline: auto;
    padding-inline: var(--ds-gutter);
  }

  .ds-container--wide {
    max-width: var(--ds-width-wide);
  }

  .ds-container--hero {
    max-width: var(--ds-width-hero);
  }

  .ds-section {
    padding-block: var(--ds-space-10);
  }

  .ds-section--tight {
    padding-block: var(--ds-space-6);
  }

  /* Editorial typography */
  .ds-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    font-family: var(--ds-mono);
    font-size: var(--ds-font-size-xs);
    font-weight: 600;
    letter-spacing: var(--ds-letter-spacing-wide);
    text-transform: uppercase;
    color: var(--ds-accent);
    margin-bottom: var(--ds-space-8);
  }

  .ds-eyebrow::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, var(--ds-line-strong), transparent);
  }

  .ds-lede {
    font-family: var(--ds-sans);
    font-size: var(--ds-font-size-lg);
    line-height: var(--ds-line-height-base);
    color: var(--ds-text-bright);
    font-weight: 400;
    max-width: var(--ds-width-prose);
  }

  .ds-lede strong {
    color: var(--ds-accent);
    font-weight: 600;
  }

  .ds-section-label {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    font-family: var(--ds-serif);
    font-size: 0.95rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--ds-gold);
    padding-block: var(--ds-space-10) var(--ds-space-4);
  }

  .ds-section-label::before {
    content: '';
    flex: 0 0 28px;
    height: 1px;
    background: var(--ds-gold);
  }

  .ds-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: color-mix(in srgb, var(--ds-gold) 18%, transparent);
  }

  /* Surfaces */
  .ds-card {
    background: var(--ds-surface-raised);
    border: 1px solid var(--ds-line-accent);
    border-radius: var(--ds-radius);
    padding: var(--ds-space-8);
    box-shadow: var(--ds-shadow-lg);
    color: var(--ds-text);
  }

  .ds-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--ds-mono);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ds-text-muted);
    border: 1px solid var(--ds-line-strong);
    padding: var(--ds-space-1) var(--ds-space-2);
    border-radius: var(--ds-radius-sm);
    line-height: 1.4;
  }

  .ds-badge--accent {
    color: var(--ds-accent);
    border-color: color-mix(in srgb, var(--ds-accent) 35%, transparent);
  }

  /* Buttons */
  .ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    font-family: var(--ds-mono);
    font-size: var(--ds-font-size-sm);
    font-weight: 600;
    letter-spacing: var(--ds-letter-spacing-mono);
    text-transform: uppercase;
    text-decoration: none;
    padding: 11px var(--ds-space-4);
    border: 1px solid var(--ds-line-strong);
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text-muted);
    background: transparent;
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  }

  .ds-btn:hover {
    color: var(--ds-text-bright);
    border-color: var(--ds-line-strong);
    background: color-mix(in srgb, white 4%, transparent);
  }

  .ds-btn-primary {
    background: var(--ds-accent);
    border-color: var(--ds-accent);
    color: #000;
    font-weight: 700;
  }

  .ds-btn-primary:hover {
    background: var(--ds-accent-bright);
    border-color: var(--ds-accent-bright);
    color: #000;
  }

  /* Accessibility utilities */
  .ds-skip-link {
    position: absolute;
    top: var(--ds-space-2);
    left: var(--ds-space-2);
    z-index: 10000;
    padding: var(--ds-space-2) var(--ds-space-4);
    font-family: var(--ds-mono);
    font-size: var(--ds-font-size-sm);
    font-weight: 700;
    letter-spacing: var(--ds-letter-spacing-mono);
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    background: var(--ds-accent);
    border: var(--ds-focus-width) solid var(--ds-accent);
    border-radius: var(--ds-radius-sm);
    transform: translateY(-200%);
    transition: transform 0.2s ease;
  }

  .ds-skip-link:focus {
    transform: translateY(0);
  }

  .ds-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Layout helpers */
  .ds-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ds-stack-gap, var(--ds-space-4));
  }

  .ds-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ds-cluster-gap, var(--ds-space-2));
  }

  .ds-grid {
    display: grid;
    gap: var(--ds-grid-gap, var(--ds-space-4));
    grid-template-columns: var(
      --ds-grid-cols,
      repeat(auto-fit, minmax(min(100%, 16rem), 1fr))
    );
  }

  /* Focus — scoped to ds-* interactive primitives only */
  :where(.ds-btn, .ds-skip-link, .ds-card a):focus-visible {
    outline: var(--ds-focus-ring);
    outline-offset: var(--ds-focus-offset);
    border-radius: var(--ds-radius-sm);
  }

  .ds-btn-primary:focus-visible {
    outline-color: var(--ds-text-bright);
  }

  /* Reduced motion — scoped to ds-* primitives */
  @media (prefers-reduced-motion: reduce) {
    :where(.ds-btn, .ds-skip-link, .ds-card, .ds-badge, .ds-eyebrow) {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }

    .ds-skip-link {
      transition: none;
    }
  }
}
