/* ==========================================================================
   ASICO design tokens (v3, portal system)
   Layers: 1 primitives  ·  2 semantic tokens  ·  3 component tokens (site.css)
   Breakpoints (media queries cannot read variables):
     sm 560 · md 820 · lg 1060 · xl 1280
   ========================================================================== */
:root {
  /* ---- 1. PRIMITIVES ---------------------------------------------------- */
  /* Ink: brand navy. 700 is the ASICO navy. */
  --ink-50:  #f1f5fa;
  --ink-100: #dfe8f3;
  --ink-200: #bccfe6;
  --ink-300: #8fadd0;
  --ink-400: #5c82b2;
  --ink-500: #3a6296;
  --ink-600: #1f4a7c;
  --ink-700: #10325b;
  --ink-800: #0b2447;
  --ink-900: #061630;

  /* Gold: brand accent, 400 is the logo gold. Use sparingly. */
  --gold-50:  #fff9ec;
  --gold-100: #fcecc8;
  --gold-200: #f9dc9b;
  --gold-300: #f7cb7c;
  --gold-400: #f4ba64;
  --gold-500: #e3a043;
  --gold-600: #c2822a;
  --gold-700: #956019;
  --gold-800: #664110;

  /* Copper: secondary warm, carried over from the legacy site */
  --copper-100: #f6e3d9;
  --copper-300: #e9bda8;
  --copper-500: #dd9f84;
  --copper-700: #a8664a;

  /* Paper: warm neutrals */
  --paper-0:   #ffffff;
  --paper-50:  #faf8f4;
  --paper-100: #f5f1e9;
  --paper-200: #ece6d9;
  --paper-300: #ddd5c3;
  --paper-400: #bdb39d;

  /* Feedback */
  --ok-100: #e1f3e8; --ok-600: #1b7d4f;
  --warn-100: #fdf0cf; --warn-600: #946200;
  --bad-100: #fbe4e1; --bad-600: #b53a2f;
  --wa: #1e9e55; --wa-deep: #167a42;

  /* Spacing, 4px base */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem;
  --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem;

  /* Radius: architectural, mostly square */
  --r-0: 0; --r-1: 6px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-pill: 999px;
  --r-arch: 999px 999px 0 0;

  /* Typography */
  --font-display: 'Soliden', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Neue Haas Grotesk Text', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* modular scale (1.25), fluid at the top end */
  --fs-micro: .6875rem;   /* 11, mono labels */
  --fs-small: .8125rem;   /* 13 */
  --fs-body: 1rem;        /* 16 */
  --fs-lead: 1.1875rem;   /* 19 */
  --fs-h4: 1.375rem;      /* 22 */
  --fs-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --fs-h2: clamp(1.5rem, 2.6vw, 2rem);
  --fs-h1: clamp(2rem, 4.2vw, 3rem);
  --fs-display: clamp(2.5rem, 5.4vw, 4rem);
  --lh-tight: 1.1; --lh-snug: 1.2; --lh-body: 1.6;
  --track-mono: .09em;

  /* Elevation: barely used; hairlines do most of the work */
  --shadow-1: 0 1px 2px rgba(16,50,91,.08);
  --shadow-2: 0 2px 8px rgba(16,50,91,.08), 0 1px 2px rgba(16,50,91,.06);
  --shadow-3: 0 12px 32px -8px rgba(16,50,91,.22), 0 2px 6px rgba(16,50,91,.08);

  /* Motion */
  --dur-1: 140ms; --dur-2: 260ms; --dur-3: 520ms;
  --ease: cubic-bezier(.22, .8, .2, 1);

  /* Layout */
  --wrap: 1280px; --wrap-narrow: 760px; --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 72px;

  /* Z-index ladder */
  --z-raised: 2; --z-sticky: 20; --z-header: 50; --z-mega: 60; --z-drawer: 100; --z-modal: 120; --z-lightbox: 140; --z-toast: 160;

  /* ---- 2. SEMANTIC TOKENS ---------------------------------------------- */
  --bg: #f4f6f9;
  --bg-raised: var(--paper-0);
  --bg-sunk: #eceff4;
  --bg-inverse: var(--ink-700);
  --bg-inverse-deep: var(--ink-800);

  --text: var(--ink-700);
  --text-soft: #536177;
  --text-faint: #8190a4;
  --text-inverse: #f7f4ec;
  --text-inverse-soft: rgba(247,244,236,.72);
  --text-link: var(--gold-700);

  --line: #e1e6ee;
  --line-strong: #c6cfdc;
  --line-inverse: rgba(247,244,236,.18);

  --accent: var(--gold-400);
  --accent-hover: var(--gold-500);
  --accent-ink: var(--gold-700);

  --focus: 0 0 0 2px #fff, 0 0 0 4px var(--ink-700);
  --scrim: rgba(6,22,48,.6);
  --ia: #ffffff;           /* icon accent layer */

  /* Islamic-geometry lattice, used as a faint texture on ink sections */
  --lattice: none;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; } }