/*
 * Design tokens for iron-po. See docs/DESIGN.md for what each token is for and the
 * contrast ratio of every text/background pair.
 *
 * Tokens only: no selectors other than :root. Component CSS lives in public/styles/base.css,
 * list.css, event.css, pages.css and admin.css (see docs/DESIGN.md), which use these variables
 * and never hard-code a colour, font or font size.
 *
 * Light is the default; dark follows the visitor's system setting.
 */

:root {
  color-scheme: light dark;

  /* Colour: surfaces and text */
  --color-bg: #fff8f0;              /* page background, warm cream */
  --color-surface: #ffffff;         /* cards, header, inputs */
  --color-surface-sunken: #fbefe2;  /* filter bar, day header, table header */
  --color-text: #2a1f17;            /* body text, titles */
  --color-text-muted: #6b5a4c;      /* secondary text: place, counts, hints */
  --color-brand: #b93d0c;           /* site name and its sun mark */
  --color-link: #a8380c;            /* inline links, always underlined */
  --color-border: #eadccb;          /* decorative hairlines (card edge, dividers); never the only boundary of a control */
  --color-border-strong: #8a7563;   /* control boundaries: inputs, secondary buttons, filter chips (3:1) */
  --color-focus: #0e63b8;           /* focus outline */

  /* Colour: actions and selection */
  --color-primary: #c2410c;         /* primary button background, checkbox accent, selected chip border */
  --color-primary-hover: #9a3412;
  --color-on-primary: #ffffff;      /* text on primary */
  --color-selected-bg: #fde3cf;     /* checked filter chip, current tab */
  --color-chip-bg: #f4e8da;         /* age chip */
  --color-chip-text: #2a1f17;
  --color-free-bg: #d9f2df;         /* "Free" chip */
  --color-free-text: #14532d;

  /* Colour: status tones (badges, notices, form errors) */
  --color-success-bg: #dcfce7;
  --color-success-text: #166534;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #854d0e;
  --color-danger-bg: #fee2e2;
  --color-danger-text: #b91c1c;     /* also form error text on surface */
  --color-neutral-bg: #efe9e2;
  --color-neutral-text: #57534e;
  --color-danger: #b91c1c;          /* danger button background */
  --color-danger-hover: #991b1b;
  --color-on-danger: #ffffff;

  /* Colour: categories. -fg is the icon stroke and the label text, -bg the chip tint. */
  --cat-outdoors-fg: #166534;
  --cat-outdoors-bg: #dcfce7;
  --cat-arts-fg: #86198f;
  --cat-arts-bg: #fae8ff;
  --cat-storytime-fg: #115e59;
  --cat-storytime-bg: #ccfbf1;
  --cat-stem-fg: #1e40af;
  --cat-stem-bg: #dbeafe;
  --cat-sports-fg: #9f1239;
  --cat-sports-bg: #ffe4e6;
  --cat-festival-fg: #854d0e;
  --cat-festival-bg: #fef3c7;
  --cat-performance-fg: #5b21b6;
  --cat-performance-bg: #ede9fe;
  --cat-other-fg: #57534e;
  --cat-other-bg: #efe9e2;

  /* Shadows */
  --shadow-card: 0 1px 2px rgb(74 46 22 / 0.06), 0 2px 8px rgb(74 46 22 / 0.06);
  --shadow-raised: 0 2px 4px rgb(74 46 22 / 0.08), 0 8px 24px rgb(74 46 22 / 0.12);

  /* Type: families (system fonts only, no network request) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --font-rounded: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type: sizes (rem, so the visitor's font-size setting scales everything) */
  --text-sm: 0.875rem;     /* 14px: chips, labels, footer, admin tables */
  --text-meta: 0.9375rem;  /* 15px: card place line, hints, counts */
  --text-base: 1.0625rem;  /* 17px: body text, inputs, buttons */
  --text-md: 1.1875rem;    /* 19px: event card title */
  --text-lg: 1.375rem;     /* 22px: day header, h2 on event, About and admin pages */
  --text-xl: 1.75rem;      /* 28px: h1 on phones */
  --text-2xl: 2.25rem;     /* 36px: h1 from 640px up */
  --text-h1: var(--text-xl); /* use this for every h1; becomes --text-2xl from 640px up */

  /* Type: weights and line heights */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.2;    /* h1, day header */
  --leading-snug: 1.3;     /* card title, h2, chips, buttons */
  --leading-normal: 1.5;   /* body, card meta, form controls */
  --leading-relaxed: 1.6;  /* prose: event summary, About */

  /* Spacing (4px grid) */
  --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 */

  /* Radii */
  --radius-sm: 0.375rem;  /* 6px: inputs, checkboxes, badges */
  --radius-md: 0.625rem;  /* 10px: buttons, filter bar, notices */
  --radius-lg: 1rem;      /* 16px: event cards, event page panels, empty state */
  --radius-pill: 999px;   /* chips, filter chips, tabs */

  /* Layout */
  --layout-gutter: 1rem;      /* side padding: 16px on phones, 24px from 640px up */
  --layout-max: 45rem;        /* 720px: public pages content column */
  --layout-prose: 38rem;      /* 608px: About text, event summary */
  --layout-max-wide: 80rem;   /* 1280px: admin */
  --tap-min: 2.75rem;         /* 44px: minimum height and width of anything tappable */
  --icon-sm: 1rem;            /* 16px: icon inside a chip */
  --icon-md: 1.25rem;         /* 20px: icon in a filter chip */
  --icon-lg: 1.75rem;         /* 28px: icon inside the event card tile */
  --icon-xl: 2rem;            /* 32px: icon in the empty state and 404 circle */
  --icon-tile: 3rem;          /* 48px: event card icon tile */
  --icon-circle: 4rem;        /* 64px: empty state and 404 circle */

  /* Focus */
  --focus-width: 3px;
  --focus-offset: 2px;

  /* Motion (only colour and shadow transitions; nothing moves) */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Breakpoint: one, sm = 40rem (640px). Custom properties cannot be used in media queries,
     so component CSS writes @media (min-width: 40rem) literally. There is no other breakpoint. */
}

@media (min-width: 40rem) {
  :root {
    --layout-gutter: 1.5rem;
    --text-h1: var(--text-2xl);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1b1612;
    --color-surface: #272019;
    --color-surface-sunken: #221c16;
    --color-text: #f8efe5;
    --color-text-muted: #c9b8a6;
    --color-brand: #fdba74;
    --color-link: #fdba74;
    --color-border: #3e342b;
    --color-border-strong: #94806d;
    --color-focus: #7cb8ff;

    --color-primary: #fb923c;
    --color-primary-hover: #fdba74;
    --color-on-primary: #1b1612;
    --color-selected-bg: #4a2a16;
    --color-chip-bg: #3a3028;
    --color-chip-text: #f8efe5;
    --color-free-bg: #173b24;
    --color-free-text: #a7f3c0;

    --color-success-bg: #163322;
    --color-success-text: #86efac;
    --color-warning-bg: #3b2e0e;
    --color-warning-text: #fcd34d;
    --color-danger-bg: #451a1a;
    --color-danger-text: #fca5a5;
    --color-neutral-bg: #36302a;
    --color-neutral-text: #d6cfc7;
    --color-danger: #f87171;
    --color-danger-hover: #fca5a5;
    --color-on-danger: #1b1612;

    --cat-outdoors-fg: #86efac;
    --cat-outdoors-bg: #14301e;
    --cat-arts-fg: #f0abfc;
    --cat-arts-bg: #3b1640;
    --cat-storytime-fg: #5eead4;
    --cat-storytime-bg: #0f2e2c;
    --cat-stem-fg: #93c5fd;
    --cat-stem-bg: #172a4d;
    --cat-sports-fg: #fda4af;
    --cat-sports-bg: #431824;
    --cat-festival-fg: #fcd34d;
    --cat-festival-bg: #3a2c0c;
    --cat-performance-fg: #c4b5fd;
    --cat-performance-bg: #2b1d4f;
    --cat-other-fg: #d6d3d1;
    --cat-other-bg: #33302d;

    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-raised: 0 2px 4px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}