/*
  FluxCreateAI — Design Tokens
  Source: DESIGN_TOKENS_SPEC.md | VISUAL_STYLE_GUIDE.md
  Status: LOCKED — Kyle approved 2026-05-27 (APPROVAL-0010)
  DO NOT alter token values without Kyle approval.
*/

:root {
  /* ─── BRAND COLORS ─────────────────────────────────────── */
  --color-brand-primary:           #0E1523;
  --color-brand-accent:            #00C7CF;
  --color-brand-accent-hover:      #00A8B0;
  --color-brand-accent-secondary:  #C8911F;

  /* ─── BACKGROUNDS ──────────────────────────────────────── */
  --color-bg-primary:              #080C14;
  --color-bg-secondary:            #0E1523;
  --color-bg-tertiary:             #172035;

  /* ─── TEXT ─────────────────────────────────────────────── */
  --color-text-primary:            #F0F4F8;
  --color-text-secondary:          #8A9AB5;
  --color-text-disabled:           #4A5568;

  /* ─── BORDERS ──────────────────────────────────────────── */
  --color-border-default:          #1C2840;
  --color-border-strong:           #2D3F60;

  /* ─── STATUS ───────────────────────────────────────────── */
  --color-status-success:          #22C55E;
  --color-status-warning:          #F59E0B;
  --color-status-error:            #EF4444;
  --color-status-inactive:         #4A5568;

  /* ─── TYPOGRAPHY ────────────────────────────────────────── */
  --font-family-heading:  'Inter', system-ui, -apple-system, sans-serif;
  --font-family-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-family-mono:     'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --font-size-xl:         3rem;      /* 48px — hero display */
  --font-size-lg:         2rem;      /* 32px — H1 / major headings */
  --font-size-md:         1.5rem;    /* 24px — H2 / card titles */
  --font-size-sm:         1rem;      /* 16px — default body */
  --font-size-xs:         0.75rem;   /* 12px — captions / labels */

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  --line-height-tight:     1.2;
  --line-height-snug:      1.35;
  --line-height-normal:    1.5;
  --line-height-relaxed:   1.65;

  /* ─── SPACING (4px grid) ────────────────────────────────── */
  --spacing-xs:    4px;
  --spacing-sm:    8px;
  --spacing-md:    16px;
  --spacing-lg:    24px;
  --spacing-xl:    40px;
  --spacing-xxl:   64px;
  --spacing-xxxl:  96px;

  /* ─── RADIUS ────────────────────────────────────────────── */
  --radius-none:  0;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-pill:  9999px;

  /* ─── SHADOWS ───────────────────────────────────────────── */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.30);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.40);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.50);
  --shadow-accent: 0 0 16px rgba(0,199,207,0.15);

  /* ─── LAYOUT ────────────────────────────────────────────── */
  --max-width:        1280px;
  --content-width:    1100px;
  --gutter-mobile:    var(--spacing-md);
  --gutter-tablet:    var(--spacing-xl);
  --gutter-desktop:   var(--spacing-xxl);
}