/*
 * Ramona Optics brand tokens: the one place ramonacloud pages take colour from.
 *
 * The palette comes from python-owl architecture/brand_guidelines.md, and
 * the dark page ground mirrors the "black" ground of the ramona-claude slides
 * skill (theme.json): brand Black behind white text, Dark Gray for muted text
 * and rules, Green as the single highlight. The chart extras (purple, orange,
 * two greys, body-text grey and gridline grey) come from the approved
 * dose-response chart and extend the palette where it has no colour of its
 * own: a second and third data series, and the error colour.
 *
 * Pages use the semantic tokens (--bg-*, --text-*, --accent-*, --*-color,
 * --series-*), never a hex literal. tests/test_brand_tokens.py enforces that.
 * Change the look here, not in the templates.
 */

:root {
    /* ── Primary palette ───────────────────────────────────────────────── */
    --brand-green: #20CC4B;
    --brand-black: #1D1D1D;
    --brand-dark-gray: #767676;
    --brand-gray: #E3E3E3;
    --brand-light-gray: #F2F2F2;
    --brand-white: #FFFFFF;

    /* ── Secondary palette (infographics, graphs, accents) ─────────────── */
    --brand-teal: #3CCFBE;    /* Kestrel */
    --brand-blue: #B1DFF0;    /* general accent */
    --brand-pink: #EEB6FD;    /* Vireo */
    --brand-sienna: #D89B2D;  /* software products */
    --brand-yellow: #FFE099;  /* general accent */

    /* ── Chart extras (from the approved dose-response chart) ──────────── */
    --brand-purple: #786BCB;      /* second treatment series, dashed outlines */
    --brand-orange: #EB6834;      /* third treatment series; also the error colour */
    --brand-grey-line: #8A8A8A;   /* untreated / control series */
    --brand-grey-label: #595959;  /* label of that series */
    --brand-body-text: #BEBEBE;   /* regular body text on the dark ground */
    --brand-gridline: #303030;    /* chart gridlines and hairline borders */

    /* RGB triplets of the above, for translucent tints: rgba(var(--x-rgb), 0.1) */
    --brand-green-rgb: 32, 204, 75;
    --brand-black-rgb: 29, 29, 29;
    --brand-dark-gray-rgb: 118, 118, 118;
    --brand-teal-rgb: 60, 207, 190;
    --brand-blue-rgb: 177, 223, 240;
    --brand-pink-rgb: 238, 182, 253;
    --brand-sienna-rgb: 216, 155, 45;
    --brand-yellow-rgb: 255, 224, 153;
    --brand-purple-rgb: 120, 107, 203;
    --brand-orange-rgb: 235, 104, 52;
    --brand-grey-line-rgb: 138, 138, 138;

    /* ── Product colours ───────────────────────────────────────────────── */
    --product-kestrel: var(--brand-teal);
    --product-vireo: var(--brand-pink);
    --product-software: var(--brand-sienna);

    /* ── Dark ground (slides "black" ground) ───────────────────────────── */
    /* Surfaces step away from brand Black in neutral grays only:
       secondary sits below the page (rails, canvases), tertiary above it
       (cards, inputs). */
    --bg-primary: var(--brand-black);
    --bg-secondary: #161616;
    --bg-tertiary: #2A2A2A;
    --border-color: var(--brand-gridline);
    --grid-color: var(--brand-gridline);

    --text-primary: var(--brand-white);
    /* Regular body text as the dose-response chart sets it; brand Dark Gray
       alone falls short of 4.5:1 on brand Black for small text. */
    --text-secondary: var(--brand-body-text);
    --text-muted: var(--brand-dark-gray);

    /* Green is the one highlight. Use it sparingly for emphasis. */
    --accent-primary: var(--brand-green);
    --accent-primary-hover: #1AAE40;
    --accent-primary-rgb: var(--brand-green-rgb);
    --on-accent: var(--brand-black);     /* text placed on a filled accent */
    --accent-secondary: var(--brand-dark-gray);

    /* ── Interaction roles ─────────────────────────────────────────────── */
    /* Green is reserved for the one primary action on a page and for "ok".
       Everything else a pointer touches takes another colour, so the page
       reads as the whole palette rather than as green. */
    --link-color: var(--brand-blue);
    --link-hover-color: var(--brand-white);
    --focus-color: var(--brand-blue);            /* focused inputs */
    --focus-color-rgb: var(--brand-blue-rgb);
    --hover-border-color: var(--brand-gray);     /* outline of a hovered control */
    --hover-tint: rgba(255, 255, 255, 0.05);     /* a hovered row, tab or item */
    --bg-hover: #353535;                         /* a filled button under the pointer */
    --selection-color: var(--brand-purple);      /* active tab, selected row, open item */
    --selection-color-rgb: var(--brand-purple-rgb);
    --eyebrow-color: var(--brand-teal);          /* small section labels, counts, rates */
    --spinner-color: var(--brand-teal);
    --progress-gradient: linear-gradient(90deg, var(--brand-teal), var(--brand-green));

    /* ── Status colours ────────────────────────────────────────────────── */
    --success-color: var(--brand-green);
    --success-color-hover: var(--accent-primary-hover);
    --success-color-rgb: var(--brand-green-rgb);

    --warning-color: var(--brand-sienna);
    --warning-color-hover: #B9832A;
    --warning-color-rgb: var(--brand-sienna-rgb);

    --info-color: var(--brand-blue);
    --info-color-hover: #93CBE2;
    --info-color-rgb: var(--brand-blue-rgb);

    --highlight-color: var(--brand-yellow);
    --highlight-color-rgb: var(--brand-yellow-rgb);

    /* The brand guidelines define no red; the chart's orange is the
       strongest warm colour in the scheme and reads as "stop" next to Green. */
    --error-color: var(--brand-orange);
    --error-color-hover: #D4561F;
    --error-color-rgb: var(--brand-orange-rgb);

    /* ── Data series ───────────────────────────────────────────────────── */
    /* Green, then the chart extras in the order the dose-response chart uses
       them (purple, orange, grey), then the secondary palette in the brand
       guidelines' order. Charts take colours in this order. */
    --series-1: var(--brand-green);
    --series-2: var(--brand-purple);
    --series-3: var(--brand-orange);
    --series-4: var(--brand-grey-line);
    --series-5: var(--brand-teal);
    --series-6: var(--brand-blue);
    --series-7: var(--brand-pink);
    --series-8: var(--brand-sienna);
    --series-9: var(--brand-yellow);
    /* A control or untreated series and its label, as the chart draws them. */
    --series-control: var(--brand-grey-line);
    --series-control-label: var(--brand-grey-label);

    /* ── Overlays, outlines and shadows ────────────────────────────────── */
    --overlay-color: rgba(var(--brand-black-rgb), 0.72);
    --swatch-outline: rgba(29, 29, 29, 0.2);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.8);

    /* ── Type ──────────────────────────────────────────────────────────── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}