/* ==========================================================================
   assets/css/variables.css — Armzai Group design tokens
   ========================================================================== */

:root {
  /* ---- Brand colour ---- */
  --navy: #0B1F33;
  --deep-blue: #123B5D;
  --gold: #C99735;
  --metallic-gold: #D8B15A;
  --off-white: #F7F7F3;
  --light-grey: #E9EDF0;
  --charcoal: #17212B;
  --white: #FFFFFF;
  --whatsapp: #1F9D63;
  --error: #B42318;
  --success: #1B7F4F;

  /* ---- Derived / functional ---- */
  --ink: var(--charcoal);
  --ink-muted: #4A5866;
  --ink-faint: #6E7C8A;
  --line: #D8DFE6;
  --line-soft: #E6EBF0;
  --line-dark: rgba(255, 255, 255, .14);
  --surface: var(--white);
  --surface-alt: var(--off-white);
  --surface-grey: var(--light-grey);
  --surface-dark: var(--navy);
  --on-dark: #E4EAF1;
  --on-dark-muted: #9FB0C2;

  /* ---- Type ---- */
  --font-display: 'Manrope', 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;

  --fs-100: .75rem;
  --fs-200: .8125rem;
  --fs-300: .875rem;
  --fs-400: 1rem;
  --fs-500: clamp(1.0625rem, .99rem + .32vw, 1.1875rem);
  --fs-600: clamp(1.1875rem, 1.08rem + .48vw, 1.4375rem);
  --fs-700: clamp(1.375rem, 1.2rem + .78vw, 1.875rem);
  --fs-800: clamp(1.625rem, 1.32rem + 1.35vw, 2.5rem);
  --fs-900: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --fs-hero: clamp(2.125rem, 1.6rem + 2.4vw, 3.625rem);

  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-base: 1.65;
  --tracking-wide: .14em;
  --tracking-wider: .2em;

  /* ---- Spacing ---- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --section-y: clamp(3.25rem, 2rem + 5vw, 6rem);

  /* ---- Layout ---- */
  --container: 1280px;
  --container-narrow: 900px;
  --gutter: clamp(1rem, .55rem + 2vw, 2.5rem);
  --header-h: 76px;
  --utility-h: 40px;

  /* ---- Shape & depth ---- */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(11, 31, 51, .06), 0 1px 3px rgba(11, 31, 51, .05);
  --shadow-md: 0 4px 14px rgba(11, 31, 51, .08);
  --shadow-lg: 0 18px 48px rgba(11, 31, 51, .14);
  --shadow-header: 0 1px 0 var(--line), 0 6px 20px rgba(11, 31, 51, .06);

  /* ---- Motion ---- */
  --t-fast: 140ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 240ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 480ms cubic-bezier(.22, .61, .36, 1);

  /* ---- Z-index ---- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-mobile-nav: 400;
  --z-lightbox: 500;
  --z-skip: 600;

  /* ---- Signature: blueprint rule ---- */
  --blueprint: linear-gradient(rgba(18, 59, 93, .055) 1px, transparent 1px) 0 0 / 100% 32px,
               linear-gradient(90deg, rgba(18, 59, 93, .055) 1px, transparent 1px) 0 0 / 32px 100%;
  --blueprint-dark: linear-gradient(rgba(216, 177, 90, .07) 1px, transparent 1px) 0 0 / 100% 32px,
                    linear-gradient(90deg, rgba(216, 177, 90, .07) 1px, transparent 1px) 0 0 / 32px 100%;
}