/* ============================================================================
 * Ordolio Design Tokens — root.css
 * ----------------------------------------------------------------------------
 * This file defines the single source of truth for every design value used
 * across the web app. Component CSS files (custom.css, etc.) must reference
 * these tokens via var(--ordolio-*) — no hard-coded hex values or magic
 * numbers anywhere else.
 *
 * Organisation theming
 *   `setup_custom_colors.html` injects an inline <style> block AFTER all
 *   stylesheets, overriding --ordolio-default-primary and
 *   --ordolio-default-background per organisation. Every token below that
 *   should follow per-org colors is defined as a color-mix() derivation of
 *   those two values — never as a hard-coded hex. This is non-negotiable
 *   for organisation theming to keep working.
 *
 * Token families
 *   1.  Brand & semantic colors  (existing — DO NOT rename)
 *   2.  Neutral scale            (warm-cool greys; 50–200 follow primary)
 *   3.  Surfaces & borders       (canvas, surface, raised, sunken)
 *   4.  Typography               (font stack, size scale, leading, tracking)
 *   5.  Spacing                  (4px base scale, 0–32)
 *   6.  Radii                    (xs–2xl + pill)
 *   7.  Shadows                  (multi-stop, neutral-tinted, light-surface)
 *   8.  Motion                   (durations + easing)
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * @font-face — Geist Variable (self-hosted, parity with mobile/pwa)
 * --------------------------------------------------------------------------*/

@font-face {
    font-family: "Geist Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/geist-latin-wght-normal.284d2af3ed9d.woff2") format("woff2-variations");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Geist Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/geist-latin-ext-wght-normal.12ffd1b0e2fb.woff2") format("woff2-variations");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ------------------------------------------------------------------------
     * 1. Brand & semantic colors  (existing tokens — preserved as-is)
     * ----------------------------------------------------------------------*/

    --ordolio-default-primary: #366cf3;
    --ordolio-default-primary-rgb: 54, 108, 243;
    --ordolio-default-primary-light: color-mix(in srgb, #366cf3, white 15%);
    --ordolio-default-primary-dark: color-mix(in srgb, #366cf3, black 15%);
    --ordolio-default-primary-soft: color-mix(in srgb, #366cf3, white 85%);
    --ordolio-text-on-primary: #ffffff;

    --ordolio-gradient-button--start: #5e59f2;
    --ordolio-gradient-button--end: #0078d4;

    --ordolio-default-background: #f9f9fc;
    --ordolio-default-secondary: #f9f9fc;
    --ordolio-default-secondary-rgb: 249, 249, 252;
    --ordolio-default-secondary-light: color-mix(in srgb, #f9f9fc, white 15%);
    --ordolio-default-secondary-dark: color-mix(in srgb, #f9f9fc, black 5%);
    --ordolio-default-secondary-soft: color-mix(in srgb, #f9f9fc, white 85%);
    --ordolio-text-on-secondary: #000000;

    --ordolio-default-success: #1ead00;
    --ordolio-default-success-light: #22cc00;
    --ordolio-default-success-dark: #147a00;
    --ordolio-default-success-soft: color-mix(in srgb, #1ead00, white 85%);

    --ordolio-default-warning: #e17100;
    --ordolio-default-warning-light: #f57a00;
    --ordolio-default-warning-dark: #f5a700;
    --ordolio-default-warning-soft: color-mix(in srgb, #e17100, white 85%);

    --ordolio-default-danger: #eb002c;
    --ordolio-default-danger-light: #ff0a37;
    --ordolio-default-danger-dark: #e00029;
    --ordolio-default-danger-soft: color-mix(in srgb, #eb002c, white 85%);

    /* ------------------------------------------------------------------------
     * 2. Neutral scale
     *    Light end (50–200) blends 3–9% of the org primary into white via
     *    color-mix(). This is what gives each club their own "feeling" on
     *    page backgrounds, soft surfaces, and subtle dividers — when an org
     *    overrides --ordolio-default-primary, these subtly follow.
     *    Mid-to-dark end (300–950) is fixed cool grey for text and borders;
     *    contrast and readability must not depend on an org's primary choice.
     * ----------------------------------------------------------------------*/

    --ordolio-neutral-50: color-mix(in srgb, #ffffff, var(--ordolio-default-primary) 3%);
    --ordolio-neutral-100: color-mix(in srgb, #ffffff, var(--ordolio-default-primary) 5%);
    --ordolio-neutral-200: color-mix(in srgb, #ffffff, var(--ordolio-default-primary) 9%);
    --ordolio-neutral-300: #d6d8df;
    --ordolio-neutral-400: #a8abb5;
    --ordolio-neutral-500: #71757f;
    --ordolio-neutral-600: #4f535d;
    --ordolio-neutral-700: #383b44;
    --ordolio-neutral-800: #23252b;
    --ordolio-neutral-900: #16181d;
    --ordolio-neutral-950: #0b0c10;

    /* RGB tuples for opacity-driven uses (shadows, focus rings) */
    --ordolio-neutral-950-rgb: 11, 12, 16;
    --ordolio-neutral-900-rgb: 22, 24, 29;

    /* ------------------------------------------------------------------------
     * 3. Surfaces & borders
     *    --bg-canvas and --bg-surface-sunken follow per-org background.
     *    --bg-surface stays white always — this preserves the
     *    `app-top-banner` invariant (every content block needs an opaque
     *    background; the dark top banner at z-index:-42069 must never bleed
     *    through cards).
     * ----------------------------------------------------------------------*/

    --ordolio-bg-canvas: var(--ordolio-default-background);
    --ordolio-bg-surface: #ffffff;
    --ordolio-bg-surface-raised: #ffffff;
    --ordolio-bg-surface-sunken: color-mix(in srgb, var(--ordolio-default-background), black 3%);

    --ordolio-border-subtle: var(--ordolio-neutral-200);
    --ordolio-border-default: var(--ordolio-neutral-300);
    --ordolio-border-strong: var(--ordolio-neutral-400);

    /* Foreground text colors layered on neutrals */
    --ordolio-fg-default: var(--ordolio-neutral-900);
    --ordolio-fg-muted: var(--ordolio-neutral-600);
    --ordolio-fg-subtle: var(--ordolio-neutral-500);
    --ordolio-fg-on-dark: #ffffff;

    /* ------------------------------------------------------------------------
     * 4. Typography
     *    Font stack: Geist Variable (self-hosted, parity with PWA), then
     *    Inter Variable (preferred fallback when locally installed), then
     *    a robust system stack.
     *
     *    --ordolio-font-features enables Geist's stylistic alternates:
     *      cv11 — single-storey 'a' (the modern "open" alt)
     *      ss01 — alternate digits with slashed zero
     *      ss03 — refined punctuation
     *    Applied opt-in (on display headlines and body where premium feel
     *    matters). Not applied globally in Circle 1 — we'll do that in C2.
     * ----------------------------------------------------------------------*/

    --ordolio-font-display:
        "Geist Variable", "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ordolio-font-body:
        "Geist Variable", "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ordolio-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Monaco, Consolas, monospace;

    --ordolio-font-features: "cv11", "ss01", "ss03";

    /* Type scale — modular ramp tuned for marketing-class display sizes.
       Body 16px. Display headlines reach 96px (7xl) per Leadify reference. */
    --ordolio-text-xs: 0.75rem; /* 12px — captions, meta */
    --ordolio-text-sm: 0.875rem; /* 14px — small body, table cells */
    --ordolio-text-base: 1rem; /* 16px — body */
    --ordolio-text-lg: 1.125rem; /* 18px — lead paragraph */
    --ordolio-text-xl: 1.25rem; /* 20px — h4 */
    --ordolio-text-2xl: 1.5rem; /* 24px — h3 */
    --ordolio-text-3xl: 1.875rem; /* 30px — h2 (admin) */
    --ordolio-text-4xl: 2.25rem; /* 36px — h2 (showcase) */
    --ordolio-text-5xl: 3rem; /* 48px — h1 (admin hero) */
    --ordolio-text-6xl: 3.75rem; /* 60px — display medium */
    --ordolio-text-7xl: 6rem; /* 96px — display hero (stacked headline) */

    --ordolio-leading-tight: 0.95; /* display — Leadify-style stacked headlines */
    --ordolio-leading-snug: 1.15; /* h1/h2 */
    --ordolio-leading-normal: 1.5; /* body */
    --ordolio-leading-relaxed: 1.65; /* long-form */

    --ordolio-tracking-display: -0.04em; /* display — tight, premium */
    --ordolio-tracking-tight: -0.02em; /* h1/h2 */
    --ordolio-tracking-normal: 0;
    --ordolio-tracking-wide: 0.04em;
    --ordolio-tracking-caps: 0.08em; /* small-caps eyebrow labels */

    --ordolio-weight-regular: 400;
    --ordolio-weight-medium: 500;
    --ordolio-weight-semibold: 600;
    --ordolio-weight-bold: 700;

    /* ------------------------------------------------------------------------
     * 5. Spacing — 4px base scale
     *    Token name = step number. Each step = 4px increment except gaps at
     *    larger sizes (skip 7/9/11/13/14/15/17/...) following Tailwind/PWA
     *    convention so the scale stays predictable.
     * ----------------------------------------------------------------------*/

    --ordolio-space-0: 0;
    --ordolio-space-1: 0.25rem; /* 4px */
    --ordolio-space-2: 0.5rem; /* 8px */
    --ordolio-space-3: 0.75rem; /* 12px */
    --ordolio-space-4: 1rem; /* 16px */
    --ordolio-space-5: 1.25rem; /* 20px */
    --ordolio-space-6: 1.5rem; /* 24px */
    --ordolio-space-8: 2rem; /* 32px */
    --ordolio-space-10: 2.5rem; /* 40px */
    --ordolio-space-12: 3rem; /* 48px */
    --ordolio-space-16: 4rem; /* 64px */
    --ordolio-space-20: 5rem; /* 80px */
    --ordolio-space-24: 6rem; /* 96px */
    --ordolio-space-32: 8rem; /* 128px */

    /* ------------------------------------------------------------------------
     * 6. Radii
     * ----------------------------------------------------------------------*/

    --ordolio-radius-xs: 4px;
    --ordolio-radius-sm: 6px;
    --ordolio-radius-md: 8px;
    --ordolio-radius-lg: 12px;
    --ordolio-radius-xl: 16px;
    --ordolio-radius-2xl: 20px;
    --ordolio-radius-pill: 9999px;

    /* ------------------------------------------------------------------------
     * 7. Shadows
     *    Multi-stop: a tight inner highlight (white inset at top edge for
     *    the "lifted" look) + soft outer drop. Tuned for a light surface.
     *    Color base is dark neutral at low alpha — never pure black, which
     *    looks harsh on warm backgrounds.
     * ----------------------------------------------------------------------*/

    --ordolio-shadow-xs: 0 1px 2px 0 rgba(var(--ordolio-neutral-950-rgb), 0.05);

    --ordolio-shadow-sm: 0 1px 2px 0 rgba(var(--ordolio-neutral-950-rgb), 0.06), 0 1px 3px 0 rgba(var(--ordolio-neutral-950-rgb), 0.08);

    --ordolio-shadow-md: 0 2px 4px -1px rgba(var(--ordolio-neutral-950-rgb), 0.06), 0 4px 8px -2px rgba(var(--ordolio-neutral-950-rgb), 0.08);

    --ordolio-shadow-lg:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 4px 6px -2px rgba(var(--ordolio-neutral-950-rgb), 0.05),
        0 12px 20px -4px rgba(var(--ordolio-neutral-950-rgb), 0.08);

    --ordolio-shadow-xl:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.6), 0 8px 10px -4px rgba(var(--ordolio-neutral-950-rgb), 0.06),
        0 24px 40px -8px rgba(var(--ordolio-neutral-950-rgb), 0.1);

    --ordolio-shadow-2xl:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.55), 0 16px 24px -8px rgba(var(--ordolio-neutral-950-rgb), 0.1),
        0 48px 80px -16px rgba(var(--ordolio-neutral-950-rgb), 0.14);

    /* Focus ring — used on buttons, inputs, interactive surfaces. */
    --ordolio-ring-focus: 0 0 0 4px color-mix(in srgb, var(--ordolio-default-primary), transparent 75%);

    /* ------------------------------------------------------------------------
     * 8. Motion
     * ----------------------------------------------------------------------*/

    --ordolio-motion-fast: 120ms;
    --ordolio-motion-base: 200ms;
    --ordolio-motion-slow: 320ms;

    --ordolio-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ordolio-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ordolio-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}