/* ==========================================================================
   SEC 2026 — Design tokens
   Every colour, size and timing used by the theme is declared here.
   Re-theming should never require editing another stylesheet.
   Palette is taken verbatim from the SEC Branding Guidelines (Aug 2021).
   ========================================================================== */

:root {
  /* --- Brand palette (guidelines §1.2) ---------------------------------- */
  --sec-black: #101820;       /* SEC Black — primary. Pantone 5463 U / Black 6 C */
  --sec-gray: #8a8d8f;        /* SEC Gray — Pantone 423 U / 877 C */
  --sec-pure-black: #000;
  --sec-white: #fff;

  /* --- Semantic colour roles -------------------------------------------- */
  /* Components reference these, never the brand palette directly, which is what
     lets the dark theme below re-point them without touching a component. */
  --color-bg: var(--sec-white);
  --color-surface: #f6f6f6;
  --color-surface-dark: var(--sec-black);
  --color-panel: var(--sec-black);      /* always-dark panels: menu, footer, bands */
  --color-panel-2: #17212b;             /* the same panel, lifted one step */
  --color-ink: var(--sec-black);
  --color-ink-invert: var(--sec-white);
  --color-muted: #5d6166;               /* AA-compliant body grey on white */
  --color-muted-invert: #b9bcbe;        /* readable grey on SEC Black */
  --color-line: #e2e3e4;
  --color-line-invert: rgba(255, 255, 255, 0.22);
  --color-focus: #4a90d9;
  --logo-filter: grayscale(1);
  --logo-filter-hover: none;
  --map-filter: grayscale(1) contrast(1.05);

  /* Image scrims — the only way we get contrast, since the brand has no accent */
  --scrim-tile: rgba(16, 24, 32, 0.52);
  --scrim-tile-hover: rgba(16, 24, 32, 0.68);
  --scrim-hero: linear-gradient(90deg, rgba(16, 24, 32, 0.88) 0%, rgba(16, 24, 32, 0.62) 45%, rgba(16, 24, 32, 0.2) 100%);
  --scrim-hero-light: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.7) 45%, rgba(255, 255, 255, 0.25) 100%);
  --scrim-project: rgba(0, 0, 0, 0.69); /* #000000B0, carried over from the current SEC site */

  /* --- Typography -------------------------------------------------------- */
  --font-sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Work Sans", "Segoe UI", Tahoma, sans-serif;
  --font-display: var(--font-sans);

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Fluid type scale */
  --step--2: 0.6875rem;                                   /* 11px — eyebrow small */
  --step--1: 0.8125rem;                                   /* 13px — meta */
  --step-0: 1rem;                                         /* 16px — body */
  --step-1: clamp(1.0625rem, 0.2vw + 1rem, 1.1875rem);    /* 17–19 — lead */
  --step-2: clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem);       /* 20–24 — card title */
  --step-3: clamp(1.5rem, 1vw + 1.25rem, 1.75rem);        /* 24–28 — panel heading */
  --step-4: clamp(1.75rem, 2vw + 1.25rem, 2.25rem);       /* 28–36 — section heading */
  --step-5: clamp(1.75rem, 4.6vw + 0.5rem, 3.25rem);      /* 28–52 — hero */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.65;
  --ls-wide: 0.14em;    /* uppercase eyebrows */
  --ls-nav: 0.06em;

  /* --- Spacing (4px base) ------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5.5rem;

  --section-y: clamp(3rem, 6vw, 5.5rem);

  /* --- Layout ------------------------------------------------------------ */
  --container: 1560px;
  --container-narrow: 1180px;
  --gutter: 5%;                /* matches the reference's edge-hugging rhythm */
  --gutter-min: 20px;

  --header-top-h: 92px;
  --header-nav-h: 75px;
  --header-h: calc(var(--header-top-h) + var(--header-nav-h));
  --header-h-mobile: 64px;

  --row-h-lg: 500px;
  --row-h-md: 300px;
  --row-h-sm: 260px;

  /* --- Effects ----------------------------------------------------------- */
  --radius: 0;                 /* the identity is hard-edged; keep it square */
  --shadow-header: 0 6px 6px 0 rgba(16, 24, 32, 0.08), inset 0 -1px 0 0 var(--color-line);
  --shadow-panel: 0 18px 40px -20px rgba(16, 24, 32, 0.5);

  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  --z-base: 1;
  --z-sticky: 100;
  --z-panel: 200;
  --z-drawer: 300;
  --z-top: 400;

  /* Hero autoplay duration — JS reads this so the dot progress bars stay in sync */
  --hero-interval: 7000ms;
}

/* Arabic / RTL runs on the Arabic face but keeps every other token */
:root:lang(ar),
[dir="rtl"] {
  --font-sans: "IBM Plex Sans Arabic", "Work Sans", "Segoe UI", Tahoma, sans-serif;
  --ls-wide: 0;        /* letter-spacing breaks Arabic joining */
  --ls-nav: 0;
}