/* ═══════════════════════════════════════════════════════════
   Capplon Design System — "Philip — Vit + Beige" theme

   SUPPORTED and vendorable, unlike palettes.css — this is not a showcase
   experiment. Ludvig confirmed it directly (2026-08-14): "use the Philip
   white style with the light beige from the design system ones." It
   started life as Palette D2 inside palettes.css alongside five other
   exploratory palettes; promoted to its own file the moment a product
   owner actually asked for it by name, so a consumer isn't vendoring
   five unrequested experiments to get the one that's real.

   tokens.css's own :root remains the canonical default (teal) for any
   product that does nothing extra. THIS file is strictly additive: an
   opt-in override, applied only where a product explicitly sets
   `data-theme="philip-warm"` on `<html>`. Vendoring it changes nothing
   for a page that never sets that attribute.

   HOW TO USE:
     1. Vendor tokens.css (required, as always) + this file.
     2. Link this file AFTER tokens.css: <link rel="stylesheet" href=".../philip-warm.css">
     3. Set `<html data-theme="philip-warm">` wherever this look should
        apply — the whole document, or scope it narrower if your app
        supports multiple concurrent themes.

   White PAGE, warm beige CARDS — the inverse layering of a plainer beige
   mode: panels read as warm objects sitting on a clean ground, instead of
   white objects on a warm ground. Puts the beige where the eye actually
   rests (the content) rather than in the margins around it.

   This is the case --tn-bg-input was added for: inputs inherit the card
   colour by default, so tinting cards would swallow the very controls
   sitting on them. Pinning inputs to white keeps them crisp against the
   warm panel.

   Card fill is #FEFCFA — a soft warm white rather than a more saturated
   beige. It's a very light tint, so the card/page separation here is
   carried mostly by the BORDER rather than the fill, and --tn-bg-hover
   has to step further than the card would suggest for hover to stay
   perceptible at all.
   ═══════════════════════════════════════════════════════════ */

html[data-theme="philip-warm"] {
    --tn-primary: #14120F;
    --tn-accent: #2017DF;
    --tn-accent-hover: #09046E;
    --tn-accent-active: color-mix(in srgb, #09046E 82%, black);
    --tn-accent-light: #EEF0FE;
    --tn-accent-contrast: #fff;
    --tn-accent-rgb: 32, 23, 223;
    --tn-text-primary: #14120F;
    --tn-text-secondary: #43413F;
    /* Measured against the card fill, not white — the spec's Ink 500
       lands under AA there, so this is darkened to clear it. */
    --tn-text-muted: #726F6B;
    --tn-bg-page: #FFFFFF;
    --tn-bg-card: #FEFCFA;   /* soft warm white (Ludvig's value) */
    /* At a card this light the input is only 1.02:1 against it, so
       this is effectively a no-op today — kept because it's the
       correct wiring the moment the card fill is deepened. */
    --tn-bg-input: #FFFFFF;
    --tn-bg-hover: #F5F1EC;  /* hover has to step further than the card now */
    --tn-bg-active: #EEF0FE;
    --tn-border: #E2D9CD;    /* Beige 200 */
    --tn-border-light: #EFE9E2;
}