/* ===========================================
   ARMAKUNI DESIGN TOKENS
   Dark-only. No light theme.
   Status: confirmed (master design system)
   Last synced: 2026-03-30
   =========================================== */


/* =========================================
   LAYER 1: PRIMITIVES
   Raw values. Never used directly in components.
   ========================================= */
:root {
  /* --- Colors: Brand --- */
  --color-blue: #2d62ff;
  --color-cyan: #009be5;
  --color-bright: #7bc6ff;
  --color-pink: #dd23bb;
  --color-black: #05050c;
  --color-white: #ebf1fb;

  /* --- Colors: AWS --- */
  --color-aws-orange: #FF9900;
  --color-aws-orange-soft: rgba(255, 153, 0, 0.12);

  /* --- Colors: Logo palette --- */
  --color-logo-blue: #009FE3;
  --color-logo-green: #95C11F;
  --color-logo-orange: #F07B20;
  --color-logo-coral: #C2004B;
  --color-logo-pink: #E6007E;

  /* --- Colors: Alpha white ---
     2026-05-01 (ui-ux-overhaul-2026):
       --white-45 lifted 0.45 -> 0.55 for slight muted-text brightness.
       --white-72 is true 0.72 secondary text.
       Both are "slightly brighter" per user scope, no hue change. */
  --white-03: rgba(255, 255, 255, 0.03);
  --white-04: rgba(255, 255, 255, 0.04);
  --white-025: rgba(255, 255, 255, 0.025);
  --white-07: rgba(255, 255, 255, 0.07);
  --white-14: rgba(255, 255, 255, 0.14);
  --white-45: rgba(235, 241, 251, 0.55);
  --white-72: rgba(235, 241, 251, 0.72);

  /* --- Colors: Glow --- */
  --color-glow-blue: rgba(45, 98, 255, 0.15);

  /* --- Spacing (4px base) --- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  --space-40: 10rem;    /* 160px */

  /* --- Semantic section spacing ---
     Use --space-section on every top-level <section>. Use --space-section-tight
     for sections whose internal content adds visual padding (carousel rails,
     marquees, sticky-scroll containers) so adjacent sections don't feel
     disproportionately apart. Together they enforce one rhythm site-wide. */
  --space-section: 96px;
  --space-section-tight: 64px;

  /* --- Border Radius --- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* --- Z-Index --- */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-modal: 1200;
  --z-tooltip: 1400;
}


/* =========================================
   LAYER 2: SEMANTIC
   Meaningful names mapped to primitives.
   ========================================= */
:root {
  /* --- Backgrounds --- */
  --bg: var(--color-black);                /* #05050c */
  --surface: var(--white-03);              /* rgba(255,255,255,0.03) */
  --surface-2: var(--white-04);            /* rgba(255,255,255,0.04) */
  --surface-card: var(--white-025);        /* rgba(255,255,255,0.025) */

  /* --- Text --- */
  --text: var(--color-white);              /* #ebf1fb */
  --text-secondary: var(--white-72);       /* rgba(235,241,251,0.72) */
  --text-muted: var(--white-45);           /* rgba(235,241,251,0.45) */

  /* --- Borders ---
     2026-05-08: dropped --border from 0.07 to 0.04 site-wide so the
     nav glass-pill, footer divider, and card edges feel slimmer on
     larger screens. Hover + interactive borders stay at 0.14 so they
     remain visible on focus / hover states. */
  --border: var(--white-04);               /* rgba(255,255,255,0.04) */
  --border-hover: var(--white-14);         /* rgba(255,255,255,0.14) */

  /* --- Interactive / Accent --- */
  --accent: var(--color-blue);             /* #2d62ff */
  --accent-cyan: var(--color-cyan);        /* #009be5 */
  --accent-bright: var(--color-bright);    /* #7bc6ff */
  --accent-pink: var(--color-pink);        /* #dd23bb */
  --aws-orange: var(--color-aws-orange);   /* #FF9900 */
  --aws-orange-soft: var(--color-aws-orange-soft);
  --stat-color: var(--aws-orange);

  /* --- Collateral diagnostic palette (added 2026-05-08) ---
     Replaces rogue #ff6b6b/#4ade80 from MVP deck.
     Used by .card-compare, .cs-deep-dive Problem/Solution/Impact triad. */
  --accent-warn: #ff8a4c;                  /* Problem (desaturated, brand-aligned) */
  --accent-good: var(--logo-green);        /* Impact (#95C11F) */

  /* --- Collateral spacing — A4 zones */
  --space-a4-margin: 14mm;
  --space-a4-bleed: 3mm;

  /* --- Collateral type scale (print-friendly) */
  --type-cover-h1: clamp(48px, 5vw, 64px);
  --type-deck-h2: clamp(28px, 3.5vw, 38px);
  --type-twopager-h1: 32pt;
  --type-onepager-h1: 28pt;

  /* --- Scroll-mode timing */
  --scroll-debounce-ms: 280;

  /* --- Logo --- */
  --logo-blue: var(--color-logo-blue);
  --logo-green: var(--color-logo-green);
  --logo-orange: var(--color-logo-orange);
  --logo-coral: var(--color-logo-coral);
  --logo-pink: var(--color-logo-pink);

  /* --- Glow --- */
  --glow-blue: var(--color-glow-blue);

  /* --- Section spacing --- */
  --section-padding-sm: var(--space-16);
  --section-padding-md: var(--space-20);
  --section-padding-lg: var(--space-24);
  --section-padding-xl: var(--space-40);
}


/* =========================================
   LAYER 3: COMPONENT
   Tokens scoped to specific UI elements.
   ========================================= */
:root {
  /* --- Button --- */
  --button-bg: var(--accent);
  --button-fg: var(--color-white);
  --button-radius: var(--radius-pill);
  --button-padding-x: var(--space-8);
  --button-padding-y: var(--space-3);
  --button-font-size: 12px;
  --button-font-weight: 600;
  --button-letter-spacing: 0.08em;
  --button-text-transform: uppercase;

  /* --- Card --- */
  --card-bg: var(--surface-card);
  --card-border: var(--border);
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-8);

  /* --- Nav --- */
  --nav-height: 68px;
  --nav-bg: rgba(5, 5, 12, 0.9);
  --nav-blur: 20px;
  --nav-border: var(--border);

  /* --- Section / Layout --- */
  --content-max-width: 1120px;
  --reading-max-width: 680px;
}


/* =========================================
   LAYER 4: MOTION
   Easing curves and durations.
   ========================================= */
:root {
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-glow: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-menu: cubic-bezier(0.16, 1, 0.3, 1);

  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-reveal: 600ms;
}


/* =========================================
   LAYER 5: TYPOGRAPHY
   Font families, weights, sizes per role.
   ========================================= */
:root {
  /* --- Font families --- */
  --font-heading: 'Saira Semi Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  /* --- Font weights --- */
  --weight-heading: 200;
  --weight-body: 350;
  --weight-mono: 400;

  /* --- Line heights --- */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* --- Type roles --- */

  /* Hero heading: 56px / Saira Semi Condensed 200 / -0.0156em letter-spacing
     2026-05-01: cap was 64, lowered to 56 per ui-ux-overhaul-2026.
     Letter-spacing -0.0156em ≈ -1px at 64px (specifyapp display tightening).
     2026-05-09: introduced --hero-heading-max-width to force ~4-word lines
     in the headline. Pair with `text-wrap: balance` for even line lengths. */
  --hero-heading-size: 56px;
  --hero-heading-font: var(--font-heading);
  --hero-heading-weight: var(--weight-heading);
  --hero-heading-leading: var(--leading-tight);
  --hero-heading-letter-spacing: -0.0156em;
  --hero-heading-max-width: 720px;

  /* Section heading: 40px / Saira Semi Condensed 200
     2026-05-01: cap is enforced. Inline `style="font-size:..."` overrides on
     h2 are banned (see anti-patterns AP-23). */
  --section-heading-size: 40px;
  --section-heading-font: var(--font-heading);
  --section-heading-weight: var(--weight-heading);
  --section-heading-leading: var(--leading-tight);

  /* Card heading: 24px / Saira Semi Condensed 200 */
  --card-heading-size: 24px;
  --card-heading-font: var(--font-heading);
  --card-heading-weight: var(--weight-heading);
  --card-heading-leading: var(--leading-snug);

  /* Body: 16px / Inter 350 */
  --body-size: 16px;
  --body-font: var(--font-body);
  --body-weight: var(--weight-body);
  --body-leading: var(--leading-normal);

  /* Label: 11px uppercase / Inter 350 */
  --label-size: 11px;
  --label-font: var(--font-body);
  --label-weight: var(--weight-body);
  --label-letter-spacing: 0.08em;
  --label-text-transform: uppercase;

  /* Button text: 12px uppercase */
  --button-text-size: 12px;
  --button-text-font: var(--font-body);
  --button-text-weight: 600;
  --button-text-letter-spacing: 0.08em;
  --button-text-transform: uppercase;

  /* Mono: Roboto Mono 400 */
  --mono-font: var(--font-mono);
  --mono-weight: var(--weight-mono);
}