/**
 * Design tokens
 * Secret Santa Application
 *
 * Every colour, size, radius, shadow and duration in the product resolves to a
 * name in this file. Nothing below this layer should carry a literal hex value
 * — bin/check_css.php enforces that.
 *
 * Sizes are expressed in rem so that a reader who has raised their browser's
 * default font size gets larger text, not just a larger zoom. 1rem = 16px at
 * the default setting; the px comment on each line is the size at that default.
 *
 * The block at the end maps the names this codebase used before the redesign
 * onto the ones above. It exists so screens can be converted one at a time, and
 * it is deleted once the last consumer is gone.
 */

:root {
    /* ============================================
       SURFACES
       ============================================ */

    --color-teal: #1a4d4d;          /* page ground */
    --color-teal-panel: #14403c;    /* nav bar, panels on cream, email header */
    --color-teal-dark: #0D3B2E;     /* deepest teal; primary text on light surfaces */
    --color-ink: #0D3B2E;           /* semantic name for the same value */
    --color-canvas: #F4EFE2;        /* dense organiser surfaces */
    --color-card: #FFFDF8;          /* card on canvas */
    --color-cream: #F7F3E8;         /* text on teal, and the light surface */

    /* Cream card gradient, used for every card on the teal ground. */
    --card-face: linear-gradient(160deg, #faf7ed, #f2ecdc);
    --card-face-mid: #f7f2e4;   /* the ring colour that separates stacked avatars */

    /* Page background: teal, two accent washes, and the paper texture. */
    --page-background-image:
        radial-gradient(circle at 20% 50%, rgba(225, 193, 110, 0.10) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(230, 72, 46, 0.10) 0%, transparent 50%),
        url('/assets/images/texture.webp');

    /* ============================================
       ACTION COLOUR

       Red is a light-surface colour. Never red text on teal: #E6482E on the
       teal ground is 2.4:1. On teal, links and emphasis are gold.
       ============================================ */

    --color-red: #E6482E;        /* non-text accents only: rules, markers, 3px bars */
    --color-red-dark: #c73821;   /* buttons and links on cream (4.7:1, white on it 5.2:1) */
    --color-red-deep: #9e2c1a;   /* red on tinted backgrounds and small text */
    --color-red-pale: #ffc4be;   /* the only red that reads as red on the teal ground */
    --color-gold: #E1C16E;       /* accents, and all links and emphasis on teal */
    --color-gold-ink: #6b5011;   /* gold-family text on cream (6.8:1) */
    --color-on-gold: #14403c;    /* the only text colour that clears AA on gold */

    /* Pressed and hover shades, one step darker than the face they belong to. */
    --color-red-dark-hover: #b6321d;
    --color-gold-hover: #d4b45b;

    /* Avatar faces. Four, picked by a stable hash of the participant id, so a
       person keeps the same colour on every screen. */
    --avatar-tone-0: #0D3B2E;
    --avatar-tone-1: #c73821;
    --avatar-tone-2: #7a5c14;
    --avatar-tone-3: #E1C16E;

    /* Status. Green means done, gold means in progress, red means needs you. */
    --color-success: #0b6b3a;                       /* text and icon weight */
    --color-success-fill: #22c55e;                  /* bars and dots only */
    --color-success-tint: rgba(34, 197, 94, 0.14);
    --color-warning: #6b5011;                       /* text weight */
    --color-warning-fill: #E1C16E;
    --color-warning-tint: rgba(225, 193, 110, 0.28);
    --color-danger: #9e2c1a;
    --color-danger-hover: #8a2616;
    --color-danger-tint: rgba(230, 72, 46, 0.12);
    --color-red-wash: rgba(199, 56, 33, 0.07);  /* the faintest red that still reads as a hover */
    --color-success-hover: #095a30;
    --color-info: #14403c;
    --color-info-tint: rgba(20, 64, 60, 0.10);

    /* ============================================
       TEXT

       These alpha ramps are floors. Anything lighter fails AA on its surface.
       ============================================ */

    --text-on-light: var(--color-ink);
    --text-on-light-muted: rgba(13, 59, 46, 0.80);  /* body and label text (6.3:1) */
    --text-on-light-faint: rgba(13, 59, 46, 0.78);  /* captions, >= 12.5px; the handoff's absolute floor */
    --text-on-dark: #ffffff;
    --text-on-dark-muted: rgba(247, 243, 232, 0.78);/* minimum on teal (5.9:1) */

    /* ============================================
       SURFACE CONTRACT

       Components read these rather than picking a colour and then being
       re-scoped by every surface they might land on. The defaults here are the
       teal page ground; 4-components-cards.css redefines them on every cream
       surface. A new surface only has to redefine this block.
       ============================================ */

    --surface-text: var(--text-on-dark);
    --surface-text-muted: var(--text-on-dark-muted);
    --surface-border: rgba(247, 243, 232, 0.24);
    --surface-hover: rgba(247, 243, 232, 0.08);
    --surface-link: var(--color-gold);
    --surface-link-hover: #cfa94f;
    --surface-success: var(--color-cream);
    --surface-warning: var(--color-cream);
    --surface-danger: var(--color-red-pale);
    --surface-info: var(--color-cream);

    /* ============================================
       BORDERS
       ============================================ */

    --border-on-light: rgba(26, 77, 77, 0.20);
    --border-on-light-input: rgba(26, 77, 77, 0.18);
    --border-on-light-hairline: rgba(26, 77, 77, 0.10);
    --border-on-dark: rgba(247, 243, 232, 0.24);

    /* ============================================
       TYPOGRAPHY

       Instrument Serif for display, always weight 400 — never bold the serif.
       Instrument Sans for the interface. Both self-hosted, see 2-base.css.
       The email uses Georgia and Helvetica: webfonts do not render in Outlook
       or the Gmail app.
       ============================================ */

    --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
    --font-email-display: Georgia, 'Times New Roman', serif;
    --font-email-body: Helvetica, Arial, sans-serif;

    --font-size-xs: 0.75rem;        /* 12px */
    --font-size-sm: 0.8125rem;      /* 13px */
    --font-size-base: 0.90625rem;   /* 14.5px */
    --font-size-md: 1rem;           /* 16px */
    --font-size-lg: 1.1875rem;      /* 19px */

    --display-sm: 1.4375rem;        /* 23px */
    --display-md: 2.125rem;         /* 34px */
    --display-lg: 2.875rem;         /* 46px */
    --display-xl: 3.5rem;           /* 56px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-display: 1.05;
    --line-height-tight: 1.15;
    --line-height-normal: 1.6;
    --tracking-display: -0.4px;
    --tracking-eyebrow: 0.14em;

    /* ============================================
       SPACING — 4px base
       ============================================ */

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

    /* ============================================
       RADIUS
       ============================================ */

    --radius-sm: 8px;     /* pill inner, small chips */
    --radius-md: 10px;    /* inputs, secondary buttons */
    --radius-lg: 12px;    /* primary buttons */
    --radius-card: 18px;  /* cards */
    --radius-xl: 20px;    /* the sign-in and modal card */
    --radius-full: 999px; /* status pills, tabs, avatars */

    /* ============================================
       ELEVATION — one card shadow, not four
       ============================================ */

    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.70);
    --shadow-modal: 0 14px 40px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.70);
    --shadow-cta: 0 8px 22px rgba(199, 56, 33, 0.32);
    --focus-ring: 0 0 0 4px rgba(225, 193, 110, 0.38);

    /* ============================================
       MOTION — feedback, not ambience
       ============================================ */

    --duration-fast: 120ms;   /* hover, press */
    --duration-base: 180ms;   /* toggles, row enter, toast */
    --duration-slow: 320ms;   /* panel open */
    --duration-draw: 2600ms;  /* the pairing animation, once */
    --easing: cubic-bezier(0.2, 0.8, 0.3, 1);

    /* ============================================
       Z-INDEX SCALE
       ============================================ */

    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 100;
    --z-fixed: 1000;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-toast: 1065;
    --z-tooltip: 1070;

    /* ============================================
       BREAKPOINTS (for reference in JS)
       ============================================ */

    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;


    /* ================================================================
       COMPATIBILITY LAYER

       Names from the pre-redesign token file, mapped onto the ones above
       so that screens can be converted one at a time. Delete a line once
       nothing references it; delete the block when the last one goes.
       ================================================================ */

    /* Semantic colours */
    --color-primary: var(--color-red-dark);
    --color-primary-dark: var(--color-red-deep);
    --color-secondary: var(--color-gold);
    --color-background: var(--color-teal);
    --color-surface: var(--color-cream);
    --color-error: var(--color-danger);
    --color-success-light: var(--color-success-fill);

    /* Neutrals. The greys are retained because Bootstrap-era markup still
       reaches for them; new work should use the ink and cream ramps. */
    --color-white: #ffffff;
    --color-black: #000000;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Borders */
    --color-border: var(--border-on-light);
    --color-border-light: var(--border-on-light-hairline);
    --color-border-focus: var(--color-gold);

    /* Text. The page ground is dark, so the default text colour is the cream
       ramp; anything on a card opts into the ink ramp explicitly. */
    --color-text-primary: var(--text-on-dark);
    --color-text-secondary: var(--text-on-dark-muted);
    --color-text-light: var(--color-cream);
    --color-text-muted: var(--text-on-dark-muted);
    --color-text-on-card: var(--text-on-light);
    --color-text-on-card-muted: var(--text-on-light-muted);

    /* Typography */
    --font-family-base: var(--font-body);
    --font-family-mono: var(--font-mono);
    --font-size-xl: var(--font-size-lg);
    --font-size-2xl: var(--display-sm);
    --font-size-3xl: 1.75rem;   /* 28px */
    --font-size-4xl: 2rem;      /* 32px */
    --font-size-5xl: var(--display-md);
    --letter-spacing-tight: var(--tracking-display);
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.5px;
    --line-height-relaxed: 1.75;

    /* Spacing */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-4);
    --space-lg: var(--space-6);
    --space-xl: var(--space-8);
    --space-2xl: var(--space-10);
    --space-3xl: var(--space-12);
    --space-4xl: var(--space-16);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10);
    --shadow-2xl: var(--shadow-modal);
    --shadow-button: var(--shadow-cta);
    --shadow-focus: var(--focus-ring);
    --shadow-logo: 0 8px 16px rgba(0, 0, 0, 0.40);

    /* Transitions */
    --transition-fast: var(--duration-fast) var(--easing);
    --transition-base: var(--duration-base) var(--easing);
    --transition-slow: var(--duration-slow) var(--easing);
    --transition-entrance: var(--duration-slow) var(--easing);

    /* Backgrounds */
    --bg-texture: var(--page-background-image);
    --bg-gradient-primary: linear-gradient(135deg, var(--color-red-dark) 0%, var(--color-red-deep) 100%);
    --bg-gradient-success: linear-gradient(135deg, var(--color-success-fill) 0%, var(--color-success) 100%);
}

/**
 * Motion is feedback. When a reader has asked for less of it, the durations
 * collapse to zero rather than each component having to remember to opt out.
 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
        --duration-draw: 0ms;
    }
}