/*
 * tokens.css - the design tokens of account.xclr8er.com.
 *
 * PART 1 is a tracked COPY of the public site's tokens, so the signed-in side looks like the site
 * without depending on a file in another bucket that nobody tracks. Copied on 2026-09-21 from
 *     https://xclr8er.com/css/variables.css
 *     (Last-Modified 2026-09-22 02:35:09 GMT, ETag 72b1a6288baa5ba5ed7dc7c8104d5700, 2703 bytes: the brand
 *      refresh of that morning, MAINTENANCE-LOG section 35. Every one of its 39 tokens is here with the same value.)
 * with the same names in the same order, so that a diff against the live file stays short.
 * One deliberate difference: the two font families. The public pages download IBM Plex Sans and
 * Inter from Google; this origin's content policy (font-src 'self') admits no third-party host,
 * so the same names are tried locally and the system font answers when they are not installed.
 *
 * PART 2 (--xa-*) is what a dashboard needs and a brochure page does not. Radii and surfaces were
 * read the same day from css/components/services.css (.service-item: 8px, white at 3%) and
 * css/components/contact.css (inputs and .cta-button: 4px, 48px tall). Contrast figures are WCAG
 * ratios against the page background #000000 / the dialog surface #141414.
 */

/* ---- PART 1: copied from the public site ------------------------------------------------- */
:root {
    /* Color Palette - Brand Book: Jet Black, Papaya Orange, Pure White */
    --primary-dark: #0D0D0D;
    --bg-secondary: #141414;

    --brand-jet-black: #0D0D0D;
    --brand-pure-white: #FFFFFF;
    --brand-papaya-orange: #E5B23B;
    --brand-amber-dark: #A87C19;

    --premium-gold: #E5B23B;
    --accent-dark-gold: #A87C19;
    --premium-silver: #E8E8E8;

    /* Functional Colors */
    --text-color: var(--premium-silver);
    --text-heading: var(--brand-pure-white);
    --bg-color: var(--primary-dark);
    --grid-line: rgba(229, 178, 59, 0.08);

    /* Breakpoints (reference only: custom properties cannot be used inside a media query) */
    --bp-sm: 375px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1440px;
    --bp-2xl: 1920px;
    --bp-3xl: 2560px;

    /* Fluid Typography Scale (Perfect Fourth 1.333) */
    --fs-base: clamp(14px, 1vw + 12px, 20px);
    --fs-sm: clamp(16px, 1.1vw + 13px, 24px);
    --fs-md: clamp(21px, 1.5vw + 17px, 32px);
    --fs-lg: clamp(28px, 2vw + 22px, 42px);
    --fs-xl: clamp(37px, 2.7vw + 29px, 56px);
    --fs-xxl: clamp(49px, 3.6vw + 38px, 75px);
    --fs-3xl: clamp(65px, 4.8vw + 50px, 100px);

    /* Font Families: the site's names first, then the system stack (see the note at the top) */
    --font-heading: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Spacing Scale (Desktop Base) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-3xl: 48px;
    --space-4xl: 60px;
    --space-5xl: 80px;
    --space-6xl: 120px;
    --space-7xl: 180px;
}

/* Tablet Spacing (Reduce by 20%) */
@media (max-width: 1024px) {
    :root {
        --space-xs: 3px;
        --space-sm: 6px;
        --space-md: 13px;
        --space-lg: 19px;
        --space-xl: 26px;
        --space-2xl: 32px;
        --space-3xl: 38px;
        --space-4xl: 48px;
        --space-5xl: 64px;
        --space-6xl: 96px;
        --space-7xl: 144px;
    }
}

/* Mobile Spacing (Reduce by 30%) */
@media (max-width: 768px) {
    :root {
        --space-xs: 3px;
        --space-sm: 6px;
        --space-md: 11px;
        --space-lg: 17px;
        --space-xl: 22px;
        --space-2xl: 28px;
        --space-3xl: 34px;
        --space-4xl: 42px;
        --space-5xl: 56px;
        --space-6xl: 84px;
        --space-7xl: 126px;
    }
}

/* ---- PART 2: additions for the account pages ----------------------------------------------- */
:root {
    /* Surfaces */
    --xa-surface: rgba(255, 255, 255, 0.03);
    --xa-surface-raised: #141414;
    --xa-backdrop: rgba(0, 0, 0, 0.75);
    --xa-skeleton: rgba(255, 255, 255, 0.08);

    /* Borders. --xa-border is decoration (1.1:1) and never the only sign of anything.
       --xa-border-strong outlines things a person must find - inputs, secondary buttons, dialogs:
       5.4:1 on the page, 4.8:1 on a dialog; the rule is 3:1. */
    --xa-border: var(--grid-line);
    --xa-border-strong: var(--accent-dark-gold);

    /* Focus ring: 10.0:1 on the page, 8.8:1 on a dialog. Drawn 2px away from the control, so it
       stays visible around a gold button as well. */
    --xa-focus: var(--premium-gold);
    --xa-focus-width: 3px;
    --xa-focus-offset: 2px;

    /* Text: secondary words 10.8:1, error words 9.2:1 (the rule for text is 4.5:1) */
    --xa-text-muted: rgba(232, 232, 232, 0.8);
    --xa-danger: #FF8A80;

    /* Shape and size */
    --xa-radius-card: 8px;
    --xa-radius-control: 4px;
    --xa-target: 48px;
    --xa-column: 22rem;
    --xa-measure: 38rem;
}