/* ═══════════════════════════════════════════════════════════════
   Capifiq — Design Tokens
   File: /css/design-tokens-capifiq.css
   Load order: AFTER tailwind.min.css, BEFORE capifiq.css

   This file defines ONLY CSS custom properties.
   No component styles live here. No utilities.
   To reskin the site, modify values here and nothing else.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ──────────────────────────────────────────────────────────
     CANVAS — three-tier dark system
     ────────────────────────────────────────────────────────── */
  --cf-canvas:          #0A0B0D;  /* Page background */
  --cf-surface:         #0F1013;  /* Cards, terminal panels */
  --cf-surface-raised:  #14161A;  /* Hover state on surface */

  /* ──────────────────────────────────────────────────────────
     BORDERS
     ────────────────────────────────────────────────────────── */
  --cf-border-subtle:   #1F2023;  /* Default card dividers */
  --cf-border-default:  #2A2C30;  /* Input borders, secondary buttons */
  --cf-border-strong:   #3A3D42;  /* Focused / active */

  /* ──────────────────────────────────────────────────────────
     TEXT — six-tier hierarchy
     ────────────────────────────────────────────────────────── */
  --cf-text-primary:    #F4F5F7;
  --cf-text-secondary:  #E8E9EB;
  --cf-text-tertiary:   #A8ABB1;
  --cf-text-muted:      #8A8D93;
  --cf-text-disabled:   #6B6E74;
  --cf-text-faint:      #4A4D52;

  /* ──────────────────────────────────────────────────────────
     BRAND — Signal Amber
     ────────────────────────────────────────────────────────── */
  --cf-amber-50:   #FEF7E7;
  --cf-amber-100:  #FDEBCC;
  --cf-amber-400:  #FFC04A;
  --cf-amber-500:  #F5A623;
  --cf-amber-600:  #D97706;
  --cf-amber-900:  #3D2A05;

  --cf-amber-tint-08:   rgba(245, 166, 35, 0.08);
  --cf-amber-tint-12:   rgba(245, 166, 35, 0.12);
  --cf-amber-tint-30:   rgba(245, 166, 35, 0.30);
  --cf-amber-border-25: rgba(245, 166, 35, 0.25);
  --cf-amber-border-40: rgba(245, 166, 35, 0.40);

  /* ──────────────────────────────────────────────────────────
     ALERT — RESERVED for detection/critical/live states
     ────────────────────────────────────────────────────────── */
  --cf-alert-500:       #E24B4A;
  --cf-alert-tint-06:   rgba(226, 75, 74, 0.06);
  --cf-alert-tint-12:   rgba(226, 75, 74, 0.12);
  --cf-alert-border-25: rgba(226, 75, 74, 0.25);

  /* ──────────────────────────────────────────────────────────
     SEMANTIC — used sparingly
     ────────────────────────────────────────────────────────── */
  --cf-success:  #2EA664;
  --cf-info:     #4A8FE2;

  /* ──────────────────────────────────────────────────────────
     TYPOGRAPHY
     ────────────────────────────────────────────────────────── */
  --cf-font-sans:  'Inter', -apple-system, system-ui, sans-serif;
  --cf-font-mono:  'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --cf-text-display-xl: 64px;
  --cf-text-display-lg: 44px;
  --cf-text-display-md: 32px;
  --cf-text-heading-lg: 24px;
  --cf-text-heading-md: 18px;
  --cf-text-body-lg:    16px;
  --cf-text-body:       15px;
  --cf-text-body-sm:    14px;
  --cf-text-caption:    13px;
  --cf-text-caption-sm: 12px;
  --cf-text-micro:      11px;
  --cf-text-micro-sm:   10px;

  /* ──────────────────────────────────────────────────────────
     RADII
     ────────────────────────────────────────────────────────── */
  --cf-radius-sm:   4px;
  --cf-radius-md:   6px;
  --cf-radius-lg:   8px;
  --cf-radius-xl:   10px;
  --cf-radius-2xl:  12px;
  --cf-radius-full: 9999px;

  /* ──────────────────────────────────────────────────────────
     SHADOWS (on dark, used very sparingly)
     ────────────────────────────────────────────────────────── */
  --cf-shadow-focus:       0 0 0 2px var(--cf-amber-tint-30);
  --cf-shadow-focus-alert: 0 0 0 2px var(--cf-alert-tint-12);

  /* ──────────────────────────────────────────────────────────
     MOTION
     ────────────────────────────────────────────────────────── */
  --cf-duration-fast: 150ms;
  --cf-duration-base: 250ms;
  --cf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ──────────────────────────────────────────────────────────
     LAYOUT
     ────────────────────────────────────────────────────────── */
  --cf-container-max:    1200px;
  --cf-container-narrow: 880px;
  --cf-nav-height:       56px;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cf-duration-fast: 0ms;
    --cf-duration-base: 0ms;
  }
}