/* ============================================================
   tokens.css - design tokens (single source of truth)
   Brand: black, red, blue, white - matches the Pineview emblem.
   ============================================================ */
:root {
    /* ---- Brand & surfaces ---- */
    --black: #0b0d12;
    --black-soft: #12151f;
    --navy: #101627;
    --navy-2: #0a0e1a;
    --blue: #2456e6;
    --blue-dark: #1740b0;
    --blue-light: #4d78f0;
    --blue-glow: rgba(36, 86, 230, 0.45);
    --red: #e0232f;
    --red-dark: #b31822;
    --red-light: #f0454f;
    --red-glow: rgba(224, 35, 47, 0.45);

    --paper: #f4f5f8;
    --paper-2: #eceef3;
    --paper-deep: #e2e5ec;
    --surface: #ffffff;
    --surface-2: #fbfbfd;

    --ink: #14161c;
    --ink-soft: #5a6072;
    --ink-faint: #878da0;
    --line: #dde0e8;
    --line-soft: #e8eaf0;

    --danger: #c4202c;
    --danger-bg: #fdecec;
    --ok: #1f6feb;
    --ok-bg: #e8effd;
    --amber: #8a5a00;
    --amber-bg: #fdf3d8;
    --green: #167c4a;
    --green-bg: #e4f6ec;

    /* ---- Gradients ---- */
    --grad-dark: linear-gradient(155deg, var(--navy) 0%, var(--black) 62%, #05070c 100%);
    --grad-red: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
    --grad-blue: linear-gradient(135deg, var(--blue-light) 0%, var(--blue-dark) 100%);
    --grad-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));

    /* ---- Fluid type scale (clamp: min ... max) ---- */
    --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
    --step-0:  clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
    --step-1:  clamp(1.12rem, 1.05rem + 0.35vw, 1.35rem);
    --step-2:  clamp(1.35rem, 1.22rem + 0.65vw, 1.85rem);
    --step-3:  clamp(1.7rem, 1.45rem + 1.2vw, 2.6rem);
    --step-4:  clamp(2.1rem, 1.7rem + 2vw, 3.4rem);
    --step-5:  clamp(2.6rem, 2.0rem + 3vw, 4.4rem);

    /* ---- Spacing scale ---- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 2.75rem;
    --sp-8: 3.5rem;
    --sp-9: 5rem;
    --sp-10: 7rem;
    /* fluid section rhythm + gutter */
    --section-y: clamp(2.75rem, 1.8rem + 4vw, 5.5rem);
    --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 2.25rem);

    /* ---- Layout ---- */
    --container: 1180px;
    --container-narrow: 780px;

    /* ---- Radii ---- */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 26px;
    --r-full: 999px;

    /* ---- Elevation ---- */
    --shadow-sm: 0 1px 2px rgba(13, 15, 20, 0.06), 0 2px 6px rgba(13, 15, 20, 0.05);
    --shadow-md: 0 2px 6px rgba(13, 15, 20, 0.06), 0 14px 34px rgba(13, 15, 20, 0.10);
    --shadow-lg: 0 8px 20px rgba(13, 15, 20, 0.10), 0 30px 60px rgba(13, 15, 20, 0.16);
    /* restrained colored accents (used sparingly, not as a glow) */
    --shadow-red: 0 2px 8px rgba(224, 35, 47, 0.18);
    --shadow-blue: 0 2px 8px rgba(36, 86, 230, 0.16);
    /* button elevation - subtle, neutral, professional */
    --btn-shadow: 0 1px 1px rgba(13, 15, 20, 0.10), 0 2px 5px rgba(13, 15, 20, 0.10);
    --btn-shadow-hover: 0 2px 4px rgba(13, 15, 20, 0.12), 0 6px 16px rgba(13, 15, 20, 0.16);
    /* legacy alias */
    --shadow: var(--shadow-md);
    --radius: var(--r-md);

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-1: 0.14s;
    --dur-2: 0.28s;
    --dur-3: 0.5s;
    --dur-4: 0.8s;

    /* ---- z-index scale ---- */
    --z-header: 100;
    --z-tabbar: 100;
    --z-toast: 900;
    --z-sheet: 950;
    --z-overlay: 1000;

    /* ---- App-shell / bottom tab bar ---- */
    --chrome: rgba(11, 13, 18, 0.82);      /* matches .topbar glass */
    --chrome-solid: #0e111a;               /* fallback when backdrop-filter is unsupported */
    --chrome-line: rgba(224, 35, 47, 0.35);
    --tab-idle: #9aa0b2;
    --tab-active: var(--red-light);
    --tab-active-bg: rgba(224, 35, 47, 0.16);
    --tabbar-h: 60px;

    /* ---- Fonts ---- */
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}