/* ── brand.css — Area 246 brand layer for area246-web ──
   The design system ships neutral defaults. This file supplies the Area 246
   family's values: the parent (core) theme on :root, which the homepage and
   the legal pages use, plus the Cari and Bajan Buddy product themes.
   Load order on every page: ds/css/tokens.css, ds/css/components.css, this
   file, then css/styles.css (page layout only).

   Gradients are opt-in per theme. To take a theme flat, set its gradient and
   effect tokens to `initial` in its block (--product-grad, --product-grad-label,
   --product-wash, --shadow-glow, --aura-core, --aura-alt); components then fall
   back to the flat accent. */

/* =============================================================
   CORE (Area 246 parent) — family primitives and the default contract
   ============================================================= */
:root {
  /* Brand primitives */
  --hue-purple-light: #c98aff;
  --hue-brand-purple: #5c40c9;
  /* A lighter tint of the logo purple, for small text and icons on the
     dark core sections, where the logo purple reads at under 3:1. */
  --hue-purple-text: #8f7ae6;
  --hue-ink: #0b0b0f;

  /* Default product contract: the flat core colours. Every page sets a
     data-product, so these apply only to a page that forgets one. */
  --product-start: var(--hue-brand-purple);
  --product-mid: var(--hue-brand-purple);
  --product-end: var(--hue-brand-purple);
  --product-accent: var(--hue-purple-light);
  --product-grad: linear-gradient(var(--hue-brand-purple), var(--hue-brand-purple));
  --product-grad-label: linear-gradient(135deg, var(--hue-purple-light), var(--hue-brand-purple));
  --product-tint: color-mix(in oklab, var(--hue-brand-purple) 16%, transparent);
  --product-border: color-mix(in oklab, var(--hue-brand-purple) 35%, transparent);
  --section-accent-b: var(--hue-purple-light);

  /* Modal and overlay backdrop: navy, as the canvas below */
  --bg-scrim: rgba(15, 14, 42, 0.7);

  /* Navs show every brand's wordmark 25% bigger than its --wordmark-h,
     on desktop and on phones (the DS takes phones to 0.875 of desktop). */
  --nav-wordmark-scale: 1.25;
}

/* Label gradient follows each theme's own --product-grad unless the theme
   sets --product-grad-label. Declared at [data-product] so it resolves
   against that theme's value, not the core value on :root. */
[data-product] {
  --product-grad-label: var(--product-grad);
}

/* Showcase card wash: each theme's start and mid stops fading into its card
   surface. Declared at [data-product] for the same reason. */
:root,
[data-product] {
  --product-wash: linear-gradient(160deg,
    color-mix(in oklab, var(--product-start) 12%, transparent) 0%,
    color-mix(in oklab, var(--product-mid) 8%, transparent) 40%,
    var(--bg-surface-3) 100%);
}

/* Product cards on a core page sit on the core card grey, flat, so every
   product shares one card and only its wordmark and button carry its
   colours. --core-card-bg resolves on the core scope, before a card's own
   theme redeclares --bg-surface-3. */
[data-product="core"] {
  --core-card-bg: var(--bg-surface-3);
}
[data-product="core"] .card-showcase[data-product] {
  --product-wash: var(--core-card-bg);
}

/* Dark theme (default): navy surfaces, glow, auras and focus ring */
:root,
[data-theme="dark"] {
  --bg-canvas: #0f0e2a;
  --bg-surface-1: #13122e;
  --bg-surface-2: #16143a;
  --bg-surface-3: #1a1940;
  --bg-surface-glass: rgba(15, 14, 42, 0.92);
  --bg-nav-border: rgba(255, 255, 255, 0.06);
  --bg-nav-strip: rgba(0, 0, 0, 0.25);

  --fg-primary: #ffffff;
  --fg-body: #d0d0e0;
  --fg-muted: #a0a0c0;
  --fg-subtle: #8888a8;
  --fg-quiet: #8282a0;
  --fg-on-brand: #ffffff;

  --shadow-glow: 0 4px 20px var(--product-glow), 0 0 40px var(--product-halo);

  --aura-alt: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(130, 58, 188, 0.10) 0%, transparent 70%);

  --focus-ring: 0 0 0 3px rgba(237, 69, 190, 0.45);
}

/* Light theme: warm off-white with navy-tinted hairlines and shadows */
[data-theme="light"] {
  --bg-canvas: #fbfaf7;
  --bg-surface-1: #ffffff;
  --bg-surface-2: #f3f1ec;
  --bg-surface-3: #ffffff;
  --bg-surface-glass: rgba(251, 250, 247, 0.9);
  --bg-nav-border: rgba(15, 14, 42, 0.08);
  --bg-nav-strip: rgba(15, 14, 42, 0.05);

  --fg-primary: #12112a;
  --fg-body: #2b2a40;
  --fg-muted: #55556e;
  --fg-subtle: #7a7a93;
  --fg-quiet: #a0a0b5;
  --fg-on-brand: #ffffff;

  --border-subtle: rgba(15, 14, 42, 0.06);
  --border-default: rgba(15, 14, 42, 0.10);
  --border-strong: rgba(15, 14, 42, 0.18);

  --tint-03: rgba(15, 14, 42, 0.03);
  --tint-06: rgba(15, 14, 42, 0.05);
  --tint-10: rgba(15, 14, 42, 0.08);

  --shadow-sm: 0 1px 2px rgba(15, 14, 42, 0.06), 0 2px 6px rgba(15, 14, 42, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 14, 42, 0.08), 0 2px 6px rgba(15, 14, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 14, 42, 0.12), 0 4px 12px rgba(15, 14, 42, 0.06);
  --shadow-xl: 0 20px 50px rgba(15, 14, 42, 0.15);
  --shadow-glow: 0 8px 28px var(--product-glow), 0 0 0 1px var(--product-border);

  --aura-alt: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(130, 58, 188, 0.06) 0%, transparent 70%);

  --focus-ring: 0 0 0 3px rgba(130, 58, 188, 0.35);
}

/* =============================================================
   PRODUCT THEMES (sub-themes)
   Apply via data-product on any ancestor. Example:
     <section data-product="cari"> ... </section>
   Every component that reads --product-* / --section-* re-skins automatically.
   ============================================================= */

/* Core (home and legal pages) is flat on dark grey and ink: brand-purple
   buttons with white text, light brand-purple section labels and icons, lilac small accents,
   and a lilac-to-purple gradient only on headline accents. No glow on buttons and no aura on alternate
   sections. Cari and Bajan Buddy keep the :root and dark-theme effects
   above, so this lives here, not on :root. */
[data-product="core"] {
  --product-start: var(--hue-brand-purple);
  --product-mid: var(--hue-brand-purple);
  --product-end: var(--hue-brand-purple);
  --product-accent: var(--hue-purple-light);
  --product-grad: linear-gradient(var(--hue-brand-purple), var(--hue-brand-purple));
  --product-grad-label: linear-gradient(135deg, var(--hue-purple-light), var(--hue-brand-purple));
  --product-tint: color-mix(in oklab, var(--hue-brand-purple) 16%, transparent);
  --product-border: color-mix(in oklab, var(--hue-brand-purple) 35%, transparent);
  --product-glow: initial;
  --product-halo: initial;
  --shadow-glow: initial;
  --focus-ring: initial;
  --aura-alt: none;
  --section-accent-a: var(--hue-purple-text);
  --section-accent-b: var(--hue-purple-text);

  /* Dark grey page with ink alternate sections. The nav stays ink. Cari
     keeps the navy surfaces on :root. */
  --bg-canvas: #16161d;
  --bg-surface-1: #111116;
  --bg-surface-2: var(--hue-ink);
  --bg-surface-3: #1c1c24;
  --bg-surface-glass: rgba(11, 11, 15, 0.92);
  --bg-scrim: rgba(11, 11, 15, 0.7);

  /* Hero glow: brand purple, with lilac lower left */
  --aura-core:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(92, 64, 201, 0.16) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 30% 70%, rgba(201, 138, 255, 0.06) 0%, transparent 70%);

  /* The footer stays ink like the nav, instead of the dark grey page colour */
  --bg-footer: var(--hue-ink);

  /* Brand wordmarks share one cap height: baseline to the top of the
     tallest letters, about 23.5px, set by Cari's capitals. Each box is that
     height divided by the share of the box the letters fill above the
     baseline: Cari 98%, Area 246 90%, Bajan Buddy 79% (its j and y hang
     below). Cards show this size; navs scale it (--nav-wordmark-scale on
     :root), to about 29.5px of cap height on desktop and 25.5px on phones. */
  --wordmark-h: 26px;

  /* Outline buttons and badges: a brand-purple border and fill with white
     text, to sit beside the purple primary button. The accent colours the
     design system would use are too dim on ink. Cari and Bajan Buddy reset
     these, so a product card on a core page keeps its own colours. */
  --btn-outline-fg: var(--fg-primary);
  --btn-outline-bg: color-mix(in oklab, var(--hue-brand-purple) 12%, transparent);
  --btn-outline-border: var(--hue-brand-purple);
  --btn-outline-bg-hover: color-mix(in oklab, var(--hue-brand-purple) 24%, transparent);
  --btn-outline-border-hover: var(--hue-brand-purple);
  --badge-fg: var(--fg-primary);
  --badge-bg: color-mix(in oklab, var(--hue-brand-purple) 35%, transparent);
  --badge-border: var(--hue-brand-purple);
}

/* The core outline and badge colours inherit into a product scope nested in
   a core page; `initial` gives the product its accent colours back. */
[data-product="cari"],
[data-product="bajanbuddy"] {
  --btn-outline-fg: initial;
  --btn-outline-bg: initial;
  --btn-outline-border: initial;
  --btn-outline-bg-hover: initial;
  --btn-outline-border-hover: initial;
  --badge-fg: initial;
  --badge-bg: initial;
  --badge-border: initial;
}

/* Tokens that match :root are redeclared intentionally: pin Cari's skin
   so a future DS tweak to --product-glow/-halo/-tint/-border doesn't
   silently re-skin this consumer. */
[data-product="cari"] {
  --product-start: #ED45BE;
  --product-mid: #ED45BE;
  --product-end: #823ABC;
  --product-accent: #c98aff;
  --product-grad: linear-gradient(135deg, #ED45BE 0%, #823ABC 100%);
  --product-grad-label: linear-gradient(135deg, #ED45BE, #823ABC);
  --product-glow: rgba(237, 69, 190, 0.4);
  --product-halo: rgba(130, 58, 188, 0.4);
  --product-tint: rgba(237, 69, 190, 0.12);
  --product-border: rgba(237, 69, 190, 0.25);
  --shadow-glow: 0 4px 20px var(--product-glow), 0 0 40px var(--product-halo);
  --focus-ring: 0 0 0 3px rgba(237, 69, 190, 0.45);
  /* Section rhythm: light purple a, pink b. Declared here, not inherited,
     so a Cari card on the flat core page keeps it. */
  --section-accent-a: var(--product-accent);
  --section-accent-b: #ED45BE;

  /* Wordmark: the cap height the other marks match (see the core block).
     Pinned so a DS default change doesn't move it. */
  --wordmark-h: 24px;

  /* Navy surfaces, declared here so Cari keeps them inside an ink core page */
  --bg-canvas: #0f0e2a;
  --bg-surface-1: #13122e;
  --bg-surface-2: #16143a;
  --bg-surface-3: #1a1940;
  /* The nav is solid navy, because the light sections would show through
     the usual see-through glass and turn it grey. */
  --bg-surface-glass: #0f0e2a;
  --bg-scrim: rgba(15, 14, 42, 0.7);

  /* Scenes: the outline street in the hero and closing section is a faint
     white on navy. */
  --scene-outline-opacity: 0.14;

  /* Hero glow: purple, with pink lower left */
  --aura-core:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(130, 58, 188, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 30% 70%, rgba(237, 69, 190, 0.06) 0%, transparent 70%);
}

/* Light sections on the Cari page. The page stays navy, and the sections
   between the hero and the closing section carry data-theme="light", which
   gives them the light surfaces above. The gradient, its glow and the
   purple wash suit navy but look busy on the light canvas, and the lilac
   and pink are too faint there. So the light sections take Cari's purple,
   the dark end of its gradient, as the whole product palette: flat buttons
   and step numbers, purple labels, badges, checks, icons and links, and a
   purple hover sweep on cards. It reads at 4.5:1 or more on the canvas and
   on a badge's tint. */
[data-product="cari"] [data-theme="light"] {
  --product-start: #823abc;
  --product-mid: #823abc;
  --product-end: #823abc;
  --product-accent: #823abc;
  --product-grad: linear-gradient(#823abc, #823abc);
  --product-grad-label: var(--product-grad);
  --product-tint: rgba(130, 58, 188, 0.12);
  --product-border: rgba(130, 58, 188, 0.25);
  --product-glow: initial;
  --product-halo: initial;
  --shadow-glow: initial;
  --section-accent-a: #823abc;
  --section-accent-b: #823abc;
  --aura-alt: none;
  /* The alternate sections take Cari's tint, its purple at 7% over white,
     instead of warm grey. */
  --bg-surface-2: color-mix(in oklab, #823abc 7%, #ffffff);
  /* A slightly stronger hairline, so white cards stand out on the light
     sections. */
  --border-subtle: rgba(15, 14, 42, 0.10);
}

[data-product="bajanbuddy"] {
  /* Flat yellow buttons with no glow. Only headline accents keep a
     gradient, the yellow → blue sweep in --product-grad-label. */
  --product-start: #FFE633;
  --product-mid: #FFE633;
  --product-end: #FFE633;
  --product-accent: #FFE633;
  --product-grad: linear-gradient(#FFE633, #FFE633);
  --product-grad-label: linear-gradient(90deg, #FFE633, #88BBFF, #4488FF);
  --product-glow: initial;
  --product-halo: initial;
  --product-tint: rgba(255, 230, 51, 0.10);
  --product-border: rgba(136, 187, 255, 0.25);

  /* Wordmark at the shared cap height (see the core block). The j and y
     hang below the baseline, so the box is taller than Cari's. On phones
     the nav's scaled size (33px) would push the menu button off a 320px
     screen, so the phone size shrinks in step with the screen, from 33px at
     393px wide to 26px at 320px. */
  --wordmark-h: 30px;
  --nav-wordmark-h-sm: clamp(26px, 9.6vw - 4.7px, 33px);

  /* Section rhythm: both stops yellow, so sections don't flip. Both are
     set so a Bajan Buddy card inside a core page doesn't inherit pink. */
  --section-accent-a: var(--product-accent);
  --section-accent-b: var(--product-accent);

  /* Ultramarine surfaces */
  --bg-canvas: #001242;
  --bg-surface-1: #001a54;
  --bg-surface-2: #002068;
  --bg-surface-3: #00267F;
  --bg-surface-glass: rgba(0, 18, 66, 0.92);
  /* Hero glow: yellow, with blue lower left */
  --aura-core:
    radial-gradient(ellipse 50% 60% at 50% 40%, rgba(255, 230, 51, 0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 50% at 30% 70%, rgba(68, 136, 255, 0.12) 0%, transparent 70%);
  --aura-alt: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255, 199, 38, 0.08) 0%, transparent 70%);

  /* Dark text on the yellow buttons */
  --fg-on-brand: #001242;

  --shadow-glow: initial;
  --focus-ring: 0 0 0 3px rgba(255, 230, 51, 0.45);
}