/* ============================================================================
 * AIM ÆGIS — Design Tokens
 * ============================================================================
 * Single source of truth for colors, typography, spacing, and motion.
 * Imported once in base.html before any component CSS.
 * ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Cormorant+Garamond:ital,wght@1,600;1,700&display=swap');

:root {
  /* ===== Color Palette ===== */
  
  /* Background — deep black sovereign */
  --bg-deep:        #08090F;
  --bg-base:        #0B0D14;
  --bg-card:        #131825;
  --bg-elevated:    #1A2030;
  --bg-hover:       #1F2640;
  --topnav-bg:      rgba(8, 9, 15, 0.85);
  
  /* Borders */
  --border:         #1F2438;
  --border-bright:  #2F3650;
  --border-accent:  rgba(201, 169, 97, 0.3);
  
  /* Foreground */
  --fg-primary:     #ECEEF2;
  --fg-secondary:   #A8AEBE;
  --fg-tertiary:    #6B7286;
  --fg-disabled:    #4A5066;
  
  /* Brand accent — amber-gold (the ÆGIS gold) */
  --accent:         #C9A961;
  --accent-soft:    #E8D9B0;
  --accent-deep:    #9C7F3F;
  --accent-glow:    rgba(201, 169, 97, 0.15);
  
  /* Functional colors */
  --green:          #34D399;
  --green-soft:     rgba(52, 211, 153, 0.12);
  --amber:          #FBBF24;
  --amber-soft:     rgba(251, 191, 36, 0.12);
  --red:            #F87171;
  --red-soft:       rgba(248, 113, 113, 0.12);
  --blue:           #5B7FD9;
  --blue-soft:      rgba(91, 127, 217, 0.12);
  
  /* Status colors (workflow states) */
  --status-draft:    var(--fg-tertiary);
  --status-review:   var(--amber);
  --status-approved: var(--green);
  --status-rejected: var(--red);
  --status-signed:   var(--accent);
  
  /* ===== Typography ===== */
  
  --font-display:   'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:      'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  --font-accent:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  
  /* Type scale */
  --fs-xs:          0.75rem;   /* 12px */
  --fs-sm:          0.875rem;  /* 14px */
  --fs-base:        1rem;      /* 16px */
  --fs-md:          1.125rem;  /* 18px */
  --fs-lg:          1.25rem;   /* 20px */
  --fs-xl:          1.5rem;    /* 24px */
  --fs-2xl:         2rem;      /* 32px */
  --fs-3xl:         2.5rem;    /* 40px */
  --fs-4xl:         3.5rem;    /* 56px */
  --fs-5xl:         5rem;      /* 80px */
  
  /* Line heights */
  --lh-tight:       1.15;
  --lh-snug:        1.3;
  --lh-normal:      1.5;
  --lh-relaxed:     1.65;
  
  /* Letter spacing */
  --ls-tight:       -0.025em;
  --ls-normal:      0;
  --ls-wide:        0.05em;
  --ls-widest:      0.15em;
  
  /* ===== Spacing ===== */
  --sp-1:           0.25rem;   /* 4px */
  --sp-2:           0.5rem;    /* 8px */
  --sp-3:           0.75rem;   /* 12px */
  --sp-4:           1rem;      /* 16px */
  --sp-5:           1.25rem;   /* 20px */
  --sp-6:           1.5rem;    /* 24px */
  --sp-8:           2rem;      /* 32px */
  --sp-10:          2.5rem;    /* 40px */
  --sp-12:          3rem;      /* 48px */
  --sp-16:          4rem;      /* 64px */
  --sp-20:          5rem;      /* 80px */
  --sp-24:          6rem;      /* 96px */
  
  /* ===== Radii ===== */
  --r-sm:           4px;
  --r-md:           8px;
  --r-lg:           12px;
  --r-xl:           16px;
  --r-full:         9999px;
  
  /* ===== Shadows ===== */
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:      0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-gold:    0 0 32px rgba(201, 169, 97, 0.15);
  
  /* ===== Motion ===== */
  --transition-fast:    120ms ease-out;
  --transition-base:    200ms ease-out;
  --transition-slow:    300ms ease-out;
  --easing-emphasis:    cubic-bezier(0.16, 1, 0.3, 1);
  
  /* ===== Z-indices ===== */
  --z-base:         0;
  --z-elevated:     10;
  --z-sticky:       100;
  --z-modal:        1000;
  --z-toast:        2000;
  
  /* ===== Container widths ===== */
  --container-narrow:  720px;
  --container-base:    1080px;
  --container-wide:    1280px;
  --container-full:    1440px;
}