/* shared/tokens.css
   Design tokens for Mishmarot (desktop + mobile). Variables only, no selectors with layout.
   Change the look of the whole product here. Components live in shared/ui.css. */
:root {
    /* surfaces */
    --paper: #f5f3ee;
    --surface: #ffffff;
    --surface-sunken: #faf9f6;
    --surface-weekend: #efedf8;
    --hairline: #e6e2d9;
    --hairline-strong: #cfc9bb;

    /* ink */
    --ink: #101828;
    --ink-soft: #4a5468;
    --ink-faint: #606a7d;
    --on-brand: #ffffff;

    /* brand (single accent) */
    --brand: #2b45c4;
    --brand-deep: #14224f;
    --brand-soft: #e9edff;
    --brand-line: #c3cdf7;

    /* state colours: used only to communicate state */
    --ok: #0f766e;        --ok-soft: #e3f4f1;        --ok-line: #a7ddd5;
    --warn: #a64b06;      --warn-soft: #fdf1dc;      --warn-line: #f1d199;
    --danger: #be123c;    --danger-soft: #fdecef;    --danger-line: #f6b9c6;
    --oncall: #6d28d9;    --oncall-soft: #f5f0ff;    --oncall-line: #ddd0f7;

    /* type */
    --font: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --fs-display: 1.75rem;   /* 28 */
    --fs-title: 1.25rem;     /* 20 */
    --fs-lead: 1rem;         /* 16 */
    --fs-body: 0.875rem;     /* 14 */
    --fs-meta: 0.75rem;      /* 12 */
    --fs-eyebrow: 0.6875rem; /* 11 */

    /* space (4px grid) */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

    /* shape */
    --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

    /* elevation: two layers, soft */
    --shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 1px rgba(16, 24, 40, .03);
    --shadow-2: 0 2px 4px rgba(16, 24, 40, .05), 0 12px 28px -8px rgba(16, 24, 40, .14);
    --shadow-pop: 0 4px 8px rgba(16, 24, 40, .06), 0 24px 48px -12px rgba(16, 24, 40, .22);

    /* motion */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.45, .64, 1);
    --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms;

    /* focus */
    --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
}