/* ReadyLinks brand tokens: the one palette and type scale for readylinks.io and ReadyView.

   This file is the source of truth. It lives in readylinks-website
   (website/launch-bs5/assets/css/rl-tokens.css) and is served at
   https://readylinks.io/assets/css/rl-tokens.css.

   ReadyView keeps a byte-identical copy at src/theme/rl-tokens.css, because the native
   apps have to work offline. Its CI fails when that copy differs from the file served
   here, and `npm run brand:sync` in ReadyView pulls the new version. Change colours HERE,
   then sync ReadyView. Do not edit the copy.

   Rules for this file:
   - Only custom properties. No selectors that style anything.
   - Every token is declared on :root (light) first. The dark block only redefines.
   - A colour that is also needed with alpha gets an `-rgb` triplet that matches its hex
     (tests/rl-tokens.test.mjs checks both rules).
   - Dark mode is html[data-theme="dark"] on the website and body[color-theme="dark"]
     in ReadyView. Both selectors share the dark block so the values cannot diverge. */

:root {
    /* Type */
    --rl-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --rl-font-mono: 'DM Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

    /* Brand constants (theme-invariant) */
    --rl-brand-navy: #063F5B;
    --rl-brand-blue: #4DA8DA;

    /* Surfaces. --rl-canvas is the page behind cards and panels. */
    --rl-bg: #ffffff;
    --rl-bg-rgb: 255, 255, 255;
    --rl-bg-alt: #F5F7FA;
    --rl-canvas: #F5F7FA;
    --rl-canvas-rgb: 245, 247, 250;
    --rl-surface: #ffffff;
    --rl-surface-rgb: 255, 255, 255;
    --rl-surface-2: #F5F7FA;
    --rl-surface-3: #e9ecef;
    --rl-input-bg: #ffffff;

    /* Lines */
    --rl-line: #e3e6ea;
    --rl-line-strong: #d9dce1;

    /* Text */
    --rl-heading: #252930;
    --rl-heading-rgb: 37, 41, 48;
    --rl-text: #252930;
    --rl-text-muted: #5d6168;
    --rl-text-faint: #8a8f98;

    /* Accent. --rl-link is accent used as text; --rl-btn-primary is a fill under white text. */
    --rl-accent: #063F5B;
    --rl-accent-rgb: 6, 63, 91;
    --rl-accent-bright: #4DA8DA;
    --rl-link: #063F5B;
    --rl-link-hover: #0a5a82;
    --rl-btn-primary: #063F5B;
    --rl-btn-primary-hover: #0a5a82;

    /* Status, as text or icon on a surface. --rl-on-status is ink drawn on a status fill. */
    --rl-success: #17703a;
    --rl-success-rgb: 23, 112, 58;
    --rl-warning: #a15c00;
    --rl-warning-rgb: 161, 92, 0;
    --rl-danger: #b3261e;
    --rl-danger-rgb: 179, 38, 30;
    --rl-on-status: #ffffff;

    --rl-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .08);
}

html[data-theme="dark"],
body[color-theme="dark"] {
    --rl-bg: #050608;
    --rl-bg-rgb: 5, 6, 8;
    --rl-bg-alt: #0b0d10;
    --rl-canvas: #050608;
    --rl-canvas-rgb: 5, 6, 8;
    --rl-surface: #111317;
    --rl-surface-rgb: 17, 19, 23;
    --rl-surface-2: #181b21;
    --rl-surface-3: #22262d;
    --rl-input-bg: #0e1014;

    --rl-line: rgba(255, 255, 255, .09);
    --rl-line-strong: rgba(255, 255, 255, .16);

    --rl-heading: #f4f6f8;
    --rl-heading-rgb: 244, 246, 248;
    --rl-text: rgba(244, 246, 248, .86);
    --rl-text-muted: rgba(244, 246, 248, .62);
    --rl-text-faint: rgba(244, 246, 248, .42);

    --rl-accent: #4DA8DA;
    --rl-accent-rgb: 77, 168, 218;
    --rl-accent-bright: #4DA8DA;
    --rl-link: #4DA8DA;
    --rl-link-hover: #7cc2e8;
    /* #063F5B disappears into the near-black page; a lifted brand blue keeps white text legible */
    --rl-btn-primary: #1f6f99;
    --rl-btn-primary-hover: #2a83b3;

    /* The dark status colours are pastels, so ink on a status fill is dark */
    --rl-success: #7cd992;
    --rl-success-rgb: 124, 217, 146;
    --rl-warning: #ffd27a;
    --rl-warning-rgb: 255, 210, 122;
    --rl-danger: #ff8a7a;
    --rl-danger-rgb: 255, 138, 122;
    --rl-on-status: #04131c;

    --rl-shadow: 0 .75rem 2rem rgba(0, 0, 0, .45);
}