/*
 * Design tokens — sourced from Figma "Lens Share" design file.
 *
 * Fonts: Unbounded (brand/headings) and Poppins (body) are loaded via
 * Google Fonts in layout.templ. Never hard-code values in block CSS;
 * always use var(--token-name).
 *
 * Unit policy
 * ──────────────────────────────────────────────────────────────────────
 * rem  — all lengths that should scale with the user's font-size preference:
 *          spacing, radii, component heights, font sizes.
 *          At the browser default (16 px root) 1 rem = 16 px.
 * px   — only for values that must stay pixel-sharp at every zoom level:
 *          border widths (1px lines), shadow offsets/blur, and the
 *          --radius-full sentinel (9999px). These are independent of type size.
 * unitless — line-height ratios and font-weight numbers.
 *
 * This approach gives responsive, accessible layouts: when a user sets their
 * browser to 20 px base, all rem-based spacing and radii grow with the text.
 * Media-query breakpoints in individual block CSS files should also use rem.
 */

/* ── Global reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

:root {
    /* ── Colour palette ─────────────────────────────────────────────── */

    /* Brand action colour. Figma draws the primary button at #F00000, but that fails WCAG AA in both
       roles the token plays: white-on-red is 4.46:1 and red-text-on-light bottoms out at 3.74:1 on
       --color-bg #EBEBEB (the active nav label in the app/admin shells). #D40000 is the lightest red
       that clears 4.5:1 in every role — red-on-#EBEBEB 4.64:1, white-on-red 5.53:1. Don't lighten it
       without re-running e2e/a11y/contrast.audit.ts. Hover keeps the original ~15% darken step. */
    --color-primary: #D40000;
    --color-primary-hover: #B40000;

    /* Surfaces */
    --color-surface: #FFFFFF;
    --color-surface-alt: #FAFAFB;   /* Card interior, input bg */
    --color-surface-dark: #1b1b1b;  /* Marketing header / footer, dark panel bg */
    --color-bg: #EBEBEB;            /* Page / frame background */

    /* Borders */
    --color-border: #C2C2C2;        /* Stroke on inputs, dividers */
    --color-border-subtle: #E2E2EA; /* Lighter separator / inner rule */

    /* Text */
    --color-text: #171625;              /* Primary heading / body text */
    --color-text-primary: #171625;      /* Alias for --color-text */
    --color-text-secondary: #232323;    /* Alternate dark text */
    /* Secondary / meta text. Shade is load-bearing, not taste: it must clear WCAG AA (4.5:1) on
       EVERY surface it lands on, and the darkest of those is --color-bg #EBEBEB (e.g. the
       closed/closing state badges in events.css), not white. Measured ratios —
                          #FFFFFF  #FAFAFB  #F9F9FB  #EBEBEB
         #92929D (old)      3.08     2.95     2.93     2.58   ← failed everywhere
         #6B6B78            5.25     5.03     4.99     4.40   ← the old muted-aa: still fails on bg
         #636370 (current)  5.92     5.67     5.63     4.96   ← clears AA with margin everywhere
       Verified by e2e/a11y/contrast.audit.ts, which measures effective backgrounds on the real
       rendered pages. Don't lighten this without re-running it. */
    --color-text-muted: #636370;
    --color-text-placeholder: #777777;  /* Form placeholder */
    /* The old muted grey, kept for the two roles that are NOT body text and so aren't bound by the
       4.5:1 rule. Never use either for prose. */
    --color-text-disabled: #92929D;       /* Inactive controls — WCAG 1.4.3 exempts them, and
                                             darkening them makes disabled things look clickable. */
    --color-surface-placeholder: #92929D; /* The grey used AS a background (e.g. gallery hero
                                             placeholder), where it's a surface, not a foreground. */

    /* Semantic */
    /* Error red. Darkened from #FC5A5A, which failed WCAG AA in every role it plays: error text on
       white 3.11:1, error text on --color-error-bg #FEE2E2, and (as a solid delete/error button) white
       text on the fill, all 3.11:1. #C81E1E clears them all — text-on-white 5.74:1, text-on-#FEE2E2
       4.70:1, white-on-fill 5.74:1 — while staying a distinct error red. Don't lighten it without
       re-running e2e/a11y/contrast.audit.ts. */
    --color-error: #C81E1E;
    --color-error-bg: #FEE2E2;    /* Light error background for messages */
    /* Success green. Darkened from #16A34A (only 2.97:1 on --color-success-bg) so the green-text-on-
       pale-green badge pairs clear WCAG AA — #166534 on #E7F7EE is 6.42:1. Same darken fixes every
       other success-text-on-success-bg pairing across admin/partner/profile. Non-text uses (borders,
       icon fills, background fills behind white text) only gain contrast. */
    --color-success: #166534;
    --color-success-bg: #E7F7EE;  /* Light green background for success/verified badges */
    --color-warning: #92600A;     /* Dark amber — warning/notice text */
    --color-warning-bg: #FEF3C7;  /* Light amber background for notices */

    /* Accent (blue-grey, used for icons and secondary highlights). Darkened from #809FB8 (only
       2.36:1 on --color-accent-bg) so accent-text-on-pale-accent clears WCAG AA — #4A6D89 on #E8EDF4
       is 4.65:1, same hue. Also fixes the accent-text pairings in admin/events; border/outline uses
       (3:1 non-text rule) only gain contrast. */
    --color-accent: #4A6D89;
    --color-accent-bg: #E8EDF4;   /* Light accent background for hover states */

    /* Loading & skeleton */
    --color-skeleton: #E5E5E5;    /* Placeholder color for loading states */

    /* Overlay (dark photo backgrounds) */
    --color-overlay: rgba(0, 0, 0, 0.6);

    /* Pure white — use for text/icons on dark surfaces */
    --color-white: #fff;
    --color-white-muted: rgba(255, 255, 255, 0.75); /* Subdued white, e.g. hero subtext on dark bg */

    /* Marketing brand red — the Elementor kit secondary color, preserved exactly for the
       marketing site. Intentionally different from --color-error / app red (#D40000, WCAG-AA).
       WCAG reconciliation of the marketing red is a separate future pass. */
    --color-brand-red: #f00202;


    /* ── Spacing ────────────────────────────────────────────────────── */
    /*
     * 0.25 rem base (= 4 px at default root). All values in rem so the
     * whole spacing scale grows when the user increases their browser
     * font size — critical for accessibility and mobile zoom.
     */
    --space-1:  0.25rem;  /*  4 px */
    --space-2:  0.5rem;   /*  8 px */
    --space-3:  0.75rem;  /* 12 px */
    --space-4:  1rem;     /* 16 px */
    --space-5:  1.25rem;  /* 20 px */
    --space-6:  1.5rem;   /* 24 px */
    --space-7:  1.75rem;  /* 28 px */
    --space-8:  2rem;     /* 32 px */
    --space-10: 2.5rem;   /* 40 px */
    --space-12: 3rem;     /* 48 px */
    --space-16: 4rem;     /* 64 px */


    /* ── Typography ─────────────────────────────────────────────────── */

    /* Figma uses Unbounded for headings/labels, Poppins for body copy. */
    --font-brand: 'Unbounded', sans-serif;
    --font-body:  'Poppins', sans-serif;
    --font-data:  'Roboto', sans-serif;

    /* Size scale — values match what appears in the Figma screens. */
    --font-size-xs:      0.625rem;   /*  10 px — very small labels      */
    --font-size-sm:      0.75rem;    /*  12 px — captions, badges        */
    --font-size-base:    0.875rem;   /*  14 px — body copy               */
    --font-size-md:      0.9375rem;  /*  15 px — input labels, nav items */
    --font-size-lg:      1rem;       /*  16 px — prominent body / cards  */
    --font-size-xl:      1.125rem;   /*  18 px                           */
    --font-size-2xl:     1.25rem;    /*  20 px                           */
    --font-size-3xl:     1.375rem;   /*  22 px — section headings        */
    --font-size-4xl:     1.5rem;     /*  24 px — page headings           */
    --font-size-display: 2rem;       /*  32 px — hero / display text     */

    /* Aliases for component CSS (shorter names) */
    --text-xs:      var(--font-size-xs);
    --text-sm:      var(--font-size-sm);
    --text-base:    var(--font-size-base);
    --text-lg:      var(--font-size-lg);
    --text-xl:      var(--font-size-xl);
    --text-2xl:     var(--font-size-2xl);

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

    --line-height-tight: 1.25;
    --line-height-base:  1.5;


    /* ── Border radius ──────────────────────────────────────────────── */
    /*
     * In rem: corners scale with the text so they never look
     * disproportionately sharp or bloated at different zoom levels.
     * --radius-full stays in px — 9999px is the conventional sentinel
     * for fully-rounded pills and is browser-zoom independent.
     */
    --radius-sm:   0.25rem;   /*  4 px — tags, badges           */
    --radius-md:   0.625rem;  /* 10 px — buttons, inputs, chips */
    --radius-lg:   0.9375rem; /* 15 px — cards, panels, modals  */
    --radius-full: 9999px;    /* pills, avatars                  */


    /* ── Component sizes ────────────────────────────────────────────── */
    /*
     * In rem so touch targets grow with user font-size preferences.
     * 44 px (2.75 rem) is Apple HIG's minimum recommended touch target.
     */
    --input-height:    2.75rem;  /* 44 px — standard input / button */
    --input-height-sm: 2.25rem;  /* 36 px — compact variant         */


    /* ── Shadows ────────────────────────────────────────────────────── */
    /*
     * Shadow offsets and blur are kept in px. Shadows do not participate
     * in the spacing rhythm and are always absolute visual effects —
     * this is standard across every major CSS framework.
     */
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:    0 4px 8px -2px rgba(0, 0, 0, 0.10);
    --shadow-card:  0 4px 8px -2px rgba(0, 0, 0, 0.10);
    --shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.12);  /* Card lift on hover */
}