/* ============================================
   PRACBILL DESIGN SYSTEM — TOKENS
   Source of truth: .claude/skills/pracbill-design/tokens/
   Blue is the hero; grey does the structural and text work.
   Everything on a 4px grid. Flat-first: borders do the everyday
   work, shadow is reserved for things that genuinely float.
   ============================================ */

:root {
    /* ----- primary: blue ----- */
    --pb-blue-50:  #EFF5FA;
    --pb-blue-100: #DDEAF5;
    --pb-blue-200: #BBD6EB;
    --pb-blue-300: #8EBADE;
    --pb-blue-400: #5598CD;
    --pb-blue-500: #3383C3;
    --pb-blue-600: #1C75BC;
    --pb-blue-700: #165B94;
    --pb-blue-800: #114875;
    --pb-blue-900: #0D375B;

    /* ----- neutral: grey (hue-matched to logo grey, a touch cool) ----- */
    --pb-grey-50:  #F7F7F8;
    --pb-grey-100: #F0F0F1;
    --pb-grey-200: #E2E2E3;
    --pb-grey-300: #CECED0;
    --pb-grey-400: #A3A4A6;
    --pb-grey-500: #78797B;
    --pb-grey-600: #58595B;
    --pb-grey-700: #444546;
    --pb-grey-800: #2E2E2F;
    --pb-grey-900: #1C1C1D;

    /* ----- billing states ----- */
    --pb-paid:    #1A965A;  --pb-paid-bg:    #DFF0E8;  --pb-paid-text:    #12693F;
    --pb-pending: #D68A0C;  --pb-pending-bg: #F9EFDD;  --pb-pending-text: #966108;
    --pb-overdue: #D24444;  --pb-overdue-bg: #F9E5E5;  --pb-overdue-text: #933030;

    /* ----- warm accent: seasoning only, never a primary action or status ----- */
    --pb-accent: #F26A50;
    --pb-accent-bg: #FDEAE6;

    /* ----- logo theming hooks (inline the SVG to reach these) ----- */
    --logo-blue: #1C75BC;
    --logo-grey: #58595B;

    /* ----- semantic roles ----- */
    --color-primary: var(--pb-blue-600);
    --color-primary-hover: var(--pb-blue-700);
    --color-primary-contrast: #fff;
    --color-text: var(--pb-grey-900);
    --color-text-muted: var(--pb-grey-500);
    --color-heading: var(--pb-grey-900);
    --color-link: var(--pb-blue-600);
    --color-link-hover: var(--pb-blue-700);
    --color-border: var(--pb-grey-200);
    --color-border-strong: var(--pb-grey-300);
    --color-surface: #fff;
    --color-surface-alt: var(--pb-grey-50);
    --color-surface-sunken: var(--pb-grey-100);

    /* ----- typography: three faces, four roles ----- */
    --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-numeric: "Inter", ui-sans-serif, system-ui, sans-serif; /* money & figures */
    --font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --fs-display:  3.25rem;
    --fs-h1:       2.25rem;
    --fs-h2:       1.75rem;
    --fs-h3:       1.375rem;
    --fs-h4:       1.125rem;
    --fs-body:     1rem;
    --fs-sm:       0.875rem;
    --fs-overline: 0.75rem;

    --lh-tight: 1.1;
    --lh-snug:  1.3;
    --lh-body:  1.55;

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

    --ls-tight: -0.02em;
    --ls-wide:   0.12em;

    /* ----- spacing: 4px grid ----- */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
    --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

    /* ----- radius: each one has a job ----- */
    --radius-sm:   6px;   /* inputs, chips */
    --radius-md:   8px;   /* buttons */
    --radius-lg:   12px;  /* cards */
    --radius-xl:   16px;  /* modals, wells */
    --radius-full: 999px; /* pills */

    /* ----- elevation: cool-tinted, subtle, used sparingly ----- */
    --shadow-xs: 0 1px 2px rgba(28, 28, 29, .06);
    --shadow-sm: 0 1px 3px rgba(28, 28, 29, .08), 0 1px 2px rgba(28, 28, 29, .05);
    --shadow-md: 0 4px 12px rgba(28, 28, 29, .08), 0 2px 4px rgba(28, 28, 29, .05);
    --shadow-lg: 0 12px 28px rgba(28, 28, 29, .12), 0 4px 8px rgba(28, 28, 29, .06);

    /* ----- borders & focus ----- */
    --border: 1px solid var(--pb-grey-200);
    --focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--pb-blue-600);

    /* ----- layout ----- */
    --container-max: 1120px;
    --gutter: 24px;
    --section-y: clamp(64px, 8vw, 96px);

    /* ----- motion: restrained, 0.12–0.18s, colour only ----- */
    --transition: 0.15s ease;
}

/* Money and metrics are tabular and never set in the display face. */
.tabular {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}