/* ============================================================
   Atlas Machina — Design Tokens  (Atlas Classic)
   Single source of truth — mirrors the app's :root block.
   Import this file first in any stylesheet.
   ============================================================ */

:root {

  /* ── Color System ─────────────────────────────────────────

     Primary: brand gold
     On-primary text is dark (not white) — intentional for
     contrast on the gold background.                          */

  --color-primary:        #FEBD16;
  --color-primary-dark:   #E5A915;
  --color-primary-light:  #FFD54F;
  --color-on-primary:     #212529;   /* text/icon on primary bg */

  /* Secondary: neutral slate */
  --color-secondary:      #6C757D;
  --color-secondary-dark: #545B62;
  --color-secondary-light:#ADB5BD;

  /* Text */
  --color-text-primary:   #212529;
  --color-text-secondary: #6C757D;
  --color-text-muted:     #868E96;

  /* Surfaces */
  --color-surface:        #FFFFFF;
  --color-surface-alt:    #F8F9FA;   /* secondary surface, subtle off-white */
  --color-surface-dark:   #212529;   /* dark reference — inverse text color */

  /* Borders */
  --color-border:         #DEE2E6;
  --color-border-dark:    #ADB5BD;

  /* Links */
  --color-link:           #FEBD16;
  --color-link-hover:     #E5A915;

  /* Semantic */
  --color-success:        #28A745;
  --color-error:          #DC3545;
  --color-warning:        #FFC107;
  --color-info:           #17A2B8;


  /* ── Typography ───────────────────────────────────────────

     Verdana is a system font — no external load required.
     Fluid clamp() scale: min at ~360px viewport, max at ~1280px. */

  --font-primary:         Verdana, Geneva, sans-serif;

  --font-size-xs:         clamp(0.65rem,  1.5vw, 0.75rem);   /*  ~10–12px */
  --font-size-sm:         clamp(0.78rem,  2vw,   0.875rem);  /*  ~12–14px */
  --font-size-base:       clamp(0.9rem,   2.5vw, 1rem);      /*  ~14–16px */
  --font-size-lg:         clamp(1rem,     3vw,   1.125rem);  /*  ~16–18px */
  --font-size-xl:         clamp(1.1rem,   3.5vw, 1.25rem);   /*  ~18–20px */
  --font-size-2xl:        clamp(1.3rem,   4vw,   1.5rem);    /*  ~21–24px */
  --font-size-3xl:        clamp(1.7rem,   5vw,   2.25rem);   /*  ~27–36px */
  --font-size-4xl:        clamp(2.2rem,   6.5vw, 3.5rem);    /*  ~35–56px */

  --font-weight-normal:   400;
  --font-weight-bold:     700;


  /* ── Spacing ──────────────────────────────────────────────
     4-point base grid.                                        */

  --spacing-xs:           0.25rem;   /*  4px */
  --spacing-sm:           0.5rem;    /*  8px */
  --spacing-md:           1rem;      /* 16px */
  --spacing-lg:           1.5rem;    /* 24px */
  --spacing-xl:           2rem;      /* 32px */
  --spacing-2xl:          3rem;      /* 48px */
  --spacing-3xl:          4rem;      /* 64px */


  /* ── Border Radius ────────────────────────────────────────  */

  --border-radius-sm:     4px;
  --border-radius-md:     8px;
  --border-radius-lg:     12px;
  --border-radius-xl:     20px;
  --border-radius-full:   9999px;


  /* ── Shadows ──────────────────────────────────────────────  */

  --shadow-sm:            0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:            0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:            0 8px 24px rgba(0,0,0,0.12);
  --shadow-primary:       0 4px 14px rgba(254,189,22,0.35);   /* gold glow for CTAs */


  /* ── Transitions ──────────────────────────────────────────  */

  --transition-fast:      150ms ease;
  --transition-base:      250ms ease;
  --transition-slow:      400ms ease;


  /* ── Chrome Heights ───────────────────────────────────────  */

  --navbar-height:        70px;
  --footer-height:        50px;
}