/* ============================================================
   BrokerageLoop — design tokens
   Colours sourced from brand-source/brand/README.md. Do not
   introduce new hex values outside this file.
   ============================================================ */

:root{
  /* ---- Brand colour (fixed by brand pack) ---- */
  --brand-cerulean: #0369A1;
  --brand-cerulean-700: #075985;
  --brand-cerulean-900: #0c4a6e;
  --brand-cerulean-50: #f0f9ff;
  --brand-cerulean-100: #e0f2fe;
  --brand-bronze: #A16207;
  --brand-bronze-700: #854d0e;
  --brand-gold-lifted: #E9B949;
  --brand-ink: #020617;

  /* ---- Neutral scale ---- */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  /* Between 500 and 600. slate-500 measures 4.44:1 on the bone band, just
     under AA; this clears it at 4.92:1 while staying visibly lighter than
     --color-fg-muted, so the three-step text hierarchy survives. */
  --slate-550: #5f6d7f;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /* ---- Semantic tokens ---- */
  --color-bg: #ffffff;
  --color-bg-subtle: var(--slate-50);
  --color-bg-muted: var(--slate-100);
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: var(--slate-200);
  --color-border-strong: var(--slate-300);

  --color-fg: var(--brand-ink);
  --color-fg-muted: var(--slate-600);
  --color-fg-subtle: var(--slate-550);
  --color-fg-on-primary: #ffffff;
  --color-fg-on-dark: #e2e8f0;
  --color-fg-on-dark-muted: #94a3b8;

  --color-primary: var(--brand-cerulean);
  --color-primary-hover: var(--brand-cerulean-700);
  --color-primary-active: var(--brand-cerulean-900);
  --color-primary-contrast: #ffffff;

  --color-accent: var(--brand-bronze);
  --color-accent-contrast: #ffffff;

  --color-success: #15803d;
  --color-success-bg: #f0fdf4;
  --color-danger: #b91c1c;
  --color-danger-bg: #fef2f2;

  --color-ring: var(--brand-cerulean);

  --color-dark-bg: var(--brand-ink);
  --color-dark-bg-raised: #0a1324;
  --color-dark-border: #1e2a44;
  --color-dark-surface: #0d1a30;

  /* Off-white band colour. Sections alternate white / bone / ink so the page
     reads as bands rather than one long white scroll. */
  --color-bone: #f6f7f9;
  --color-bone-border: #e8ebef;

  /* ---- Typography ---- */
  --font-heading: 'Schibsted Grotesk', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Floor for the monospace micro-labels (eyebrows, indices, footer column
     headings). They were set between 0.68 and 0.72rem, which renders at
     10.9–11.5px — below the 12px readable minimum. */
  --fs-mono-label: 0.75rem;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  /* Fluid from small-phone to wide-desktop so headlines stay proportionate
     to the viewport instead of stepping at one breakpoint. */
  --fs-3xl: clamp(1.85rem, 3vw, 2.75rem);
  --fs-4xl: clamp(2.25rem, 4vw, 3.25rem);
  --fs-5xl: clamp(2.6rem, 5.2vw, 4.5rem);

  --lh-display: 1.02;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* Display tracking. Schibsted Grotesk carries tighter tracking well at
     large sizes; these keep headlines set like a masthead rather than
     default-spaced UI text. */
  --tracking-display: -0.035em;
  --tracking-heading: -0.025em;
  --tracking-mono: 0.1em;

  /* ---- Spacing scale (4/8pt rhythm) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-wide: 1440px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(2, 6, 23, 0.12);
  --shadow-lg: 0 24px 48px -16px rgba(2, 6, 23, 0.18);
  --shadow-glow-primary: 0 0 0 1px rgba(3, 105, 161, 0.12), 0 16px 40px -12px rgba(3, 105, 161, 0.35);
  --shadow-glow-gold: 0 0 60px -12px rgba(233, 185, 73, 0.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* Ambient motion. Background effects run on a different clock from UI
     feedback: UI responds in 150–400ms, atmosphere breathes over 10–40s.
     Keeping both sets of durations here stops the two rhythms drifting apart
     as effects get added. */
  --dur-sweep: 13s;      /* scan line crossing a dark band          */
  --dur-packet: 9s;      /* data packet travelling a grid rule      */
  --dur-orbit: 19s;      /* node circling the wireframe emblem      */
  --dur-flow: 1.6s;      /* dashes moving along a pipeline connector */
  --stagger-step: 45ms;  /* per-item delay in a staggered reveal    */

  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}