/* ==========================================================================
   Adrem design tokens
   Every colour, size and rhythm used on the site is defined here.
   Change a token, and the whole site follows. See docs/03-design-system.md.
   ========================================================================== */

:root {
  /* ---- Brand colours (as on the live alphatalk.com homepage) ------------ */
  /* Bright blue: buttons, icon tiles, section titles, accents */
  --blue-50:  #ecf7fd;
  --blue-100: #d2ecfa;
  --blue-200: #a6d9f5;
  --blue-300: #6cc0ef;    /* accents on dark backgrounds */
  --blue-400: #3eaae7;
  --blue-500: #1b98e0;    /* brand primary: live site buttons and icons */
  --blue-600: #1580c0;
  --blue-700: #12699d;
  --blue-800: #0f527a;
  --blue-900: #0b3b58;

  /* Deep blue → navy: hero and call-to-action bands, links, footer */
  --navy-50:  #e9f1fb;
  --navy-100: #cfe0f5;
  --navy-200: #a3c3ea;
  --navy-300: #6b9bd8;
  --navy-400: #2f6cb8;
  --navy-500: #023e8a;      /* brand secondary: live hero / CTA band deep blue */
  --navy-600: #023574;
  --navy-700: #0b2d60;
  --navy-800: #12264b;      /* live footer navy, dark panels */
  --navy-900: #0b1a36;

  /* Orange: the main call to action ("Get A Free Quote") */
  --orange-50:  #fff6e5;
  --orange-500: #ffa200;    /* live site action orange */
  --orange-600: #e08e00;

  /* ---- Neutrals ------------------------------------------------------ */
  --n-0:   #ffffff;
  --n-50:  #f2f0ef;   /* live site warm-grey section background */
  --n-100: #f1f1f1;
  --n-200: #e4e4e4;   /* reference border colour */
  --n-300: #bdbdbd;   /* reference input/border grey */
  --n-400: #9e9e9e;
  --n-500: #7a7a7a;   /* reference body-text grey: 4.3:1, use only ≥ 18px or decorative */
  --n-600: #616161;
  --n-700: #444444;
  --n-800: #262937;   /* live site header / top strip charcoal */
  --n-900: #0e121d;   /* reference theme title colour */

  /* ---- Semantic ------------------------------------------------------ */
  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-600);
  --color-primary-soft:   var(--blue-50);
  --color-accent:         var(--orange-500);   /* main CTA buttons */
  --color-accent-hover:   var(--orange-600);
  --color-on-accent:      var(--n-0);          /* white, as on the live site */
  --color-secondary:      var(--navy-500);
  --color-secondary-hover: var(--navy-600);
  --color-secondary-soft: var(--navy-50);

  --color-bg:        var(--n-0);
  --color-bg-tint:   var(--n-50);
  --color-bg-dark:   var(--navy-800);
  --color-surface:   var(--n-0);
  --color-border:    var(--n-200);
  --color-border-strong: var(--n-300);

  --color-heading:   var(--n-800);   /* live site heading charcoal */
  --color-text:      #54595f;        /* live site body text */
  --color-text-muted: var(--n-600);
  --color-text-faint: var(--n-500);
  --color-on-dark:   var(--n-0);
  --color-on-dark-muted: rgba(255, 255, 255, 0.72);
  --color-link:      var(--navy-500);
  --color-link-hover: var(--blue-500);

  --color-success: #1f8a4c;
  --color-warning: #c97a00;
  --color-error:   #c8102e;
  --color-focus:   var(--navy-400);

  /* ---- Typography ---------------------------------------------------- */
  --font-sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: var(--font-sans);   /* client 22 Sep 2026: one font family across the site (Public Sans) */

  --text-xs:   0.75rem;                                   /* 12 */
  --text-sm:   0.875rem;                                  /* 14 */
  --text-base: 1rem;                                      /* 16 */
  --text-md:   1.0625rem;                                 /* 17 – long-form body */
  --text-lg:   1.125rem;                                  /* 18 */
  --text-xl:   clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem); /* 20–22 */
  --text-2xl:  clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);   /* 24–30 */
  --text-3xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);    /* 28–40 */
  --text-4xl:  clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem);  /* 34–52 */
  --text-5xl:  clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);    /* 36–56 */

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.6;

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

  --tracking-tight: -0.005em;   /* Public Sans is already compact */
  --tracking-wide:  0.08em;

  /* ---- Spacing (4px base) -------------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --section-space: clamp(3.5rem, 6vw, 6rem);          /* 56–96 */
  --section-space-sm: clamp(2.5rem, 4vw, 4rem);       /* 40–64 */

  /* ---- Layout -------------------------------------------------------- */
  --container: 75rem;          /* 1200 */
  --container-narrow: 50rem;   /* 800 */
  --gutter: clamp(1rem, 3vw, 1.5rem);
  --header-height: 4.5rem;

  /* ---- Shape & elevation --------------------------------------------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1.25rem;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(10, 26, 48, 0.06), 0 1px 3px rgba(10, 26, 48, 0.08);
  --shadow-md: 0 4px 12px rgba(10, 26, 48, 0.08), 0 2px 4px rgba(10, 26, 48, 0.05);
  --shadow-lg: 0 16px 40px rgba(10, 26, 48, 0.14), 0 4px 10px rgba(10, 26, 48, 0.06);

  /* ---- Motion -------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;

  /* ---- Z-index scale ------------------------------------------------- */
  --z-header: 100;
  --z-drawer: 200;
  --z-float: 150;
  --z-skip: 300;
}

/* Breakpoints (for reference: media queries can't read custom properties)
   sm 480px · md 768px · lg 1024px · xl 1280px */