/* ==========================================================================
   Aim IT — Design tokens
   Load order: tokens.css -> base.css -> layout.css -> components.css -> pages.css

   This file contains custom properties only. It never styles an element.

   Three layers:
     1. Raw palette   -- fixed brand values. Never used directly in components.
     2. Semantic      -- what a value means (--text, --surface). Components use these.
     3. Scopes        -- dark mode and dark sections re-map layer 2 only.

   Because components read semantic tokens, a dark section and dark mode both
   work with one set of components. No component needs a dark variant.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --------------------------------------------------------------------
     1. RAW PALETTE
     -------------------------------------------------------------------- */

  /* Navy — the structural colour of the brand */
  --c-ink-900: #05101f;
  --c-ink-800: #081a2e;
  --c-ink-700: #0c2340;
  --c-ink-600: #123057;
  --c-ink-500: #1b4170;

  /* Action blue */
  --c-blue-800: #0a2f88;
  --c-blue-700: #0e3fae;
  --c-blue-600: #1350d8;
  --c-blue-500: #3b71e8;
  --c-blue-200: #b9cdf9;
  --c-blue-100: #d6e2fc;
  --c-blue-050: #edf2fe;

  /* Neutrals — cool, never warm and never plain grey */
  --c-white: #ffffff;
  --c-paper: #f4f6fa;
  --c-slate-700: #3d4d68;
  --c-slate-600: #556685;
  --c-slate-400: #8595b0;
  --c-slate-300: #c4cede;
  --c-slate-200: #dce3ef;
  --c-slate-100: #eaeff7;

  /* Ecosystem accents — used for meaning, never for decoration.
     Teal = ISP / connectivity.  Gold = financial technology / brokerage. */
  --c-isp-700: #0d7a82;
  --c-isp-600: #16a9b4;
  --c-isp-400: #6fd0d7;
  --c-isp-050: #e4f6f7;

  --c-fin-700: #8b6720;
  --c-fin-600: #c99a3c;
  --c-fin-400: #e3c383;
  --c-fin-050: #faf2e2;

  /* Status */
  --c-green-700: #12603d;
  --c-green-600: #18794e;
  --c-green-050: #e6f4ed;
  --c-amber-700: #92400e;
  --c-amber-600: #b45309;
  --c-amber-050: #fdf3e5;
  --c-red-700: #8f1d13;
  --c-red-600: #b42318;
  --c-red-050: #fdecea;

  /* --------------------------------------------------------------------
     2. SEMANTIC TOKENS — dark is the default theme

   Dark is what a visitor sees unless they choose otherwise, so the dark
   values live here, on :root. That matters for more than tidiness: if
   JavaScript never runs, these are the values that apply, and the site still
   opens in the theme it is meant to open in.

   The light theme is an override, further down.
   -------------------------------------------------------------------- */

  /* Written out rather than referenced. The page background is the one token
     an embedded viewer is most likely to get wrong, so it is given as plainly
     as possible. */
  --bg: #05101f;
  --surface: #0e1e35;
  --surface-2: #132745;
  --surface-inset: #10294a;

  --text: #eaf0fa;
  --text-strong: #ffffff;
  --text-muted: #9aaac4;
  /* On dark, the primary button is light blue, so its label must be dark.
     White on light blue fails the contrast requirement. */
  --text-on-brand: #05101f;

  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.24);
  --border-brand: rgba(59, 113, 232, 0.5);

  --brand: #5b8bf0;
  --brand-hover: #7ba4f5;
  --brand-active: #9cbcf8;
  --brand-soft: rgba(59, 113, 232, 0.14);
  --brand-ink: #a8c4f7;

  --eco-isp: var(--c-isp-400);
  --eco-isp-ink: var(--c-isp-400);
  --eco-isp-soft: rgba(22, 169, 180, 0.14);
  --eco-fin: var(--c-fin-400);
  --eco-fin-ink: var(--c-fin-400);
  --eco-fin-soft: rgba(201, 154, 60, 0.14);

  --eco: var(--brand);
  --eco-ink: var(--brand-ink);
  --eco-soft: var(--brand-soft);

  --success: #57c08c;
  --success-soft: rgba(24, 121, 78, 0.18);
  --warning: #e0a45e;
  --warning-soft: rgba(180, 83, 9, 0.18);
  --danger: #f08379;
  --danger-soft: rgba(180, 35, 24, 0.18);

  --focus-ring: #7ba4f5;
  --overlay: rgba(2, 8, 16, 0.7);
  --header-bg: rgba(5, 16, 31, 0.9);

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
  --sh-3: 0 32px 64px -24px rgba(0, 0, 0, 0.65);

  /* --------------------------------------------------------------------
     3. TYPOGRAPHY
     -------------------------------------------------------------------- */

  --font-display: "Archivo", "Archivo Fallback", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-text: "IBM Plex Sans", "IBM Plex Sans Arabic", "Noto Sans Bengali",
    "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Mono",
    Menlo, monospace;

  --fs-display: clamp(2.5rem, 6vw, 4.25rem);
  --fs-h1: clamp(2.1rem, 4.6vw, 3.25rem);
  --fs-h2: clamp(1.7rem, 3.2vw, 2.4rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.0625rem, 1.2vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.8125rem;

  --lh-display: 1.04;
  --lh-h1: 1.08;
  --lh-h2: 1.15;
  --lh-h3: 1.25;
  --lh-body: 1.6;
  --lh-tight: 1.4;

  --tracking-display: -0.022em;
  --tracking-head: -0.014em;
  --tracking-body: 0;

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

  /* Archivo carries a width axis. Slightly expanded headings give the brand
     its engineered feel. Ignored by browsers without the variable font. */
  --width-display: 112;
  --width-head: 106;

  --measure: 64ch;
  --measure-narrow: 52ch;

  /* --------------------------------------------------------------------
     4. SPACE — 4px base
     -------------------------------------------------------------------- */

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-space: clamp(2.5rem, 5vw, 4.5rem);
  --section-space-tight: clamp(1.75rem, 3.5vw, 3rem);

  --container: 1240px;
  --container-wide: 1440px;
  --container-narrow: 760px;

  /* --------------------------------------------------------------------
     5. RADIUS — carries hierarchy, not one value everywhere
     -------------------------------------------------------------------- */

  --r-xs: 2px;   /* inputs, chips, table cells */
  --r-sm: 6px;   /* buttons */
  --r-md: 12px;  /* standard cards */
  --r-lg: 20px;  /* feature panels, product mockup frames */
  --r-pill: 999px;

  /* --------------------------------------------------------------------
     6. SHADOW — navy tinted, never grey.
     Borders define structure. Shadow lifts one element per section.
     -------------------------------------------------------------------- */

  --sh-1: 0 1px 2px rgba(5, 16, 31, 0.06);
  --sh-2: 0 12px 32px -12px rgba(5, 16, 31, 0.18);
  --sh-3: 0 32px 64px -24px rgba(5, 16, 31, 0.28);

  /* --------------------------------------------------------------------
     7. MOTION — one moving thing per page
     -------------------------------------------------------------------- */

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;

  /* --------------------------------------------------------------------
     8. LAYERS
     -------------------------------------------------------------------- */

  --z-base: 1;
  --z-rail: 5;
  --z-sticky: 40;
  --z-header: 60;
  --z-drawer: 70;
  --z-float: 80;
  --z-overlay: 90;
  --z-toast: 100;
}

/* ==========================================================================
   LIGHT THEME — chosen, not assumed.
   theme.js writes data-theme="light" on the root element when the visitor
   picks it, and remembers the choice.
   ========================================================================== */

[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f6fa;
  --surface: var(--c-white);
  --surface-2: var(--c-slate-100);
  --surface-inset: var(--c-blue-050);

  /* On a white surface the text is solid black. Navy reads well on a screen
     but the instruction here is contrast above all, and black on white is
     21:1 — the highest ratio there is. */
  --text: #000000;
  --text-strong: #000000;
  --text-muted: #333333;
  --text-on-brand: var(--c-white);

  --border: var(--c-slate-200);
  --border-strong: var(--c-slate-300);
  --border-brand: var(--c-blue-200);

  --brand: var(--c-blue-600);
  --brand-hover: var(--c-blue-700);
  --brand-active: var(--c-blue-800);
  --brand-soft: var(--c-blue-050);
  --brand-ink: var(--c-blue-700);

  --eco-isp: var(--c-isp-600);
  --eco-isp-ink: var(--c-isp-700);
  --eco-isp-soft: var(--c-isp-050);
  --eco-fin: var(--c-fin-600);
  --eco-fin-ink: var(--c-fin-700);
  --eco-fin-soft: var(--c-fin-050);

  /* Set per block with class .is-isp / .is-fin so a card, badge or rail
     picks up the right ecosystem colour without extra selectors. */
  --eco: var(--brand);
  --eco-ink: var(--brand-ink);
  --eco-soft: var(--brand-soft);

  --success: var(--c-green-600);
  --success-soft: var(--c-green-050);
  --warning: var(--c-amber-600);
  --warning-soft: var(--c-amber-050);
  --danger: var(--c-red-600);
  --danger-soft: var(--c-red-050);

  --focus-ring: var(--c-blue-600);
  --overlay: rgba(5, 16, 31, 0.55);
  --header-bg: rgba(255, 255, 255, 0.92);
}

/* ==========================================================================
   DARK SECTIONS INSIDE LIGHT MODE
   Add .on-dark to any section. Everything inside it switches automatically,
   because components read the semantic tokens this block re-maps.
   Used for: technology, infrastructure, product architecture, sTrader.
   ========================================================================== */

.on-dark {
  color-scheme: dark;

  --bg: #05101f;
  --surface: #0e1e35;
  --surface-2: #132745;
  --surface-inset: #10294a;

  --text: #eaf0fa;
  --text-strong: #ffffff;
  --text-muted: #9aaac4;

  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.24);
  --border-brand: rgba(59, 113, 232, 0.5);

  --brand: #5b8bf0;
  --brand-hover: #7ba4f5;
  --brand-active: #9cbcf8;
  --brand-soft: rgba(59, 113, 232, 0.14);
  --brand-ink: #a8c4f7;

  --eco-isp: var(--c-isp-400);
  --eco-isp-ink: var(--c-isp-400);
  --eco-isp-soft: rgba(22, 169, 180, 0.14);
  --eco-fin: var(--c-fin-400);
  --eco-fin-ink: var(--c-fin-400);
  --eco-fin-soft: rgba(201, 154, 60, 0.14);

  --eco: var(--brand);
  --eco-ink: var(--brand-ink);
  --eco-soft: var(--brand-soft);

  --success: #57c08c;
  --warning: #e0a45e;
  --danger: #f08379;

  --focus-ring: #7ba4f5;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 12px 32px -12px rgba(0, 0, 0, 0.55);
  --sh-3: 0 32px 64px -24px rgba(0, 0, 0, 0.65);

  background-color: var(--bg);
  color: var(--text);
}

/* ==========================================================================
   A DELIBERATELY WHITE PANEL

   Put .on-white on anything that should be a white card regardless of the
   page theme — a product screenshot, a printed-looking panel. Everything
   inside it turns solid black, including icons, which inherit currentColor.

   This exists so that a white surface can never appear with light text on
   it: the two are declared together, in one place, and cannot drift apart.
   ========================================================================== */

.on-white,
.is-white,
.bg-white,
[data-surface="white"] {
  color-scheme: light;

  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f4f9;
  --surface-inset: #f1f4f9;

  --text: #000000;
  --text-strong: #000000;
  --text-muted: #333333;
  --text-on-brand: #ffffff;

  --border: #d2d8e3;
  --border-strong: #aeb7c6;
  --border-brand: #9db7f2;

  --brand: #0a2f88;
  --brand-hover: #0a2f88;
  --brand-active: #05101f;
  --brand-soft: #e7eefc;
  --brand-ink: #0a2f88;

  --eco: #0d7a82;
  --eco-ink: #0a5b61;
  --eco-soft: #e4f6f7;

  --success: #12603d;
  --warning: #92400e;
  --danger: #8f1d13;

  --focus-ring: #0a2f88;

  background-color: #ffffff;
  color: #000000;
}

.on-white .icon,
.on-white svg,
.is-white .icon,
.is-white svg,
.bg-white .icon,
.bg-white svg {
  color: inherit;
}

/* ==========================================================================
   ECOSYSTEM SCOPES
   Put .is-isp or .is-fin on a card, panel or section. Any component inside
   that uses var(--eco) picks up the correct ecosystem colour.
   ========================================================================== */

.is-isp {
  --eco: var(--eco-isp);
  --eco-ink: var(--eco-isp-ink);
  --eco-soft: var(--eco-isp-soft);
}

.is-fin {
  --eco: var(--eco-fin);
  --eco-ink: var(--eco-fin-ink);
  --eco-soft: var(--eco-fin-soft);
}