/* public/assets/shortking/css/tokens.css
   ShortKing design tokens: the single source for colours, type, radii, shadows and layout.
   Used by every ShortKing page (matchmaking now, home / featured later). */

:root {
    /* ---- Colour: neutrals ---- */
    --sk-ink: #20242c;            /* body text, headings */
    --sk-ink-strong: #252a32;     /* primary buttons, dark sections */
    --sk-crown: #111111;          /* crown icon */
    --sk-muted: #747d8a;          /* secondary text */
    --sk-muted-soft: #7b8491;     /* eyebrows, footer */
    --sk-muted-faint: #818995;    /* fine print */
    --sk-text-soft: #58616d;      /* small supporting text */
    --sk-bg: #f7f8fa;             /* page background */
    --sk-surface: #ffffff;        /* cards, header, footer */
    --sk-surface-alt: #fafbfc;    /* cards on white sections */
    --sk-line: #e0e4e9;           /* borders */
    --sk-line-soft: #edf0f3;      /* dividers */
    --sk-line-strong: #dce1e7;    /* secondary button border */

    /* ---- Colour: brand ---- */
    --sk-green: #219879;
    --sk-green-dark: #16785e;
    --sk-green-soft: #e9f7f1;

    /* ---- Colour: on dark backgrounds ---- */
    --sk-on-dark: #ffffff;
    --sk-on-dark-muted: #d5d9de;
    --sk-on-dark-eyebrow: #bdc5ce;

    /* ---- Typography ---- */
    --sk-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --sk-line-height: 1.6;
    --sk-weight-semibold: 600;
    --sk-weight-bold: 700;
    --sk-weight-black: 800;
    --sk-tracking-tight: -.5px;
    --sk-tracking-heading: -1.2px;
    --sk-tracking-display: -2.5px;
    --sk-tracking-eyebrow: 1.4px;

    /* ---- Radius ---- */
    --sk-radius-sm: 12px;         /* buttons, FAQ items */
    --sk-radius-md: 18px;         /* cards */
    --sk-radius-lg: 20px;         /* price / quote panels */
    --sk-radius-xl: 22px;         /* hero card */
    --sk-radius-pill: 100px;

    /* ---- Shadow ---- */
    --sk-shadow-card: 0 15px 50px #28303b0a;
    --sk-shadow-soft: 0 5px 22px rgba(30, 40, 60, .045);

    /* ---- Layout ---- */
    --sk-container: 1100px;
    --sk-gutter: 22px;
    --sk-header-height: 76px;
    --sk-section-space: 74px;
    --sk-section-space-sm: 52px;

    /* ---- Legacy names used in the original demo pages ---- */
    --ink: var(--sk-ink);
    --muted: var(--sk-muted);
    --line: var(--sk-line);
    --bg: var(--sk-bg);
    --green: var(--sk-green);
}