/**
 * Theme 4: Brightside
 * ---------------------------------------------
 * Taken from the Brightside Voices prototype stylesheet. Nine values carry
 * the whole design, and every token below resolves to one of them:
 *
 *     ink     #193744   deep slate-teal. Body text, dark chrome, toasts.
 *     muted   #536976   second-tier text. Captions, labels, table heads.
 *     blue    #14638a   the one action colour. Buttons, links, active tab.
 *     deep    #114c67   blue, pressed.
 *     line    #d9e3e6   every border in the design.
 *     cream   #faf8f2   the page. Warm, not white — which is what makes a
 *                       plain white card read as a card without a shadow.
 *     yellow  #f5c750   the mark and the one accent. Never a UI surface.
 *     error   #a02732
 *     mint    #eaf4ef   confirmation ground.
 *
 * Two things about this palette are easy to get wrong and are worth naming:
 *
 * 1. There is ONE action colour. No secondary hue, no per-section tint, no
 *    coloured category tiles. Emphasis comes from FILL vs OUTLINE (a solid
 *    blue button against a white-and-hairline one), never from picking a
 *    different colour, so the single blue always means "this is the thing
 *    to press".
 *
 * 2. Focus is GOLD (#d59b1c), not blue. It has to be, precisely because blue
 *    is already the action colour — a blue focus ring on a blue button is
 *    invisible, and the focus ring is the one piece of UI a keyboard user
 *    cannot do without. It is 3px and offset 3px, so it sits clear of the
 *    control rather than on its edge.
 *
 * Ramps are provided for the semantic families because the framework's
 * components ask for them, but they are all mixed toward these nine anchors —
 * there is no second palette hiding underneath.
 */

:root {

    /* ============================================================
       The nine anchors, by their own names. Everything else in this
       file is one of these, tinted.
       ============================================================ */
    --bs-ink:    #193744;
    --bs-muted:  #536976;
    --bs-blue:   #14638a;
    --bs-deep:   #114c67;
    --bs-line:   #d9e3e6;
    --bs-cream:  #faf8f2;
    --bs-yellow: #f5c750;
    --bs-error:  #a02732;
    --bs-mint:   #eaf4ef;


    /* ============================================================
       Primary — the action blue
       ============================================================ */
    --color-primary-25:  #f7fafc;
    --color-primary-50:  #f1f7fa;
    --color-primary-75:  #edf4f6;   /* .notice ground */
    --color-primary-100: #e3eef3;
    --color-primary-150: #d3e3ea;
    --color-primary-200: #bcd4de;
    --color-primary-300: #8fb6c7;
    --color-primary-400: #4d8dab;
    --color-primary-500: #14638a;   /* --bs-blue */
    --color-primary-600: #114c67;   /* --bs-deep */
    --color-primary-700: #0e4058;
    --color-primary-800: #0c3547;
    --color-primary-900: #0a2b3a;
    --color-primary-950: #061c26;

    /* ============================================================
       Secondary — ink. Body text, and the dark surfaces: toasts, tooltips.
       ============================================================ */
    --color-secondary-25:  #f8fafb;
    --color-secondary-50:  #f2f6f6;   /* table head ground */
    --color-secondary-75:  #eff6f8;
    --color-secondary-100: #e4ecee;
    --color-secondary-150: #d5e0e3;
    --color-secondary-200: #c2d0d5;
    --color-secondary-300: #9aaeb6;
    --color-secondary-400: #708893;
    --color-secondary-500: #536976;   /* --bs-muted */
    --color-secondary-600: #3d5765;
    --color-secondary-700: #2b4553;
    --color-secondary-800: #193744;   /* --bs-ink */
    --color-secondary-900: #142c37;
    --color-secondary-950: #0d1d24;

    /* ============================================================
       Tertiary — the sage/mint family. Confirmation, and the calm
       ground behind the hero art.
       ============================================================ */
    --color-tertiary-25:  #f6faf8;
    --color-tertiary-50:  #eaf4ef;   /* --bs-mint */
    --color-tertiary-75:  #e2f0e8;
    --color-tertiary-100: #e5f2e9;   /* verified badge ground */
    --color-tertiary-150: #d6e9dd;
    --color-tertiary-200: #c2ddcc;
    --color-tertiary-300: #9cc4ad;
    --color-tertiary-400: #6ea587;
    --color-tertiary-500: #4a8968;
    --color-tertiary-600: #327053;
    --color-tertiary-700: #215c37;   /* verified badge ink */
    --color-tertiary-800: #1b4a2e;
    --color-tertiary-900: #163b26;
    --color-tertiary-950: #0b2115;

    /* ============================================================
       Accent — the yellow of the mark. A highlight, never a surface:
       it appears as the logo, the eyebrow in the dark bar, and the
       focus ring's darker cousin. Nothing is filled with it.
       ============================================================ */
    --color-accent-25:  #fffdf7;
    --color-accent-50:  #fff5d9;   /* .demo-help ground */
    --color-accent-75:  #fdf0cd;
    --color-accent-100: #f8edce;   /* pending badge ground */
    --color-accent-150: #f4e3b4;
    --color-accent-200: #ecdaad;
    --color-accent-300: #f8df98;
    --color-accent-400: #f5c750;   /* --bs-yellow */
    --color-accent-500: #e0ad2c;
    --color-accent-600: #d59b1c;   /* the focus gold */
    --color-accent-700: #a8790f;
    --color-accent-800: #85600f;
    --color-accent-900: #674d0e;   /* pending badge ink */
    --color-accent-950: #3b2c06;

    /* ============================================================
       Neutral — warm greys, pulled toward the cream so a divider
       never reads cooler than the page it is drawn on.
       ============================================================ */
    --color-neutral-25:  #fdfdfb;
    --color-neutral-50:  #faf8f2;   /* --bs-cream */
    --color-neutral-75:  #f6f4ed;
    --color-neutral-100: #f2f6f6;
    --color-neutral-150: #e8eef0;
    --color-neutral-200: #d9e3e6;   /* --bs-line */
    --color-neutral-300: #adbec7;   /* input border */
    --color-neutral-400: #8ba1ac;
    --color-neutral-500: #6b8290;
    --color-neutral-600: #536976;   /* --bs-muted */
    --color-neutral-700: #3d5765;
    --color-neutral-800: #2b4553;
    --color-neutral-900: #193744;   /* --bs-ink */
    --color-neutral-950: #0d1d24;

    /* ============================================================
       Error
       ============================================================ */
    --color-error-25:  #fffafa;
    --color-error-50:  #fff0f0;
    --color-error-75:  #f9e3e3;   /* rejected badge ground */
    --color-error-100: #f7d9da;
    --color-error-150: #f0c6c8;
    --color-error-200: #e3afb4;
    --color-error-300: #d38a90;
    --color-error-400: #c0656d;
    --color-error-500: #a02732;   /* --bs-error */
    --color-error-600: #8e2831;
    --color-error-700: #7a212a;
    --color-error-800: #631c23;
    --color-error-900: #4f171d;
    --color-error-950: #2c0c10;

    /* ============================================================
       Success — the same family as tertiary; a status, not a theme.
       ============================================================ */
    --color-success-25:  #f6fbf8;
    --color-success-50:  #eef7f1;
    --color-success-75:  #e5f2e9;
    --color-success-100: #d8ebdf;
    --color-success-150: #c6e0d0;
    --color-success-200: #aed2bc;
    --color-success-300: #86ba99;
    --color-success-400: #589a72;
    --color-success-500: #38805a;
    --color-success-600: #2a6c49;
    --color-success-700: #215c37;
    --color-success-800: #1b4a2e;
    --color-success-900: #163b26;
    --color-success-950: #0b2115;

    /* ============================================================
       Warning — the pending amber
       ============================================================ */
    --color-warning-25:  #fffdf5;
    --color-warning-50:  #fff5d9;
    --color-warning-75:  #f8edce;
    --color-warning-100: #f4e5b8;
    --color-warning-150: #eedca4;
    --color-warning-200: #ecdaad;
    --color-warning-300: #ddc07a;
    --color-warning-400: #f5c750;
    --color-warning-500: #d59b1c;
    --color-warning-600: #a8790f;
    --color-warning-700: #674d0e;
    --color-warning-800: #55400d;
    --color-warning-900: #45340b;
    --color-warning-950: #251b05;

    /* ============================================================
       Info — the blue again, one notch lighter. In this design
       "informational" and "actionable" share a colour on purpose;
       there is no second blue to introduce.
       ============================================================ */
    --color-info-25:  #f7fbfc;
    --color-info-50:  #edf4f6;
    --color-info-75:  #e3eef3;
    --color-info-100: #d8e7ed;
    --color-info-150: #c6dae3;
    --color-info-200: #b0cbd7;
    --color-info-300: #86adbe;
    --color-info-400: #4d8dab;
    --color-info-500: #14638a;
    --color-info-600: #114c67;
    --color-info-700: #0e4058;
    --color-info-800: #0c3547;
    --color-info-900: #0a2b3a;
    --color-info-950: #061c26;

    /* ============================================================
       Lime — a spare status tone, kept in the sage family rather
       than introducing a hue the design does not have.
       ============================================================ */
    --color-lime-25:  #f7faf5;
    --color-lime-50:  #f0f6e9;
    --color-lime-75:  #e7f0dc;
    --color-lime-100: #dcebcc;
    --color-lime-150: #cde0b9;
    --color-lime-200: #bbd4a2;
    --color-lime-300: #9cbd7e;
    --color-lime-400: #7ca35c;
    --color-lime-500: #618845;
    --color-lime-600: #4d7036;
    --color-lime-700: #3d5a2b;
    --color-lime-800: #324922;
    --color-lime-900: #2a3c1d;
    --color-lime-950: #16210f;


    /* ============================================================
       Semantic roles
       ============================================================ */

    --color-primary:   var(--color-primary-500);
    --color-secondary: var(--color-secondary-800);
    --color-tertiary:  var(--color-tertiary-700);
    --color-accent:    var(--color-accent-400);
    --color-neutral:   var(--color-neutral-600);
    --color-error:     var(--color-error-500);
    --color-success:   var(--color-success-700);
    --color-warning:   var(--color-warning-500);
    --color-info:      var(--color-info-500);

    /* The focus gold. Deliberately outside every other family — see the
       header note. Nothing else in the design may use it. */
    --color-focus: var(--color-accent-600);

    /* --- Surfaces ------------------------------------------------------
       Cream page, white panels. The warmth of the ground is what does the
       separating, which is why the cards carry a hairline and only the
       faintest shadow instead of a heavy one. */
    --color-background:                var(--bs-cream);
    --color-surface:                   #ffffff;
    --color-surface-dim:               var(--color-neutral-75);
    --color-surface-bright:            #ffffff;
    --color-surface-variant:           var(--color-neutral-100);
    --color-surface-tint:              var(--color-primary-500);
    --color-surface-container-lowest:  #ffffff;
    --color-surface-container-low:     #fcfcfa;
    --color-surface-container:         var(--color-neutral-100);
    --color-surface-container-high:    var(--color-neutral-150);
    --color-surface-container-highest: var(--color-neutral-200);
    --color-surface-disabled:          #d9e1e4;

    /* Panels inset INSIDE a white card (an identity block, a key list).
       Cooler and slightly darker than the card, bordered rather than
       shadowed — a card never sits on another card in this design. */
    --color-surface-inset:        #f3f7f7;
    --color-surface-inset-border: #d5e3e4;

    /* --- Content tiers --------------------------------------------------
       on-surface        #193744  headings + body
       on-surface-variant #536976 captions, labels, table heads
       on-surface-muted  #6b8290  placeholders, the quietest text */
    --color-on-primary:           #ffffff;
    --color-on-secondary:         #ffffff;
    --color-on-tertiary:          #ffffff;
    --color-on-error:             #ffffff;
    --color-on-success:           #ffffff;
    --color-on-warning:           var(--color-warning-700);
    --color-on-info:              #ffffff;
    --color-on-surface:           var(--bs-ink);
    --color-on-surface-variant:   var(--bs-muted);
    --color-on-surface-muted:     var(--color-neutral-500);
    --color-on-background:        var(--bs-ink);
    --color-on-surface-disabled:  #526773;

    /* --- Containers (tinted grounds for chips, alerts, callouts) -------- */
    --color-primary-container:    var(--color-primary-75);
    --color-secondary-container:  var(--color-secondary-75);
    --color-tertiary-container:   var(--color-tertiary-50);
    --color-error-container:      var(--color-error-50);
    --color-success-container:    var(--color-success-75);
    --color-warning-container:    var(--color-warning-50);
    --color-info-container:       var(--color-info-50);

    --color-on-primary-container:    var(--color-primary-700);
    --color-on-secondary-container:  var(--color-secondary-800);
    --color-on-tertiary-container:   var(--color-tertiary-700);
    --color-on-error-container:      var(--color-error-600);
    --color-on-success-container:    var(--color-success-700);
    --color-on-warning-container:    var(--color-warning-700);
    --color-on-info-container:       var(--color-info-600);

    /* --- Outlines ------------------------------------------------------
       One line colour for structure, one darker one for form controls: an
       input has to look like something you can type into from across the
       page, a divider does not. */
    --color-outline:           var(--color-neutral-300);   /* form controls */
    --color-outline-variant:   var(--bs-line);             /* dividers, cards */
    --color-outline-strong:    #acc1cb;                    /* outline buttons */
    --color-outline-disabled:  var(--color-neutral-200);

    /* Brand marker chip */
    --color-brand-mark-text:   var(--color-primary-600);
    --color-brand-mark-border: var(--color-primary-200);
    --color-brand-mark-bg:     var(--color-primary-75);

    /* --- Shadow + state --------------------------------------------------
       Almost nothing. A card's shadow is 2% black — it is there to stop the
       white looking pasted on, not to lift it. Only things that genuinely
       float (a modal, a toast) get a real one. */
    --shadow-tint:                  36, 60, 75;
    --color-scrim:                  rgba(25, 55, 68, 0.45);
    --color-shadow:                 rgba(36, 60, 75, 0.06);
    --color-state-hover-opacity:    0.06;
    --color-state-focus-opacity:    0.12;
    --color-state-pressed-opacity:  0.12;
    --color-state-dragged-opacity:  0.16;
}