/**
 * Design tokens — Best Psychic Reading.
 *
 * Deliberately LIGHT + editorial: every sibling site in this network runs a
 * dark mystical palette; this site is the network's consumer-magazine /
 * buyer's-guide break from that pattern. No starfields, no crystal balls,
 * no gradients — print-review layout logic instead (masthead feel, copper
 * rule lines, numbered rubric callouts, real <table> comparison data).
 *
 * Base 5 colors are fixed by the brief:
 *   --clr-ink   #2E1B3A  deep plum   — headings, structural lines
 *   --clr-accent#B5561B  copper      — CTAs, score badges, rule lines
 *   --clr-paper #FBF7F0  warm paper  — section backgrounds
 *   --clr-bg    #FFFFFF  white       — base
 *   --clr-text  #1F1420  near-black plum — body copy
 * Everything else below is derived from those five.
 */
:root {
    /* ── Core palette (fixed by brief) ───────────────────────────────── */
    --clr-ink:    #2E1B3A;
    --clr-accent: #B5561B;
    --clr-paper:  #FBF7F0;
    --clr-bg:     #FFFFFF;
    --clr-text:   #1F1420;

    /* ── Derived scale ────────────────────────────────────────────────
       Surfaces: white base + warm-paper alt for section banding, plus a
       slightly deeper paper for hover/active card states. */
    --clr-surface:       #FFFFFF;
    --clr-surface-alt:   var(--clr-paper);
    --clr-surface-hover: #F3ECE0;

    /* Borders: a quiet plum-tinted hairline for decorative dividers, and a
       stronger one for anything that needs to read as an interactive
       control boundary (inputs, ghost buttons) — WCAG 1.4.11 non-text
       contrast needs >=3:1 against the surface it sits on. */
    --clr-border:        #E3D9CB;
    --clr-border-strong: #B79C8A;

    /* Copper gets a brighter hover state, same hue family, for links/CTAs. */
    --clr-accent-bright: #D4711F;
    --clr-accent-tint:   #F3E3D6; /* copper at ~12% for score-badge backgrounds */

    /* Muted/dim text: lighter steps of the plum-black body color, not gray,
       so secondary copy still feels like part of the same ink family. */
    --clr-muted: #5B4A63;
    --clr-dim:   #8A7A91;

    /* Status accents for pros/cons + trust flags — kept desaturated so they
       don't compete with copper as "the" accent color. */
    --clr-success:      #3F7D53;
    --clr-success-tint: #E3EFE6;
    --clr-danger:       #A6362C;
    --clr-danger-tint:  #F3E1DE;
    --clr-warn:         #96701E;
    --clr-warn-tint:    #F1E7D2;

    /* a11y: a focus ring distinct from both the copper accent (hover/active
       family) and the plum ink, so a keyboard focus ring is never mistaken
       for a hover state. #1B6FB5 (blue) on white = 4.6:1, on paper = 4.4:1,
       on ink = 3.3:1 — all clear the >=3:1 non-text contrast bar (WCAG
       1.4.11) required for a focus indicator. */
    --clr-focus: #1B6FB5;

    /* ── Typography ───────────────────────────────────────────────────
       Headings: Fraunces (serif, editorial/print). Body: Karla (humanist
       sans, plain-spoken — matches the site's evidence-first tone). */
    --ff-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
    --ff-body:    'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ff-mono:    ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Restrained print-style scale — modest jumps, not a loud marketing
       scale. Fluid sizes only above the fold (xxl+). */
    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.375rem;
    --fs-2xl:  clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);
    --fs-3xl:  clamp(1.875rem, 1.6rem + 1.1vw, 2.25rem);
    --fs-4xl:  clamp(2.25rem, 1.85rem + 1.6vw, 2.75rem);
    --fs-5xl:  clamp(2.75rem, 2.1rem + 2.6vw, 3.5rem);

    /* ── Spacing ──────────────────────────────────────────────────────
       Generous whitespace is the brief — sp-16/20 get used liberally
       between mastheads and sections. */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;

    --max-w:        1200px;
    --max-w-narrow: 740px;
    --gutter:       24px;

    /* ── Radius + shadow ──────────────────────────────────────────────
       Restrained, print-like: small radii, no soft "app" corners, a
       hairline card border does most of the work; shadow is only for
       depth on interactive elements. */
    --r-sm:   2px;
    --r-md:   4px;
    --r-lg:   8px;
    --r-xl:   12px;
    --r-full: 9999px;

    --shadow-card: 0 1px 2px rgba(46,27,58,0.06), 0 1px 0 rgba(46,27,58,0.04);
    --shadow-raised: 0 6px 20px -8px rgba(46,27,58,0.18);

    --ease: cubic-bezier(0.4,0,0.2,1);
    --dur:  180ms;
}