/* ─────────────────────────────────────────────────────────────
   Magnna Brands — Design Tokens (CSS Custom Properties)
   Source: Brand Bible v1.3.0
   
   These tokens are the single source of truth for all visual
   values in the Magnna design system. Drop this file into your
   project and reference variables — never hardcode HEX, sizes,
   or durations elsewhere.
   ─────────────────────────────────────────────────────────────
*/

:root {
  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     COLOR — Brand
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --color-brand-primary: #1F4E6F;   /* Magnna Blue */
  --color-brand-ink:     #163A53;   /* Ink (body text) */
  --color-brand-deep:    #0E2A3D;   /* Deep Ink (dark surfaces) */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     COLOR — Neutral (gray system)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --color-neutral-paper:  #F0F2F5;  /* PRIMARY BACKGROUND — not white */
  --color-neutral-light:  #F7F8FA;
  --color-neutral-bright: #FCFCFD;  /* Cards, panels */
  --color-neutral-cool:   #E7EAEF;  /* Sunken surfaces, callouts */
  --color-neutral-white:  #FFFFFF;  /* Rare — print, accessibility-critical */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     COLOR — Rules & dividers (alpha on ink)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --color-rule:        rgba(22, 58, 83, 0.10);
  --color-rule-medium: rgba(22, 58, 83, 0.20);
  --color-rule-strong: rgba(22, 58, 83, 0.35);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     COLOR — Text
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --color-text-default:        var(--color-brand-ink);
  --color-text-muted:          rgba(22, 58, 83, 0.55);
  --color-text-soft:           rgba(22, 58, 83, 0.72);
  --color-text-on-dark:        var(--color-neutral-paper);
  --color-text-on-dark-muted:  rgba(240, 242, 245, 0.65);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     COLOR — Semantic
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --color-success: #1F6F3F;
  --color-warning: #B5841F;
  --color-error:   #C13B3B;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TYPOGRAPHY — Families (load from Google Fonts)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --font-display: 'Space Grotesk', sans-serif;
  --font-italic:  'Instrument Serif', serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TYPOGRAPHY — Weights
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TYPOGRAPHY — Sizes
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --size-display:  56px;
  --size-h1:       36px;
  --size-h2:       28px;
  --size-h3:       20px;
  --size-quote:    26px;
  --size-body:     13px;
  --size-caption:  11px;
  --size-eyebrow:  10px;
  --size-micro:     9px;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TYPOGRAPHY — Line-height
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --lh-tight:   1.0;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     TYPOGRAPHY — Letter-spacing
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --tracking-tight:   -0.035em;
  --tracking-snug:    -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.18em;
  --tracking-wider:   0.22em;
  --tracking-widest:  0.32em;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     SPACING — All values are multiples of 4
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     RADIUS — Magnna does NOT use rounded corners
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --radius-0:  0;        /* Default everywhere */
  --radius-sm: 2px;      /* Form inputs ONLY */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     BORDER WIDTHS
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --border-1: 1px;
  --border-2: 2px;       /* Card top-rule (animated) */
  --border-3: 3px;       /* Manager-block accent */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     MOTION
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --duration-fast:    150ms;
  --duration-default: 200ms;
  --duration-medium:  300ms;
  --duration-slow:    500ms;
  --easing-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --easing-linear:    linear;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     ELEVATION
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --shadow-card-hover: 0 8px 24px rgba(22, 58, 83, 0.08);
  --shadow-toast:      0 12px 40px rgba(14, 42, 61, 0.25);

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Z-INDEX scale
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --z-base:    1;
  --z-sidebar: 45;
  --z-overlay: 45;
  --z-nav:     50;
  --z-toggle:  60;
  --z-modal:   90;
  --z-toast:   9999;

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     LAYOUT
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  --max-width:    1340px;
  --page-padding: 48px;
}

/* ─────────────────────────────────────────────────────────────
   Breakpoints — for media queries, document only
   (Use them as in: @media (max-width: 1100px) { ... } — note that
   custom properties can't be used inside media query parentheses.)
   ─────────────────────────────────────────────────────────────
   
   BREAKPOINT-MOBILE:  480px
   BREAKPOINT-TABLET:  768px
   BREAKPOINT-DESKTOP: 1100px  ← Primary collapse point
   BREAKPOINT-WIDE:    1340px
*/

/* ─────────────────────────────────────────────────────────────
   Reduced motion — respect user preference
   ─────────────────────────────────────────────────────────────
*/
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:    0ms;
    --duration-default: 0ms;
    --duration-medium:  0ms;
    --duration-slow:    0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}