/* ==========================================================================
   A&D GC Group LLC — Design Tokens
   Single source of truth. Components reference ONLY these variables.
   Rule: every margin, padding, gap and size is a --space-* token (8pt grid).
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     1. COLOR — primitives
     ------------------------------------------------------------------ */

  /* Deep Navy — brand, dark surfaces */
  --navy-950: #060E1C;
  --navy-900: #0A1730;
  --navy-800: #102343;
  --navy-700: #183259;
  --navy-600: #224475;
  --navy-500: #2E5A96;

  /* Steel Gray — secondary text, borders on dark, UI chrome */
  --steel-700: #39434F;
  --steel-600: #4C5765;
  --steel-500: #65717F;
  --steel-400: #8691A0;
  --steel-300: #AAB3BF;
  --steel-200: #CBD2DA;

  /* Concrete — warm neutrals for light surfaces */
  --concrete-400: #B9B4AB;
  --concrete-300: #D3CFC7;
  --concrete-200: #E3E0DA;
  --concrete-100: #EEECE8;
  --concrete-50:  #F7F6F3;

  /* Clean White */
  --white: #FFFFFF;

  /* Signal Amber — single accent, used sparingly (CTAs, markers) */
  --signal-400: #EDB458;
  --signal-500: #E0A03A;
  --signal-600: #C4861F;
  --signal-700: #8A5A10;  /* amber TEXT on light backgrounds (5.9:1 on white) */

  /* Error — form validation only */
  --error-700: #B42318;
  --error-50:  #FEF3F2;

  /* ------------------------------------------------------------------
     2. COLOR — semantic (components use these, not primitives)
     ------------------------------------------------------------------ */
  --color-bg:              var(--white);
  --color-surface:         var(--concrete-50);
  --color-surface-alt:     var(--concrete-100);
  --color-text:            var(--navy-900);
  --color-text-muted:      var(--steel-600);
  --color-border:          var(--concrete-200);
  --color-border-strong:   var(--concrete-300);

  --color-inverse-bg:      var(--navy-900);
  --color-inverse-bg-deep: var(--navy-950);
  --color-inverse-text:    var(--white);
  --color-inverse-muted:   var(--steel-300);
  --color-inverse-border:  rgb(255 255 255 / 0.12);

  --color-primary:         var(--navy-800);
  --color-primary-hover:   var(--navy-700);
  --color-accent:          var(--signal-500);
  --color-accent-hover:    var(--signal-400);
  --color-on-accent:       var(--navy-950);
  --color-focus:           var(--signal-400);
  --color-error:           var(--error-700);
  --color-error-bg:        var(--error-50);

  /* ------------------------------------------------------------------
     3. SPACING — strict 8-point grid (--space-half is the only 4px step,
        reserved for icon/label nudges)
     ------------------------------------------------------------------ */
  --space-0:    0;
  --space-half: 0.25rem; /*   4px */
  --space-1:    0.5rem;  /*   8px */
  --space-2:    1rem;    /*  16px */
  --space-3:    1.5rem;  /*  24px */
  --space-4:    2rem;    /*  32px */
  --space-5:    2.5rem;  /*  40px */
  --space-6:    3rem;    /*  48px */
  --space-7:    3.5rem;  /*  56px */
  --space-8:    4rem;    /*  64px */
  --space-10:   5rem;    /*  80px */
  --space-12:   6rem;    /*  96px */
  --space-16:   8rem;    /* 128px */
  --space-20:   10rem;   /* 160px */

  /* ------------------------------------------------------------------
     4. TYPOGRAPHY
     Display: Archivo (expanded width axis) — industrial, engineered.
     Body:    Inter — high legibility at small sizes.
     Sizes snap to the 8pt grid from 24px up; line-heights sit on a
     4px baseline.
     ------------------------------------------------------------------ */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --display-width: 112;   /* Archivo wdth axis: 100 = normal, 125 = expanded */

  --text-2xs: 0.75rem;    --leading-2xs: 1rem;     /* 12 / 16 — overlines, tags   */
  --text-xs:  0.875rem;   --leading-xs:  1.25rem;  /* 14 / 20 — captions, meta    */
  --text-sm:  1rem;       --leading-sm:  1.5rem;   /* 16 / 24 — body              */
  --text-md:  1.125rem;   --leading-md:  1.75rem;  /* 18 / 28 — lead body         */
  --text-lg:  1.25rem;    --leading-lg:  1.75rem;  /* 20 / 28 — card titles       */
  --text-xl:  1.5rem;     --leading-xl:  2rem;     /* 24 / 32 — H4                */
  --text-2xl: 2rem;       --leading-2xl: 2.5rem;   /* 32 / 40 — H3                */
  --text-3xl: 2.5rem;     --leading-3xl: 3rem;     /* 40 / 48 — H2                */
  --text-4xl: 3rem;       --leading-4xl: 3.5rem;   /* 48 / 56 — H1 (inner pages)  */
  --text-5xl: 4rem;       --leading-5xl: 4.25rem;  /* 64 / 68 — display           */
  --text-6xl: 5rem;       --leading-6xl: 5.25rem;  /* 80 / 84 — hero display      */

  /* Fluid display: 40px on phones → 80px on wide screens */
  --text-display: clamp(2.5rem, 1.25rem + 4.2vw, 5rem);
  /* Fluid section title: 32px on phones → 48px on wide screens */
  --text-h2:      clamp(2rem, 1.5rem + 1.6vw, 3rem);

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.16em;

  /* ------------------------------------------------------------------
     5. SHAPE
     ------------------------------------------------------------------ */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 999px;

  --border-thin:  1px;
  --border-thick: 2px;

  /* ------------------------------------------------------------------
     6. ELEVATION — navy-tinted, layered shadows
     ------------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgb(6 14 28 / 0.06);
  --shadow-sm: 0 1px 2px rgb(6 14 28 / 0.06), 0 2px 8px rgb(6 14 28 / 0.06);
  --shadow-md: 0 2px 4px rgb(6 14 28 / 0.06), 0 8px 24px rgb(6 14 28 / 0.10);
  --shadow-lg: 0 4px 8px rgb(6 14 28 / 0.08), 0 16px 40px rgb(6 14 28 / 0.16);
  --shadow-xl: 0 8px 16px rgb(6 14 28 / 0.10), 0 32px 64px rgb(6 14 28 / 0.24);
  --shadow-accent: 0 8px 24px rgb(224 160 58 / 0.32);

  /* ------------------------------------------------------------------
     7. MOTION
     ------------------------------------------------------------------ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    480ms;
  --dur-reveal:  800ms;

  /* ------------------------------------------------------------------
     8. LAYOUT
     Breakpoints (for reference — media queries can't read variables):
       sm 640px · md 768px · lg 1024px · xl 1280px
     ------------------------------------------------------------------ */
  --container-max: 80rem;           /* 1280px */
  --gutter:        var(--space-3);  /* 24px, 48px at lg */
  --utility-h:     var(--space-5);  /* 40px */
  --nav-h:         var(--space-10); /* 80px */
  --nav-h-compact: var(--space-8);  /* 64px */
  --bento-row:     12.5rem;         /* 200px — portfolio grid row (25 × 8pt) */
  --bento-row-sm:  15rem;           /* 240px — single-column phones (30 × 8pt) */

  --z-base:    1;
  --z-raised:  10;
  --z-header:  100;
  --z-overlay: 200;
}

@media (min-width: 1024px) {
  :root { --gutter: var(--space-6); }
}