/* GENERATED by tests/visual/tools/bundle-css.mjs, do not edit. Mock ref da6c2fe. Flavour: tokens.
 * 275b732dd8dc00680005d154510a9c87d6b66eb8e25e973ec343d148b73f2b70  tokens.css
 * 988c00b0b731759dcfbd4d3a8bdb5781d321d3f1721b10459bb61727e9a14ad8  roles.css
 */
@layer reset, tokens, base, components, polish, utilities;

/* =========================================================================
   Devir B2B storefront mock - design tokens (3 levels), M1 Phase 1.
   1. Primitives  --p-*   raw values. The ONLY place literal colours, sizes and radii live (with roles.css).
   2. Semantic    --s-*   meaning (text, surface, spacing, motion).
   3. Component   --c-*   what a partial consumes.
   Components read --c-* or --s-*, never --p-*. Checked by scan.mjs.
   Hex values: brand book RGB values (BB p.49-51), decision D-2. Navy is #1f2447 (book), not the
   live site's #1F2448, and pink is #cf3d65, not #CF3E65 (DIRECTION section "Avoid", off-book hexes).
   Weights: 400 and 900 only (O-3, LIB-D2). Radius: 2 px only (O-3).
   ========================================================================= */

@layer tokens {
  :root {
    /* ---- 1. PRIMITIVES -------------------------------------------------- */
    --p-navy-900: #1f2447;          /* main colour, BB p.49 */
    --p-blue-700: #143673;          /* secondary blue, BB p.49 */
    --p-pink-500: #cf3d65;
    --p-pink-400: #eb7a9a;          /* error text on Maldito black, 7.2:1 */          /* highlight only, 4.66:1 on white */
    --p-pink-text-tint: #c8385a;    /* pink text on tint or error text, 4.62:1 on tint */
    --p-gold-400: #eabc54;          /* focus ring on dark grounds */
    --p-white: #ffffff;
    --p-tint-50: #f3f5fa;
    --p-tint-25: #f7f8fc;           /* cover well */
    --p-tint-navy-10: #e9eaee;      /* navy 10% on white (no-cover tile) */
    --p-line-200: #e3e6ef;          /* 1 px rules */
    --p-edge-ui: #7a8499;           /* interactive border, 3.76:1 on white */
    --p-muted-600: #5f6b85;         /* muted text, 5.35:1 on white */
    --p-slate-200: #cdd5e1;         /* muted text on dark grounds */
    --p-chip-green: #dff1e9;        /* BB green 20% tint, navy text */
    --p-chip-orange: #fbead9;       /* BB orange 20% tint, navy text */
    --p-chip-pink: #f5d8e0;         /* BB pink 20% tint, navy text */
    --p-chip-blue: #dbebf5;         /* BB light blue 20% tint, navy text */
    --p-black-950: #000000;         /* Maldito ground: the manual's black (MG manual p.10), pure */
    --p-stage-light: #858585;       /* STAGE ground, light mode: neutral grey, no hue. Every card ground sits at 3:1 or more against it (white 3.69, Devir tint 3.41, black 5.69) */
    --p-stage-dark: #747474;        /* STAGE ground, dark mode: neutral grey, no hue. The Devir dark navy card reads 3.15:1 against it, the Maldito black card and #000 more (neither vanishes nor glares) */
    --p-stage-edge-light: #707070;  /* plate rule, light */
    --p-stage-edge-dark: #8f8f8f;   /* plate rule, dark */
    --p-black-900: #141414;         /* Maldito card surface: one neutral step above the ground, no hue */
    --p-black-line: #2e2e2e;        /* neutral rules on Maldito */
    --p-red-500: #e40433;           /* Maldito red (Pantone 2035 C, MG manual p.10). Small accent only (Diana): 4.35:1 on #000, 4.83:1 under white text. Never text under 24 px, never a large fill */
    --p-white-a12: rgb(255 255 255 / 12%);
    --p-white-a24: rgb(255 255 255 / 24%);
    --p-navy-a10: rgb(31 36 71 / 10%);
    --p-navy-a45: rgb(31 36 71 / 45%);
    --p-navy-a60: rgb(31 36 71 / 60%);

    /* Devir DARK primitives (BRAND-RULES section 12). Navy family from the book navy #1f2447: every step keeps its hue, nothing is neutral grey (that is the Maldito/stage language).
       Contrast measured: text on ground 16.8, muted 9.7, edge 6.2, pink-400 6.8, gold ring 10.3 (raised card: 13.7 / 7.9 / 5.1 / 5.6 / 8.4). */
    --p-dk-950: #0b0d1e;            /* deepest: footer, facts strip on a card */
    --p-dk-900: #10132a;            /* page ground */
    --p-dk-800: #181c3a;            /* tint: tinted section, product card ground */
    --p-dk-700: #1f2447;            /* raised: the book navy itself; card on a tinted section, field, panel */
    --p-dk-600: #2b3366;            /* brand tab on a card, quiet chip */
    --p-dk-line: #323a68;           /* 1 px rules (decorative, no ratio required) */
    --p-dk-edge: #8b95b8;           /* interactive border: 6.2:1 on the ground, 5.1:1 on raised */
    --p-dk-text: #f3f5fa;           /* body text (the light tint) */
    --p-dk-muted: #b3bcd6;          /* muted text */
    --p-dk-dis-fg: #9aa4c2;         /* disabled label, 6.0:1 on raised */
    --p-dk-chip-green: #1d4a3a;     /* status chips in dark: deep tint of the book colour + light text */
    --p-dk-chip-orange: #5a3a1a;
    --p-dk-chip-pink: #5a2338;
    --p-dk-chip-blue: #1d3f5c;
    --p-white-a45: rgb(255 255 255 / 45%);
    --p-black-a40: rgb(0 0 0 / 40%);

    --p-font-graphik: "Graphik", Arial, sans-serif;   /* Arial is the book's system equivalent (BB p.52) */
    --p-weight-regular: 400;
    --p-weight-black: 900;
    --p-lh-display: 1.1;
    --p-lh-heading: 1.2;
    --p-lh-body: 1.5;
    --p-lh-tight: 1;
    --p-track-display: -0.02em;
    --p-track-label: 0.08em;
    --p-measure-lead: 60ch;
    --p-measure-body: 64ch;

    /* 4..96 spacing and size scale, in px */
    --p-zero: 0px;
    --p-1: 1px;
    --p-2: 2px;
    --p-3: 3px;
    --p-4: 4px;
    --p-6: 6px;
    --p-8: 8px;
    --p-10: 10px;
    --p-12: 12px;
    --p-14: 14px;
    --p-16: 16px;
    --p-20: 20px;
    --p-24: 24px;
    --p-32: 32px;
    --p-40: 40px;
    --p-44: 44px;
    --p-48: 48px;
    --p-52: 52px;
    --p-56: 56px;
    --p-64: 64px;
    --p-72: 72px;
    --p-80: 80px;
    --p-96: 96px;
    --p-100: 100px;
    --p-104: 104px;
    --p-112: 112px;
    --p-120: 120px;
    --p-160: 160px;
    --p-180: 180px;
    --p-200: 200px;
    --p-240: 240px;
    --p-280: 280px;
    --p-320: 320px;
    --p-360: 360px;
    --p-400: 400px;
    --p-480: 480px;
    --p-560: 560px;
    --p-640: 640px;
    --p-1280: 1280px;

    --p-dur-fast: 120ms;
    --p-dur-in: 200ms;
    --p-dur-out: 150ms;
    --p-dur-reveal: 240ms;
    --p-dur-added: 1500ms;
    --p-dur-slab: 400ms;            /* round 4: Maldito slab and hero entrance, once, never a loop (the only motion above 300 ms) */
    --p-dur-press: 120ms;           /* hard-shadow press and stepper press */
    --p-ease-settle: cubic-bezier(0.34, 1.4, 0.64, 1);   /* round 4: one soft overshoot, only for settles (slab rotate, confirmation tick, stepper bump) */
    --p-lift-x: 2px; --p-lift-y: 3px;                     /* hard-shadow lift on hover: the face moves 2 x 3 px away from its shadow, the shadow stays put */
    --p-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* ---- 2. SEMANTIC ----------------------------------------------------- */
    --s-font: var(--p-font-graphik);
    --s-weight-body: var(--p-weight-regular);
    --s-weight-strong: var(--p-weight-black);

    --s-text: var(--dv-text);
    --s-text-muted: var(--dv-muted);
    --s-text-on-dark: var(--p-white);
    --s-text-on-dark-muted: var(--p-slate-200);
    --s-text-error: var(--dv-error);
    --s-surface: var(--dv-ground);
    --s-surface-tint: var(--dv-tint);
    --s-surface-well: var(--p-tint-25);
    --s-surface-navy: var(--p-navy-900);
    --s-surface-black: var(--p-black-950);
    --s-rule: var(--dv-rule);
    --s-rule-strong: var(--dv-rule-strong);
    --s-edge: var(--dv-edge);
    --s-accent: var(--p-pink-500);
    --s-focus-on-light: var(--dv-focus);
    --s-focus-on-dark: var(--p-gold-400);

    --s-rule-w: var(--p-1);
    --s-rule-w-2: var(--p-2);
    --s-ring-w: var(--p-3);
    --s-ring-offset: var(--p-2);
    --s-radius: var(--p-2);             /* the only radius (O-3) */
    --s-radius-dot: 50%;                /* dots only */
    --s-target: var(--p-44);
    --s-control: var(--p-48);

    --s-sp-1: var(--p-4);
    --s-sp-2: var(--p-8);
    --s-sp-3: var(--p-12);
    --s-sp-4: var(--p-16);
    --s-sp-5: var(--p-24);
    --s-sp-6: var(--p-32);
    --s-sp-7: var(--p-48);
    --s-sp-8: var(--p-64);
    --s-sp-9: var(--p-80);

    --s-wrap: var(--p-1280);
    --s-gutter: var(--p-16);
    --s-section: var(--p-48);
    --s-dur: var(--p-dur-fast);
    --s-ease: var(--p-ease);

    /* ---- 3. COMPONENT ---------------------------------------------------- */
    /* chrome: 32 + 72 = 104 at 1440, 56 + 52 = 108 at 390 */
    --c-promo-h: var(--p-32);
    --c-header-row: var(--p-56);
    --c-header-search-row: var(--p-52);
    --c-logo-h: var(--p-24);
    --c-lockup-head: calc(var(--c-logo-h) * 0.8); /* Maldito symbol in the Devir header: head only (manual p.6), 19 px on phones, 26 px on desktop, never under 15 px */
    --c-lockup-clear: calc(var(--c-lockup-head) / 2); /* manual clear space = half the head height */
    --c-skiplink-w: var(--p-1);

    --c-btn-h: var(--p-48);
    --c-btn-pad: var(--p-24);
    --c-btn-hover-bg: var(--dv-btn-hover);
    --c-btn-hover-fg: var(--dv-on-btn);
    --c-btn-bg: var(--dv-btn);
    --c-btn-fg: var(--dv-on-btn);
    --c-btn-inverse-bg: var(--p-white);
    --c-btn-inverse-fg: var(--p-navy-900);
    --c-btn-disabled-bg: var(--dv-dis-bg);
    --c-btn-disabled-fg: var(--dv-dis-fg);
    --c-btn-disabled-edge: var(--dv-dis-edge);

    --c-field-h: var(--p-48);
    --c-field-edge: var(--dv-edge);
    --c-field-err: var(--dv-error);
    --c-field-disabled-bg: var(--dv-dis-bg);

    --c-chip-bg: var(--dv-tint);
    --c-chip-in: var(--dv-chip-green);
    --c-chip-out: var(--dv-chip-pink);
    --c-chip-warn: var(--dv-chip-orange);
    --c-chip-info: var(--dv-chip-blue);

    --c-cover-well: var(--p-tint-25);        /* the cover always sits on a light plate, in both modes (Maldito rule too) */
    --c-panel-well: var(--dv-well);
    --c-cover-row: var(--p-72);
    --c-cover-mini: var(--p-56);
    --c-cover-ac: var(--p-40);
    --c-nocover-bg: var(--dv-nocover);
    --c-nocover-ink: var(--dv-text);
    --c-nocover-mark: var(--dv-nocover-mark);

    --c-tick-w: var(--p-24);
    --c-tick-h: var(--p-4);
    --c-overlay-edge: var(--dv-rule);
    --c-overlay-shadow: 0 var(--p-8) var(--p-24) var(--dv-overlay-shadow);   /* variant A (default): hairline + one soft shadow */
    --c-overlay-top-w: var(--p-1);
    --c-overlay-top: var(--dv-rule);

    --c-maldito-bg: var(--p-black-950);
    --c-maldito-surface: var(--p-black-900);
    --c-maldito-line: var(--p-black-line);
    --c-maldito-red: var(--p-red-500);
    --c-footer-bg: var(--dv-footer);
    --c-footer-rule: var(--p-white-a24);
    --c-hero-ratio-d: 5 / 1;
    --c-hero-ratio-m: 1080 / 880;
  }

  /* Devir role tokens --dv-*: one light-dark() line per role, light first (unchanged values), then dark. Same technique as the Maldito --mg-* roles: html sets color-scheme
     from data-theme (base.css), the browser resolves the pair on the element that uses it. The --s-* / --c-* tokens below read these roles and are re-declared from them
     in the light-surface reset further down, so a Devir surface inside a Maldito scope follows the mode too. */
  :root {
    --dv-ground: light-dark(var(--p-white), var(--p-dk-900));
    --dv-tint: light-dark(var(--p-tint-50), var(--p-dk-800));
    --dv-raised: light-dark(var(--p-white), var(--p-dk-700));          /* a card on a tinted section, a panel, a field */
    --dv-text: light-dark(var(--p-navy-900), var(--p-dk-text));
    --dv-muted: light-dark(var(--p-muted-600), var(--p-dk-muted));
    --dv-rule: light-dark(var(--p-line-200), var(--p-dk-line));
    --dv-rule-strong: light-dark(var(--p-navy-900), var(--p-dk-text));
    --dv-edge: light-dark(var(--p-edge-ui), var(--p-dk-edge));
    --dv-focus: light-dark(var(--p-navy-900), var(--p-gold-400));
    --dv-error: light-dark(var(--p-pink-text-tint), var(--p-pink-400));
    --dv-btn: light-dark(var(--p-navy-900), var(--p-white));           /* primary fill: navy on light, white on dark (pink is never a fill) */
    --dv-on-btn: light-dark(var(--p-white), var(--p-navy-900));
    --dv-btn-hover: light-dark(var(--p-blue-700), var(--p-slate-200));
    --dv-dis-bg: light-dark(var(--p-tint-50), var(--p-dk-700));
    --dv-dis-fg: light-dark(var(--p-muted-600), var(--p-dk-dis-fg));
    --dv-dis-edge: light-dark(var(--p-line-200), var(--p-dk-line));
    --dv-hover: light-dark(var(--p-navy-a08), var(--p-white-a12));
    --dv-quiet: light-dark(var(--p-tint-navy-10), var(--p-dk-600));
    --dv-well: light-dark(var(--p-tint-25), var(--p-dk-700));          /* a panel with text on the lightest step (stats, price maths, notes); a cover well stays light (--c-cover-well) */
    --dv-nocover: light-dark(var(--p-tint-navy-10), var(--p-dk-700));
    --dv-nocover-mark: light-dark(var(--p-navy-a45), var(--p-white-a45));
    --dv-chip-green: light-dark(var(--p-chip-green), var(--p-dk-chip-green));
    --dv-chip-orange: light-dark(var(--p-chip-orange), var(--p-dk-chip-orange));
    --dv-chip-pink: light-dark(var(--p-chip-pink), var(--p-dk-chip-pink));
    --dv-chip-blue: light-dark(var(--p-chip-blue), var(--p-dk-chip-blue));
    --dv-footer: light-dark(var(--p-navy-900), var(--p-dk-950));
    --dv-block: light-dark(var(--p-tint-50), var(--p-dk-700));         /* card foot block: tint on light (unchanged), raised on dark */
    --dv-strip: light-dark(var(--p-navy-900), var(--p-dk-950));        /* facts strip on a card */
    --dv-tab: light-dark(var(--p-navy-900), var(--p-dk-600));          /* brand tab on a card */
    --dv-overlay-shadow: light-dark(var(--p-navy-a10), var(--p-black-a40));
  }

  /* Overlay elevation, owner decision O-Q4: A = hairline + one soft shadow, B = hairline only + 2 px navy top rule.
     Switch the whole page with ?elev=b (include.js sets data-elevation on <html>) or one subtree with data-elevation. */
  [data-elevation="a"] { --c-overlay-shadow: 0 var(--p-8) var(--p-24) var(--dv-overlay-shadow); --c-overlay-top-w: var(--p-1); --c-overlay-top: var(--dv-rule); }
  [data-elevation="b"] { --c-overlay-shadow: none; --c-overlay-top-w: var(--p-2); --c-overlay-top: var(--dv-rule-strong); }

  @media (min-width: 768px) {
    :root {
      --c-header-row: var(--p-72);
      --c-logo-h: var(--p-32);
      --c-header-search-row: var(--p-zero);
    }
  }
}

/* ---- Round 2 additions (owner review: surfaces, states, brand tags, Maldito mode) ---- */
@layer tokens {
  :root {
    --p-green-500: #60b790;         /* BB green, BGG rating hexagon only */
    --p-orange-500: #eb9840;        /* BB orange, BGG weight icon only */
    --p-slate-500: #8a96ab;         /* 6.0:1 on Maldito black: edges and muted icons there */
    --p-navy-a08: rgb(31 36 71 / 8%);
    --p-navy-a16: rgb(31 36 71 / 16%);
    --p-dur-hover: 160ms;
    --p-dur-lift: 200ms;
    --s-dur: var(--p-dur-hover);
    --c-card-bg: var(--dv-tint);
    --c-card-ink: var(--dv-text);
    --c-card-ink-muted: var(--dv-muted);
    --c-card-line: var(--dv-rule);
    --c-card-hover: var(--dv-hover);
    --c-card-pad: var(--p-12);
    --c-badge-fg: var(--dv-text);
    --c-hover-tint: var(--dv-hover);
    --c-lift: calc(-1 * var(--p-2));
    --c-compact-cover: var(--p-120);
    --c-brandtag-h: var(--p-40);
    --c-tag-devir-bg: transparent;
    --c-tag-maldito-bg: transparent;
    --c-hex-size: var(--p-32);
    --c-chip-quiet: var(--dv-quiet);
  }
  /* Maldito modes (owner decision, Direction 1 "Manual-faithful"; BRAND-RULES section 10).
     Two layers. (1) ROLES --mg-*: one line per role, light first then dark, resolved by light-dark() on the element that USES the token, so the
     Devir surfaces (colour-scheme normal = light) never move. (2) the Maldito SCOPE below maps the roles onto the shared --s-* / --c-* tokens.
     The scope is <main data-brand="maldito">, body[data-brand="maldito"], [data-surface="maldito"] (specimens) and the Maldito card/row surfaces;
     header, footer, drawers and overlays stay Devir because they re-declare the Devir set (reset block further down).
     Mode: html[data-theme="auto|light|dark"] (include.js, review-bar toggle); no attribute = auto = prefers-color-scheme. */
  :root {
    --p-mg-grey-100: #f1f1f1;             /* the manual's own light ground (p.19, p.20, p.21) */
    --p-mg-ink-2-light: #4d4d4d;          /* secondary text, 7.5:1 on the grey ground, 8.5:1 on white */
    --p-mg-ink-2-dark: #a6a6a6;           /* secondary text, 8.6:1 on black, 7.6:1 on #141414 */
    --p-mg-line-light: #d9d9d9;           /* hairlines on the light side */
    --p-mg-edge-light: #707070;           /* control edges, 4.2:1 on the grey ground, 4.9:1 on white */
    --p-mg-dis-bg-light: #d9d9d9;
    --p-mg-dis-fg-light: #5c5c5c;         /* 4.7:1 on its fill */
    --p-mg-dis-bg-dark: #262626;
    --p-mg-dis-fg-dark: #8c8c8c;          /* 4.5:1 on its fill */
    --p-mg-error-light: #c0304f;          /* error text on the grey or white Maldito ground: 4.9:1 / 5.6:1 */
    --p-mg-pale-red: #ffe5ea;             /* hover tint on a white control sitting on red */
    --p-mg-red-deep: #7a0019;             /* disabled label on red; pressed red Add */
    --p-mg-red-hover: #b00230;            /* hovered red Add: a visibly deeper red, white label 7.3:1 */
    --p-black-a06: rgb(0 0 0 / 6%);
    --p-black-a24: rgb(0 0 0 / 24%);
    --p-black-a60: rgb(0 0 0 / 60%);
    --p-white-a55: rgb(255 255 255 / 55%);
    --p-white-a85: rgb(255 255 255 / 85%);
    --p-shape-bleed: polygon(0 9%, 100% 0, 100% 100%, 0 100%);                      /* manual p.21 example 1: a slab running to the bleed */
    --p-shape-card: polygon(0 0.6%, 100% 0, 99.3% 100%, 0.4% 99.2%);                /* manual p.17 shape relaxed for a repeated element */
    --p-shape-sphere: 49% 51% 50% 50% / 51% 49% 51% 49%;                            /* manual p.18: circle with an organic contour */
    --p-track-btn: 0.04em;                                                          /* manual p.19: button labels in caps, slightly open */
    --p-slab-pad: 0.18em 0.5em 0.2em 0.4em;                                         /* title slab: padding around a display heading */
    --p-shape-off-sm-x: 4px; --p-shape-off-sm-y: 6px;                               /* hard shadow, buttons (measured at the 157 px COMPRAR) */
    --p-shape-off-md-x: 7px; --p-shape-off-md-y: 9px;                               /* cards, discs, title slabs */
    --p-shape-off-lg-x: 12px; --p-shape-off-lg-y: 14px;                             /* large slabs */

    --mg-ground: light-dark(var(--p-mg-grey-100), var(--p-black-950));
    --mg-surface: light-dark(var(--p-white), var(--p-black-900));
    --mg-ink: light-dark(var(--p-black-950), var(--p-white));
    --mg-ink-2: light-dark(var(--p-mg-ink-2-light), var(--p-mg-ink-2-dark));
    --mg-line: light-dark(var(--p-mg-line-light), var(--p-black-line));
    --mg-edge: light-dark(var(--p-mg-edge-light), var(--p-slate-500));
    --mg-hard: light-dark(var(--p-black-950), var(--p-white));          /* hard shadow under a slab that sits on the ground */
    --mg-neutral: light-dark(var(--p-black-950), var(--p-white));       /* neutral slab and button: black on light, white on dark */
    --mg-on-neutral: light-dark(var(--p-white), var(--p-black-950));
    --mg-dis-bg: light-dark(var(--p-mg-dis-bg-light), var(--p-mg-dis-bg-dark));
    --mg-dis-fg: light-dark(var(--p-mg-dis-fg-light), var(--p-mg-dis-fg-dark));
    --mg-tint: light-dark(var(--p-black-a06), var(--p-white-a12));      /* hover wash */
    --mg-pattern: light-dark(var(--p-black-a60), var(--p-white-a85));   /* times the SVG's own 5% alpha */
    --mg-strip: light-dark(var(--p-black-950), var(--p-black-900));     /* facts strip: black on the grey ground, one step above black in dark */
    --mg-red: var(--p-red-500);
    --mg-on-red: var(--p-white);                                         /* 4.81:1 */
    --mg-red-hover: var(--p-mg-red-hover);
    --mg-red-press: var(--p-mg-red-deep);
  }
  /* Colour scheme only inside the Maldito scope. :where() keeps specificity at zero so the Devir pins below always win. */
  :where([data-brand="maldito"], [data-surface="maldito"], .dv-tile.is-maldito, .dv-card.is-maldito, .dv-crow.is-maldito, .dv-mega:has(.dv-mega__cat--maldito:hover), .dv-mega:has(.dv-mega__cat--maldito:focus-visible)) { color-scheme: light dark; }
  :where(html[data-theme="light"]) :where([data-brand="maldito"], [data-surface="maldito"], .dv-tile.is-maldito, .dv-card.is-maldito, .dv-crow.is-maldito, .dv-mega:has(.dv-mega__cat--maldito:hover), .dv-mega:has(.dv-mega__cat--maldito:focus-visible)) { color-scheme: light; }
  :where(html[data-theme="dark"]) :where([data-brand="maldito"], [data-surface="maldito"], .dv-tile.is-maldito, .dv-card.is-maldito, .dv-crow.is-maldito, .dv-mega:has(.dv-mega__cat--maldito:hover), .dv-mega:has(.dv-mega__cat--maldito:focus-visible)) { color-scheme: dark; }

  [data-brand="maldito"],
  [data-surface="maldito"],
  .dv-tile.is-maldito,
  .dv-mega:has(.dv-mega__cat--maldito:hover),
  .dv-mega:has(.dv-mega__cat--maldito:focus-visible) {
    --s-surface: var(--mg-ground);
    --s-surface-tint: var(--mg-surface);
    --s-text: var(--mg-ink);
    --s-text-muted: var(--mg-ink-2);
    --s-rule: var(--mg-line);
    --s-rule-strong: var(--mg-ink);
    --s-edge: var(--mg-edge);
    --s-accent: var(--mg-red);
    --s-font: var(--p-font-maldito-text);
    --c-shape-fill: var(--mg-red);
    --c-shape-ink: var(--mg-on-red);
    --c-shape-shadow: var(--mg-hard);
    --s-focus-on-light: var(--mg-ink);
    --s-text-error: light-dark(var(--p-mg-error-light), var(--p-pink-400));
    --c-field-err: var(--s-text-error);
    --c-card-bg: var(--mg-surface);
    --c-card-ink: var(--mg-ink);
    --c-card-ink-muted: var(--mg-ink-2);
    --c-card-line: var(--mg-line);
    --c-card-hover: var(--mg-tint);
    --c-card-hover-btn: var(--mg-red);                 /* black/white buttons turn red on hover only (Diana) */
    --c-btn-bg: var(--mg-neutral);
    --c-btn-fg: var(--mg-on-neutral);
    --c-btn-hover-bg: var(--mg-red);
    --c-btn-hover-fg: var(--mg-on-red);
    --c-btn-disabled-bg: var(--mg-dis-bg);
    --c-btn-disabled-fg: var(--mg-dis-fg);
    --c-btn-disabled-edge: var(--mg-dis-bg);
    --c-hover-tint: var(--mg-tint);
    --c-nocover-bg: var(--mg-surface); --c-nocover-ink: var(--mg-ink);
    --c-chip-quiet: var(--mg-line);
    --c-field-edge: var(--mg-edge);
    --c-field-disabled-bg: var(--mg-surface);
    --m-btn-hover: var(--mg-red);
    --m-hover-bg: var(--mg-tint);
    --m-cover-bg: var(--p-white);
    --mg-badge-bg: var(--mg-surface);
  }
}

@layer tokens {
  /* Tinted section (white cards): the card sets its own ground AND its own ink together, so nothing depends on the ink of the section around it.
     [data-surface="devir"] forces the Devir light surface on any element, even inside a Maldito scope (mixed case). Placed after the brand rule so it wins. */
  .dv-section.is-tint, [data-surface="white"] { --c-card-bg: var(--dv-raised); --c-card-ink: var(--dv-text); --c-card-ink-muted: var(--dv-muted); --c-card-line: var(--dv-rule); --c-card-hover: var(--dv-hover); --c-chip-quiet: var(--dv-quiet); }
  [data-surface="devir"] { --c-card-bg: var(--dv-tint); --c-card-ink: var(--dv-text); --c-card-ink-muted: var(--dv-muted); --c-card-line: var(--dv-rule); --c-card-hover: var(--dv-hover); --c-chip-quiet: var(--dv-quiet); }
}

@layer tokens {
  /* Light-surface reset: a light or tint surface inside a Maldito scope (and the page header and footer on body[data-brand]) re-declares EVERY token the Maldito set changes. */
  [data-surface="light"], [data-surface="tint"], [data-surface="devir"],
  [data-brand="maldito"] :is(.dv-header, .dv-footer, .dv-minicart, .dv-mega:not(:has(.dv-mega__cat--maldito:hover, .dv-mega__cat--maldito:focus-visible)), .dv-drawer) {
    /* No colour-scheme pin: a Devir surface follows the mode (html[data-theme]) like the page around it; the --dv-* roles pick light or dark. */
    --c-btn-hover-fg: var(--dv-on-btn); --c-card-hover-btn: var(--c-card-ink-muted); --mg-badge-bg: var(--dv-chip-green);
    --s-surface: var(--dv-ground); --s-surface-tint: var(--dv-tint); --s-text: var(--dv-text); --s-text-muted: var(--dv-muted);
    --s-rule: var(--dv-rule); --s-rule-strong: var(--dv-rule-strong); --s-edge: var(--dv-edge); --s-accent: var(--p-pink-500);
    --s-focus-on-light: var(--dv-focus); --s-text-error: var(--dv-error); --c-field-err: var(--dv-error);
    --c-card-bg: var(--dv-tint); --c-card-ink: var(--dv-text); --c-card-ink-muted: var(--dv-muted); --c-card-line: var(--dv-rule); --c-card-hover: var(--dv-hover);
    --c-btn-bg: var(--dv-btn); --c-btn-fg: var(--dv-on-btn); --c-btn-hover-bg: var(--dv-btn-hover);
    --c-btn-disabled-bg: var(--dv-dis-bg); --c-btn-disabled-fg: var(--dv-dis-fg); --c-btn-disabled-edge: var(--dv-dis-edge);
    --c-hover-tint: var(--dv-hover); --c-nocover-bg: var(--dv-nocover); --c-nocover-ink: var(--dv-text); --c-chip-quiet: var(--dv-quiet);
    --c-field-edge: var(--dv-edge); --c-field-disabled-bg: var(--dv-dis-bg);
    --m-btn-hover: var(--dv-btn-hover); --m-hover-bg: var(--dv-quiet); --m-cover-bg: var(--p-tint-25);
  }
}

/* ---- Product card, two translations (TV#153). Variant switch: data-card="a" (Library-faithful) or "b" (square), on <html> (include.js, ?v=) or on any wrapper.
   Library values, measured in library/design/mock/tokens.css: card radius 8 (--s-radius-card), well and panel radius 6, pill radius 4, pill 34 px navy straddling the top edge,
   card shadow 0 20px 40px -18px navy 25%, panel dark slate with white 10% hairlines. Without data-card the B values are the defaults (they are the approved square rules). ---- */
@layer tokens {
  :root {
    --p-36: 36px;
    --p-radius-4: 4px; /* ref-A: comparison reference only (variant A), never a default */
    --p-radius-6: 6px; /* ref-A: comparison reference only (variant A), never a default */
    --p-radius-8: 8px; /* ref-A: comparison reference only (variant A), never a default */
    --p-navy-a25: rgb(31 36 71 / 25%);
    --p-shadow-card-soft: 0 20px 40px -18px var(--p-navy-a25);
    --p-tab-lift: -20px;
    --p-track-label-tight: 0.04em;
    --c-pc-tab-h: var(--p-44);
    --c-pc-gap: var(--s-sp-3);
  }
  /* Variant B (square translation): 2 px corners, no shadow, tint ground, tab flush in the corner. */
  :root, [data-card="b"] {
    --c-pc-radius: var(--s-radius);
    --c-pc-radius-in: var(--s-radius);
    --c-pc-radius-tab: var(--s-radius);
    --c-pc-shadow: none;
    --c-pc-ground: var(--dv-tint);
    --c-pc-border: transparent;
    --c-pc-tab-inset: calc(-1 * var(--c-card-pad));
  }
  /* Variant A (Library-faithful): measured Library radii, one soft shadow, white ground with a hairline, tab straddling the top edge. */
  [data-card="a"] {
    --c-pc-radius: var(--p-radius-8);
    --c-pc-radius-in: var(--p-radius-6);
    --c-pc-radius-tab: var(--p-radius-4);
    --c-pc-shadow: var(--p-shadow-card-soft);
    --c-pc-ground: var(--dv-raised);
    --c-pc-border: var(--dv-rule);
  }
  /* Surface sets: a card paints its own ground AND ink together (nothing inherits across a ground change). */
  .dv-card, .dv-crow {
    --c-pc-ink: var(--dv-text);
    --c-pc-muted: var(--dv-muted);
    --c-pc-line: var(--dv-rule);
    --c-pc-edge-ui: var(--dv-edge);
    --c-pc-hover: var(--dv-hover);
    --c-pc-focus: var(--dv-focus);
    --c-pc-plate: var(--p-white);
    --c-pc-plate-line: var(--p-line-200);
    --c-pc-plate-ink: var(--p-navy-900);
    --c-pc-nocover: var(--dv-nocover);
    --c-pc-strip: var(--dv-strip);
    --c-pc-strip-ink: var(--p-white);
    --c-pc-strip-label: var(--p-slate-200);
    --c-pc-strip-rule: var(--p-white-a24);
    --c-pc-ic: var(--p-slate-200);
    --c-pc-ic-rate: var(--p-green-500);
    --c-pc-ic-weight: var(--p-orange-500);
    --c-pc-ic-owned: var(--p-pink-400);
    --c-pc-tab: var(--dv-tab);
    --s-font: var(--p-font-graphik); --c-shape-fill: var(--p-red-500); --c-shape-ink: var(--p-white); --c-shape-shadow: var(--p-black-950);
    --c-pc-tab-edge: var(--dv-tab);
    --c-pc-btn: var(--dv-btn);
    --c-pc-btn-fg: var(--dv-on-btn);
    --c-pc-btn-hover: var(--dv-btn-hover);
    --c-pc-dis-bg: var(--dv-dis-bg);
    --c-pc-dis-fg: var(--dv-dis-fg);
    --c-pc-dis-edge: var(--dv-dis-edge);
    --c-pc-chip-quiet: var(--dv-quiet);
    --c-pc-block: var(--dv-block);
  }
  .dv-card.is-maldito, .dv-crow.is-maldito,
  [data-brand="maldito"] :is(.dv-card, .dv-crow):not(:is([data-surface="devir"], [data-surface="light"], [data-surface="tint"], [data-surface="white"]) *) {
    --c-pc-ground: var(--mg-surface);
    --c-pc-border: transparent;           /* the slab (manual p.17 shape + hard shadow) is the edge, see maldito-graphic.css */
    --c-pc-ink: var(--mg-ink);
    --c-pc-muted: var(--mg-ink-2);
    --c-pc-line: var(--mg-line);
    --c-pc-edge-ui: var(--mg-edge);
    --c-pc-hover: var(--mg-tint);
    --c-pc-focus: var(--mg-ink);
    --c-pc-plate: var(--p-white);         /* the cover sits on a white plate in both modes */
    --c-pc-plate-line: var(--mg-line);
    --c-pc-plate-ink: var(--p-black-950);
    --c-pc-strip: var(--p-black-950);     /* the stats strip is black in both modes */
    --c-pc-strip-ink: var(--p-white);
    --c-pc-strip-label: var(--p-mg-ink-2-dark);   /* neutral grey, not the bluish slate of the Devir ink-on-dark */
    --c-pc-strip-rule: var(--p-black-line);
    --c-pc-ic: var(--p-white);
    --c-pc-ic-rate: var(--c-pc-ic);       /* manual p.15: no non-corporate colours; the tone icons (green, orange, pink) are Devir book colours, so the strip icons are white here */
    --c-pc-ic-weight: var(--c-pc-ic);
    --c-pc-ic-owned: var(--c-pc-ic);
    --c-pc-tab: var(--p-black-950);
    --c-pc-tab-edge: var(--p-black-950);
    --c-pc-shadow: none;                  /* no soft shadow on Maldito (manual: only hard shadows exist here) */
    --c-pc-btn: var(--mg-neutral);
    --c-pc-btn-fg: var(--mg-on-neutral);
    --c-pc-btn-hover: var(--mg-red);
    --c-pc-btn-hover-fg: var(--mg-on-red);
    --c-pc-dis-bg: var(--mg-dis-bg);
    --c-pc-dis-fg: var(--mg-dis-fg);
    --c-pc-dis-edge: var(--mg-dis-bg);
    --c-pc-chip-quiet: var(--mg-line);
    --c-pc-block: var(--mg-ground);
    --c-shape-shadow: var(--mg-hard);
  }
}

/* Fluid spacing (TV#153): same 320..1600 px scale as the type roles; the first definitions above are the maximum values. */
@layer tokens {
  :root {
    --s-sp-1: 4px;
    --s-sp-2: clamp(6px, calc(5.500px + 0.1562vw), 8px);
    --s-sp-3: clamp(8px, calc(7.000px + 0.3125vw), 12px);
    --s-sp-4: clamp(12px, calc(11.000px + 0.3125vw), 16px);
    --s-sp-5: clamp(16px, calc(14.000px + 0.6250vw), 24px);
    --s-sp-6: clamp(20px, calc(17.000px + 0.9375vw), 32px);
    --s-sp-7: clamp(28px, calc(23.000px + 1.5625vw), 48px);
    --s-sp-8: clamp(36px, calc(29.000px + 2.1875vw), 64px);
    --s-sp-9: clamp(44px, calc(35.000px + 2.8125vw), 80px);
    --s-gutter: clamp(16px, calc(14.000px + 0.6250vw), 24px);
    --s-section: clamp(40px, calc(30.000px + 3.1250vw), 80px);
    --c-card-pad: clamp(8px, calc(7.000px + 0.3125vw), 12px);
    --c-pc-gap: clamp(6px, calc(5px + 0.15vw), 8px);
  }
}

@layer tokens {
  :root {
    /* Hit-area padding for text links: tops a one-line link up to the 44 px target whatever the fluid scale does (lh is resolved on the element that uses it). */
    --s-hit: calc((var(--s-target) - 1lh) / 2);
  }
}

@layer tokens {
  :root {
    --c-pc-pad: clamp(var(--p-8), calc(5.45vw - 7.27px), var(--p-14)); /* Library card padding is 14 px, reached at a 390 px viewport; 8 px on the narrowest phones so the 1.4 height cap and the buy zone still fit */
    --c-pc-gap-in: clamp(4px, calc(3.4px + 0.1vw), 6px); /* rhythm: tight interval inside a group (title, chip, line, SKU) */
    --c-pc-gap-group: clamp(var(--p-8), calc(5.45vw - 7.27px), var(--p-14)); /* rhythm: generous interval between groups (identity, facts strip, buy zone) */
  }
}

/* Maldito graphic language (MG manual p.15-22, Diana's direction, BRAND-RULES section 10). Geometry measured from the manual's own vector shapes (p.17 main shape, p.19 CTAs).
   Shapes are clip-path polygons on pseudo-elements; the hard shadow is the same polygon on an offset layer. No blur, no gradient, no filter. */
@layer tokens {
  :root {
    --p-font-comic: "Comic Hunter", var(--p-font-graphik);    /* display face: titles and highlights at 24 px or more, never text */
    --p-font-maldito-text: var(--p-font-graphik);              /* Roc Grotesk is pending (not supplied): swap this ONE value ("Roc Grotesk", Graphik) once the files arrive */
    --p-track-comic: 0.01em;
    --p-shape-main: polygon(0 0, 100% 5.8%, 98.2% 96.6%, 4% 100%);   /* manual p.17, main shape */
    --p-shape-cta: polygon(1.8% 3.4%, 96% 0, 100% 100%, 0 94.2%);    /* manual p.19, COMPRAR */
    --p-shape-more: polygon(0 5%, 100% 0, 96% 98%, 2.8% 100%);       /* manual p.19, MAS INFO */
    --p-shape-dx: 4px;                                               /* manual p.19: hard shadow offset, 4 px right and 6 px down at the 157 px button */
    --p-shape-dy: 6px;
    --p-pattern-w: 204px;                                            /* manual p.20 eyes pattern tile, drawn at 2x */
    --p-pattern-h: 85px;
    --c-shape-fill: var(--p-red-500);
    --c-shape-ink: var(--p-white);
    --c-shape-shadow: var(--p-black-950);
    --c-shape-dx: var(--p-shape-dx);
    --c-shape-dy: var(--p-shape-dy);
    --c-shape-slab-w: var(--p-64);
    --c-shape-slab-h: var(--p-8);
  }
}

/* =========================================================================
   Typographic roles (DIRECTION section 2). Graphik Regular 400 and Black 900 only.
   One font shorthand token per role, one class per role. Sentence case; uppercase only
   for the 12 px label. Components use the class or the --t-* token, never a literal size.
   ========================================================================= */

@layer tokens {
  :root, [data-brand="maldito"]:not([data-surface]), body[data-brand="maldito"] .pdp-id {
    /* Re-declared inside the Maldito scope so the roles re-resolve --s-font there (Roc Grotesk swap point); light surfaces and the Devir header keep :root.
       Fluid type (TV#153): every role is clamp(min, preferred, max) driven by the viewport between 320 and 1600 px (linear), never below 12 px, Graphik 400 and 900 only.
       Components that live in a container (cards, rows, strip, footer zone) refine it with cqi in their own CSS. */
    --t-display: 900 clamp(30px, calc(25.500px + 1.4062vw), 48px) / 1.1 var(--s-font);
    --t-title: 900 clamp(24px, calc(22.000px + 0.6250vw), 32px) / 1.15 var(--s-font);
    --t-heading: 900 clamp(18px, calc(16.500px + 0.4688vw), 24px) / 1.2 var(--s-font);
    --t-heading-sm: 900 clamp(14px, calc(13.500px + 0.1562vw), 16px) / 1.25 var(--s-font);
    --t-lead: 400 clamp(16px, calc(15.500px + 0.1562vw), 18px) / 1.5 var(--s-font);
    --t-body: 400 clamp(15px, calc(14.750px + 0.0781vw), 16px) / 1.5 var(--s-font);
    --t-small: 400 clamp(13px, calc(12.750px + 0.0781vw), 14px) / 1.45 var(--s-font);
    --t-label: 400 12px / 1.4 var(--s-font);
    --t-price: 900 clamp(16px, calc(15.500px + 0.1562vw), 18px) / 1.2 var(--s-font);
    --t-price-lead: 900 clamp(20px, calc(19.000px + 0.3125vw), 24px) / 1.2 var(--s-font);
    --t-price-pdp: 900 clamp(26px, calc(24.500px + 0.4688vw), 32px) / 1.1 var(--s-font);
    --t-button: 900 clamp(14px, calc(13.500px + 0.1562vw), 16px) / 1.2 var(--s-font);
    --t-nav: 400 clamp(14px, calc(13.500px + 0.1562vw), 16px) / 1.3 var(--s-font);
    --t-numeral: 900 clamp(36px, calc(33.000px + 0.9375vw), 48px) / 1 var(--s-font);
    --t-rank-lg: 900 clamp(36px, calc(31.000px + 1.5625vw), 56px) / 0.9 var(--s-font);
    --t-rank-md: 900 clamp(32px, calc(28.000px + 1.2500vw), 48px) / 0.9 var(--s-font);
    --t-rank-sm: 900 clamp(26px, calc(24.500px + 0.4688vw), 32px) / 0.9 var(--s-font);
    --t-rank-xs: 900 clamp(18px, calc(17.500px + 0.1562vw), 20px) / 0.9 var(--s-font);
    --t-hex: 900 14px / 1 var(--s-font);
    --t-poster: 900 clamp(16px, calc(14.500px + 0.4688vw), 22px) / 1.1 var(--s-font);
  }
  /* Maldito display roles (Comic Hunter, one weight). Titles and highlights only, never below 24 px: the face is capitals-only with a small body. */
  :root {
    --t-mg-display: 400 clamp(32px, calc(26.000px + 1.8750vw), 56px) / 1.05 var(--p-font-comic);
    --t-mg-title: 400 clamp(26px, calc(22.000px + 1.2500vw), 40px) / 1.1 var(--p-font-comic);
    --f-mg-hero: clamp(52px, calc(32px + 4.4vw), 112px);   /* red display type on a product page: 52 px or more (Diana's red rule) */
    --t-mg-hero: 400 var(--f-mg-hero) / 0.98 var(--p-font-comic);
  }
}

/* Container-driven sizes (TV#153): used inside .dv-card, which is an inline-size container, so they follow the card width (cqi), hold the minimum (12 px text, 14 px titles and values) and cap at the maximum. */
@layer tokens {
  :root {
    --f-cq-poster: clamp(12px, 9.5cqi, 22px); /* cover-less poster name sized to its plate so a long word (Terraforming) never breaks mid-word */
    --f-cq-title: clamp(14px, calc(4px + 4.1cqi), 17px);
    --f-cq-val: clamp(14px, calc(5px + 3.7cqi), 17px);
    --f-cq-small: clamp(12px, calc(5px + 2.9cqi), 14px);
    --f-cq-price: clamp(16px, calc(6px + 4.2cqi), 20px);
    --f-cq-gap: clamp(6px, calc(0.5px + 3.2cqi), 12px);
  }
}

@layer base {
  .dv-t-display { font: var(--t-display); letter-spacing: var(--p-track-display); text-wrap: balance; }
  .dv-t-title { font: var(--t-title); letter-spacing: var(--p-track-display); text-wrap: balance; }
  .dv-t-heading { font: var(--t-heading); text-wrap: balance; }
  .dv-t-heading-sm { font: var(--t-heading-sm); }
  .dv-t-lead { font: var(--t-lead); max-width: var(--p-measure-lead); }
  .dv-t-body { font: var(--t-body); }
  .dv-t-small { font: var(--t-small); }
  .dv-t-label { font: var(--t-label); letter-spacing: var(--p-track-label); text-transform: uppercase; }
  .dv-t-price { font: var(--t-price); font-variant-numeric: tabular-nums; }
  .dv-t-price-lead { font: var(--t-price-lead); font-variant-numeric: tabular-nums; }
  .dv-t-price-pdp { font: var(--t-price-pdp); font-variant-numeric: tabular-nums; letter-spacing: var(--p-track-display); }
  .dv-t-numeral { font: var(--t-numeral); font-variant-numeric: tabular-nums; letter-spacing: var(--p-track-display); }
  .dv-num { font-variant-numeric: tabular-nums; }
}

/* =========================================================================
   STAGE roles (round 4, mixed-brand scenes). The stage is the neutral ground behind any group of cards where Devir and Maldito products coexist
   (search, listing "all brands", home shelves, offers, cart suggestions, PDP cross-sell, mixed categories). It belongs to neither brand: grey with no hue, no red, no navy.
   Each card keeps its own identity and colours; the stage only has to let both be seen. Rule: every card ground has 3:1 or more against --stage-ground in BOTH modes,
   so no edge needs to be drawn on a card (a rule on a Maldito slab would be clipped by its polygon), a black card does not vanish and a white one does not glare.
   ========================================================================= */
@layer tokens {
  :root {
    --stage-ground: light-dark(var(--p-stage-light), var(--p-stage-dark));
    --stage-edge: light-dark(var(--p-stage-edge-light), var(--p-stage-edge-dark));
    --stage-pad: var(--s-sp-4);
    --stage-gap: var(--s-sp-4);
    --stage-radius: var(--s-radius);
  }
}