/* =============================================================================
   PALETTE — raw colour ramps. The base layer of the token system.
   =============================================================================

   SSOT: this file is the ONLY place in static/css where a colour literal is
   written. Every other stylesheet reads a semantic role from tokens/semantic.css,
   and semantic.css reads from here.

   Rules:
   * Nothing outside tokens/semantic.css may reference a --c-* value directly.
     If a component needs a colour, the role it needs is missing from semantic.css
     — add the role there, do not reach past it into the ramp.
   * A theme MAY override a ramp entry (that is what makes a dark or rustic
     palette possible) but may never introduce a bare literal of its own.
   * Ramp entries are named by hue and lightness step, never by usage. There is
     no --c-danger here; "danger" is a role and lives in semantic.css.

   Every value below is lifted verbatim from what themes/base.css already
   shipped, so introducing this file changes no pixel.
   ========================================================================== */

:root {
    /* ── Brand blue ────────────────────────────────────────────────────── */
    --c-brand-900: #042C61;
    --c-brand-800: #063F8C;
    --c-brand-700: #0752B6;
    --c-brand-700-rgb: 7, 82, 182;
    --c-brand-600: #2E6FD0;
    --c-brand-500: #5B91DD;
    --c-brand-400: #6B9CE6;
    --c-brand-300: #9DBDEF;
    --c-brand-200: #80bdff;
    --c-brand-100: #E3EDF9;

    /* ── Neutrals ──────────────────────────────────────────────────────── */
    --c-neutral-000: #ffffff;
    --c-neutral-050: #f8f9fa;
    --c-neutral-100: #f1f1f1;
    --c-neutral-200: #e9ecef;
    --c-neutral-300: #dee2e6;
    --c-neutral-350: #ced4da;
    --c-neutral-400: #c1c1c1;
    --c-neutral-450: #a8a8a8;
    --c-neutral-500: #adb5bd;
    --c-neutral-600: #6c757d;
    --c-neutral-650: #545862;
    --c-neutral-700: #495057;
    --c-neutral-800: #343a40;
    --c-neutral-900: #212529;
    --c-neutral-1000: #000000;

    /* ── Sand ──────────────────────────────────────────────────────────────
       The warm cream the public surfaces are built on. Lives here rather than
       only in themes/beach.css because it is also the ink the wordmark is
       drawn in on the green nav band, which every theme shares. */
    --c-sand-050: #F7F1E6;

    /* ── Status hues ───────────────────────────────────────────────────── */
    --c-green-500: #28a745;
    --c-green-600: #198754;
    --c-green-700: #1e7e34;
    --c-amber-500: #ffc107;
    --c-amber-600: #e0a800;
    --c-amber-700: #b45309;
    --c-red-500: #dc3545;
    --c-red-600: #c82333;
    --c-red-700: #b91c1c;
    /* An informational blue, distinct from the brand ramp on purpose: a solid
       bar in --c-brand-700 reads as an extension of the navbar above it. */
    --c-blue-700: #1d4ed8;
    --c-orange-500: #fd7e14;
    --c-purple-500: #6f42c1;

    /* ── Alert tints ───────────────────────────────────────────────────── */
    --c-tint-success-bg: #d1edff;
    --c-tint-success-border: #bee5eb;
    --c-tint-success-text: #0c5460;
    --c-tint-info-bg: #d1ecf1;
    --c-tint-info-border: #bee5eb;
    --c-tint-info-text: #0c5460;
    --c-tint-warning-bg: #fff3cd;
    --c-tint-warning-border: #ffeaa7;
    --c-tint-warning-text: #856404;
    --c-tint-danger-bg: #f8d7da;
    --c-tint-danger-border: #f5c6cb;
    --c-tint-danger-text: #721c24;

    /* ── Demo-clip greens ──────────────────────────────────────────────────
       The phone-bezel composite (static/css/components/phone_frame.css) fills
       the screen cutout behind a video, so these have to match the CLIP's
       rendering of Bottle Green, not the app's declaration of it. They are a
       few units apart on screen: the clip is BT.709 limited range and a browser
       colour-manages it into the display profile by a different path than it
       takes for an sRGB CSS colour, so on a wide-gamut display the video's
       green lands lighter. A theme must NEVER re-point these — they track the
       film, not the brand.

       --c-clip-screen: sampled off the running clip. Headless screenshots do
       not reproduce the display's colour management, so re-sample from a real
       browser on a real monitor, never from an extracted frame.

       --c-clip-letterbox: the sign-off card, which is only on screen for a few
       seconds and cannot be eyedropped the same way. Solved for instead: the
       screen fill gives one calibrated pair (raw #1B3B29 renders as #1F4230),
       which fits a per-channel gamma of 0.938/0.923/0.914, and the card's raw
       #0C2919 through that fit is #0E2F1F. A ratio fit gives #0E2E1D and an
       additive one #103020, so the models agree to within two units a channel.
       Re-derive, do not re-sample, if the clip is re-exported. */
    --c-clip-screen: #1F4230;
    --c-clip-letterbox: #0E2F1F;
    /* Opaque near-black for the clip's transport bar, and the muted slate the
       static screen's placeholder label is set in. */
    --c-clip-chrome: #0a0f0b;
    --c-clip-placeholder: #5b6573;

    /* ── Inks ──────────────────────────────────────────────────────────────
       Bare rgb triples, consumed inside rgba() by the elevation roles. Kept as
       triples rather than finished colours so one ink can serve several
       opacities without a literal appearing at the call site. */
    --c-ink-shadow: 16, 24, 40;   /* cool near-black, light-theme elevation */
    --c-ink-black: 0, 0, 0;
    --c-ink-white: 255, 255, 255;

    /* ── Vendor badges ─────────────────────────────────────────────────────
       Fixed Apple/Google values, not a ramp. A theme must not override these:
       a themed badge stops matching the real one beside it. */
    --c-vendor-badge-border: #a6a6a6;   /* Apple badge hairline */
    --c-vendor-android-green: #3ddc84;  /* Android brand green */
}