/* ============================================
   PEGVIX — design tokens

   Two surfaces, one accent.

     INK    dark sections — hero, product, technology
     PAPER  cream sections — capabilities, process, careers, blog

   Measured contrast for #EA4743, which is why the rules below exist:
     on ink   #031013 -> 5.0:1  passes WCAG AA for body text
     on paper #F7F3EC -> 3.4:1  FAILS AA for body text; large text / UI only

   So: red is free to be text on ink. On paper it may only be a button fill
   with white text, a rule, or oversized display type. Never body copy.

   --accent is overridable per page via a [data-brand] attribute on <body>,
   which is the one mechanism that lets a second product carry its own colour
   without forking the stylesheet.
   ============================================ */

:root {
    /* ---- accent ---- */
    --primary: #EA4743;
    --primary-dark: #c93b37;
    --primary-light: #f95e4d;
    --glow: rgba(234, 71, 67, 0.3);
    --gradient-primary: linear-gradient(135deg, #EA4743 0%, #f95e4d 50%, #EA4743 100%);

    /* CTA fill — darker than --primary on purpose.
       Measured: white on #EA4743 is 3.83:1, and on the gradient's light stop
       #f95e4d it is worse still. WCAG AA needs 4.5:1 for text at the size our
       buttons use (3:1 only applies from 18.66px bold, which they are not).
       These stops measure 4.99:1 and 4.70:1, so the whole gradient passes.
       --primary itself is unchanged: it is 5.04:1 as text on ink and stays the
       brand colour for type, borders and icons. */
    --gradient-cta: linear-gradient(135deg, #c93b37 0%, #d13e39 50%, #c93b37 100%);

    /* ---- ink surface ---- */
    --bg-dark: #031013;
    --bg-darker: #020b0d;
    --bg-card: #0a1f24;
    --bg-card-hover: #0f2a30;
    --text-white: #ffffff;
    --text-light: #b8c9cc;
    --text-muted: #6b8a90;
    --border: rgba(234, 71, 67, 0.15);
    --gradient-dark: linear-gradient(180deg, #031013 0%, #051a1e 100%);
    --shadow-card: 0 4px 40px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 60px rgba(234, 71, 67, 0.15);

    /* ---- paper surface ---- */
    --paper: #F7F3EC;
    --paper-alt: #EFE9DF;
    --paper-ink: #0E1A1D;
    --paper-text: #3C4A4D;
    /* was #6E7B7D, which measured 3.96:1 on cream and failed AA for the small
       text it is used on (legal timestamps, card notes). #5C686A is 4.74:1. */
    --paper-muted: #5C686A;
    --paper-border: rgba(14, 26, 29, 0.1);
    --paper-card: #FFFFFF;
    --shadow-paper: 0 2px 20px rgba(14, 26, 29, 0.06);

    /* ---- scale ---- */
    --shell: 1200px;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;

    /* ---- motion ---- */
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --fast: 0.25s;
    --slow: 0.55s;
}

/* A product page sets its own accent here. KRIDAXA shares the parent red by
   decision, so this is an identity mapping today and a real override later. */
body[data-brand="kridaxa"] {
    --primary: #EA4743;
    --primary-light: #f95e4d;
}