/* ============================================================================
   Streetbeat — Design Tokens
   SINGLE SOURCE OF TRUTH for color, surface, layout, shape and motion values.
   Mirrors the role that assets/typography.css plays for type.

   Every page links this file (assets/css/tokens.css, or ../assets/css/tokens.css
   from a subfolder) and must consume these variables instead of hand-writing hex
   values, max-widths, radii or easing curves. Never redefine a token in a page's
   :root — change it here so it changes everywhere.

   Palette values are locked (see REDESIGN-RESEARCH.md §0.1). The homepage
   (index.html) is the canonical reference for the exact accent + surface values.
   ============================================================================ */

:root {
    /* ---- Surfaces ---- */
    --bg-white: #FFFFFF;       /* primary background */
    --bg-gray: #F5F6F6;        /* alternating section background */
    --bg-dark: #111112;        /* dark sections (hero, security), near-black */
    --bg-card-dark: #16171A;   /* cards on dark canvas */
    --bg-green-tint: #EEFBF2;  /* light green canvas (AI for Banks, B2B) */
    --bg-blue-tint: #EAF6F7;   /* light blue/cyan canvas (AI Trading App, B2C) */

    /* ---- Brand accents ---- */
    --green: #00CC4F;          /* primary brand accent (B2B) */
    --green-bright: #46FE8D;   /* glow / highlight */
    --cyan: #04B2AF;           /* B2C accent (Streetbeat App) */
    --cyan-bright: #5AF5F0;    /* cyan glow / highlight (sibling of --green-bright) */
    --amber: #E5A000;          /* secondary accent (patents, app) */

    /* ---- Text ---- */
    --text-dark: #111112;      /* headings */
    --text-body: #4E5157;      /* body copy */
    --text-muted: #9B9FA7;     /* captions, eyebrows */

    /* ---- Text on dark surfaces (dark cards / sections) ---- */
    --text-on-dark: #E0E1E3;       /* primary text/list items on dark cards */
    --text-on-dark-muted: #B9BCC2; /* supporting copy on dark cards */
    --green-soft: #ADFFC9;         /* soft green for labels/chips on dark */

    /* ---- Scroll-fill reveal (unfilled / "dim" start colors) ---- */
    --sf-dim-light: #CDD0D4;       /* pre-fill word color on light surfaces */
    --sf-dim-dark: #3A3D42;        /* pre-fill word color on dark surfaces */

    /* ---- Lines ---- */
    --border: #E0E1E3;         /* hairlines */

    /* ---- Type families (mirrors assets/typography.css) ---- */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Roobert', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ---- Layout ---- */
    --max: 1440px;             /* full marketing shell (homepage) */
    --max-width: 1140px;       /* narrower content / legal pages */
    --pad: clamp(20px, 5vw, 80px);

    /* ---- Shape ---- */
    --radius: 20px;

    /* ---- Motion ---- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}