/* ==========================================================================
   AKWA STREAM 2027 — DESIGN TOKENS
   ==========================================================================
   Mirrors miti-exchange-2027/resources/css/variables.css ramp for ramp, by way
   of zuva-energy-2027/public/css/tokens.css. THE single source of truth for all
   design values.

   This file and config/brand.php are the ONLY two things that differ between
   Zuva Energy 2027 and Akwa Stream 2027. Miti is the greens of a forest; Zuva
   is the amber of the sun; Akwa is the blues of water. Everything else — the
   shell, the type scale, the spacing, the component language — is shared, and
   that is what makes the three sites read as one family rather than three
   lookalikes.

   FORK NOTE: this is a COPY of the Zuva shell, not a share. If shell.css or
   components.css changes on either side, the other is told. Neither assumes.
   ========================================================================== */

:root {
    /* ------------------------------------------------------------------
       BRAND COLORS — The blues of Akwa Stream
       'Akwa' is the water. Cool and deep, weighted so the 500–700 band is
       where text and fills live; the 200–300 band is pale enough to wash a
       surface without tinting the type on it.
       ------------------------------------------------------------------ */
    --color-brand-50:  #eff9fb;
    --color-brand-100: #d7f0f5;
    --color-brand-200: #b3e2ec;
    --color-brand-300: #7dcbdd;
    --color-brand-400: #40acc5;
    --color-brand-500: #238fa9;   /* Primary brand blue */
    --color-brand-600: #1e778f;   /* Hover / active states */
    --color-brand-700: #1d6076;   /* Text-safe on cool surfaces */
    --color-brand-800: #1f4f60;
    --color-brand-900: #1e4251;
    --color-brand-950: #0e2a36;

    /* ------------------------------------------------------------------
       ACCENT COLORS — Silt and river sand
       The counterweight to the brand blue, and an honest one: silt is what
       water carries. Used for headings, rules and anything that would shout
       if it were brand-coloured.
       ------------------------------------------------------------------ */
    --color-accent-50:  #faf7f2;
    --color-accent-100: #f1e9dc;
    --color-accent-200: #e2d2b9;
    --color-accent-300: #cdb48c;
    --color-accent-400: #b6925f;
    --color-accent-500: #9e7842;   /* Primary accent */
    --color-accent-600: #856236;
    --color-accent-700: #6b4e2e;
    --color-accent-800: #563f28;
    --color-accent-900: #453324;

    /* ------------------------------------------------------------------
       NETWORK TIE — GreenBucks / Miti moss
       IDENTICAL to Zuva and Miti, deliberately and without adjustment.
       Akwa is its own brand, but it is a spoke on someone else's hub. This
       green is used sparingly and on purpose: community ownership, verified
       states, and anything that belongs to the wider network.
       ------------------------------------------------------------------ */
    --color-moss-100: #dcfce7;
    --color-moss-500: #22c55e;
    --color-moss-600: #16a34a;
    --color-moss-700: #15803d;
    --color-moss-900: #14532d;

    /* ------------------------------------------------------------------
       SURFACE / NEUTRAL COLORS
       Cool-leaning where Zuva's are warm — the neutrals carry as much of
       the brand temperature as the brand ramp does.
       ------------------------------------------------------------------ */
    --color-surface-50:  #f8fafb;
    --color-surface-100: #eff3f5;
    --color-surface-200: #dde5e8;
    --color-surface-300: #c2ced4;
    --color-surface-400: #8d9ba3;
    --color-surface-500: #647079;
    --color-surface-600: #4c565e;
    --color-surface-700: #374047;
    --color-surface-800: #222a2f;
    --color-surface-900: #131a1e;
    --color-surface-950: #080c0e;
    --color-black:       #000000;
    --color-white:       #ffffff;

    /* Page background — cool natural tone, a shade cooler than Miti's */
    --color-page-bg:     #F2F7F9;

    /* ------------------------------------------------------------------
       SEMANTIC COLORS — identical to Miti and Zuva, on purpose. A success
       state should not change meaning because the reader moved between
       sites.
       ------------------------------------------------------------------ */
    --color-success-100: #dcfce7;
    --color-success-500: #22c55e;
    --color-success-600: #16a34a;
    --color-success-700: #15803d;
    --color-success:     #22c55e;

    --color-danger-50:  #fef2f2;
    --color-danger-100: #fee2e2;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-danger-700: #b91c1c;
    --color-danger:     #ef4444;

    --color-warning-50:  #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-500: #f59e0b;
    --color-warning-700: #b45309;
    --color-warning:     #f59e0b;

    --color-info-50:  #eff6ff;
    --color-info-100: #dbeafe;
    --color-info-500: #3b82f6;
    --color-info-600: #2563eb;
    --color-info-700: #1d4ed8;
    --color-info:     #3b82f6;

    /* ------------------------------------------------------------------
       TYPOGRAPHY
       Poppins for the interface, Lobster for display headers — the same
       pairing Miti and Zuva use, because the family resemblance lives in
       the type as much as in the layout. Not negotiable.
       ------------------------------------------------------------------ */
    --font-ui:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Lobster', Georgia, serif;
    --font-mono:    ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', monospace;

    --fs-2xs:  0.6875rem;
    --fs-xs:   0.75rem;
    --fs-sm:   0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md:   1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.375rem;
    --fs-2xl:  1.75rem;
    --fs-3xl:  2.25rem;
    --fs-4xl:  3rem;

    --lh-tight: 1.15;
    --lh-snug:  1.35;
    --lh-base:  1.6;

    /* ------------------------------------------------------------------
       SPACE · RADIUS · SHADOW · SHELL
       ------------------------------------------------------------------ */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-7: 2rem;
    --s-8: 2.5rem;
    --s-9: 3.5rem;

    --radius-sm:   0.375rem;
    --radius:      0.625rem;
    --radius-lg:   0.875rem;
    --radius-xl:   1.25rem;
    --radius-pill: 6.25rem;

    --shadow-sm: 0 0.0625rem 0.125rem rgba(19, 26, 30, 0.06);
    --shadow:    0 0.0625rem 0.1875rem rgba(19, 26, 30, 0.08), 0 0.5rem 1.25rem rgba(19, 26, 30, 0.05);
    --shadow-lg: 0 0.75rem 2.25rem rgba(19, 26, 30, 0.12);

    /* ------------------------------------------------------------------
       THE TWO BARS

       Both bars are one height. --shell-header-h used to be 4.25rem because
       it housed a two-row header with the wordmark stacked inside it. It does
       not any more: the name sits in the header, the qualifier sits in the
       menu bar below, and the lockup is formed ACROSS the two bars rather
       than inside either. That is why a 2.5rem bar can carry a brand that
       reads at 4.7rem, and why the two halves can come apart on scroll.

       Matched to Miti by way of zuva-energy-2027, which measured it there.
       ------------------------------------------------------------------ */
    --bar-h: 2.5rem;

    /* ---------------------------------------------------- brand geometry --
       The badge, the name and the qualifier at their two sizes, plus the ink
       ratios the lockup calc needs. Held as tokens rather than restated per
       rule: the resolved behaviour is Miti's, but six rules restating four
       numbers is four chances to update three of them.

       The two ink ratios are measurements of the artwork rather than design
       choices — they locate the optical centre and the foot of the name
       inside its box, which is what lets the qualifier seat under it. */
    --brand-badge-h:          4.375rem;
    --brand-badge-h-compact:  1.875rem;
    --brand-name-h:           2.689rem;
    --brand-name-h-compact:   2.1rem;
    --brand-name-ink-end:     0.9722;
    --brand-name-ink-centre:  1.3008;
    --brand-qualifier-ratio:  0.6315;
    --brand-qualifier-half:   1.7074;
    --brand-gutter:           4.375rem;
    --brand-gutter-compact:   1.625rem;

    /* One duration for every shell transition — the badge box, both gutters,
       all four bars. Two states need them all off at once: body--preload for
       the opening frame, and prefers-reduced-motion. A single variable cannot
       fall out of step with itself the way an eight-selector list can. */
    --motion-shell: 0.25s;

    /* Bar typography */
    --fs-bar-link: 0.95rem;
    --fs-bar-pill: 0.8rem;
    --lh-bar:      1.5;

    /* One colour per product line. The pill is an outline at rest and a SOLID
       FILL on hover and on active — Miti fills it, it does not tint it. */
    --pill-schemes:   var(--color-brand-600);
    --pill-community: var(--color-accent-600);
    --pill-coin:      var(--color-surface-800);

    /* The shell — these three drive the whole three-column layout */
    --shell-header-h: var(--bar-h);
    --shell-menu-h:   var(--bar-h);
    --shell-ticker-h: 2.5rem;
    /* Both panels are 15rem, which is Miti's number, and they are the same
       as each other there. This file had 15.5 and 16.5 — 8px and 24px wider —
       which together with the shell's own 16px padding took 64px off the
       middle column: measured at 1440px, main was 849px here against Miti's
       913px, and the two sites' content columns did not line up at any width.
       Changing these two values and the shell's padding is what closes it. */
    --shell-nav-w:    15rem;     /* left panel  — Miti: 240px */
    --shell-aside-w:  15rem;     /* right panel — Miti: 240px */
    --shell-gap:      1rem;
    --shell-max:      100rem;

    --border:      0.0625rem solid var(--color-surface-200);
    --border-soft: 0.0625rem solid var(--color-surface-100);
}