/* ==========================================================================
   Hives HR — design tokens
   Single source of truth for colour, type, radius, shadow and motion.
   Rules for usage live in docs/DESIGN.md. Never hard-code hex values elsewhere.
   ========================================================================== */

@layer tokens, base, components, pages;

@layer tokens {
    :root {
        color-scheme: light;

        /* Type */
        --font: "Satoshi", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

        /* Brand — Hive: amber #F5A11B, ink #07070A, cream #F3F0EA */
        --accent: #F5A11B;
        --accent-hover: #E8940D;
        --accent-ink: #9A5B00;
        --accent-soft: #FDEBC8;
        --ink: #0E0D10;
        --ink-hover: #26242A;

        /* Neutrals */
        --canvas: #F3F0EA;
        --surface: #FCFBF8;
        --surface-2: #EFEBE3;
        --white: #FFFFFF;
        --line: rgba(14, 13, 16, .07);
        --line-2: rgba(14, 13, 16, .13);
        --ink-2: #57544F;
        --ink-3: #6E6A63; /* ≥ 4.5:1 on surface and surface-2 (WCAG AA for small text) */

        /* Data & status */
        --green: #3E9B4F;
        --green-soft: #D9EECF;
        --green-ink: #2E6B38;
        --peach: #F9D08A;
        --amber-soft: #FBEBC8;
        --amber-ink: #8A5D07;
        --blue: #4F7BE8;
        --blue-soft: #B7CDF8;
        --blue-tint: #DCE7FC;
        --blue-ink: #2F55B5;
        --red: #D8453A;
        --red-soft: #F9DAD5;
        --red-ink: #A8321F;
        --avatar-1: #F9D08A;
        --avatar-2: #B7CDF8;
        --avatar-3: #D9EECF;
        --avatar-4: #FDEBC8;
        --avatar-5: #E3D9F6;
        --avatar-6: #CDEBEA;

        /* Shape */
        --radius: 20px;
        --radius-sm: 12px;
        --radius-lg: 24px;
        --radius-pill: 999px;

        /* Elevation */
        --shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 1px 2px rgba(14, 13, 16, .04), 0 10px 30px -14px rgba(14, 13, 16, .10);
        --shadow-float: 0 30px 80px -20px rgba(14, 13, 16, .35);
        --shadow-toast: 0 14px 40px -10px rgba(0, 0, 0, .35);

        /* Patterns */
        --hatch: repeating-linear-gradient(-45deg, rgba(14, 13, 16, .10) 0 1px, transparent 1px 6px);
        --page-glow:
            radial-gradient(1100px 600px at 0% -10%, #FAF8F3 0%, transparent 60%),
            radial-gradient(900px 520px at 100% 0%, #F8E9CC 0%, transparent 65%);

        /* Motion */
        --ease: cubic-bezier(.2, .8, .2, 1);
        --fast: .2s;

        /* Layout */
        --page-max: 1440px;
        --gutter: 28px;
        --gap: 14px;
    }

    @media (max-width: 640px) {
        :root {
            --gutter: 16px;
        }
    }
}