/*
 * The design tokens. This is the ONLY file in the repository that defines :root.
 *
 * Component styles reference these custom properties and never hardcode a value.
 * A second :root anywhere means two sources for the same colour, and the one
 * that loses is whichever the cascade happens to reach second — which is not a
 * decision anybody made. static/static_test.go asserts this file is the only one.
 *
 * No build step, no framework, no preprocessor. ADR-0003.
 *
 * These are the REAL Sera brand values, taken from the app being replaced
 * (Sera-Web-App/tailwind.config.js) and its self-hosted faces, so the member web
 * app can reach exact visual parity on top of them — the end user must not notice
 * a difference at the switch. The self-hosted @font-face declarations are the one
 * thing in this file that is not a custom property, and they belong here because
 * the faces are as much a brand token as the palette.
 */

/* Jokker — the sans/body face. */
@font-face {
  font-family: "Jokker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/68602ac4b850512f/fonts/Jokker-Regular.woff2") format("woff2"),
    url("/static/7626d78a8946f56a/fonts/Jokker-Regular.woff") format("woff");
}
@font-face {
  font-family: "Jokker";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/e89f7006c8fe1f45/fonts/Jokker-Medium.woff2") format("woff2"),
    url("/static/ab35efc194da7036/fonts/Jokker-Medium.woff") format("woff");
}
@font-face {
  font-family: "Jokker";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/5bcb8627c90a4069/fonts/Jokker-Semibold.woff2") format("woff2"),
    url("/static/d913e1294fb0eecc/fonts/Jokker-Semibold.woff") format("woff");
}
@font-face {
  font-family: "Jokker";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/83abd0c6ca81f66b/fonts/Jokker-Bold.woff2") format("woff2"),
    url("/static/09aac06b1ab874a4/fonts/Jokker-Bold.woff") format("woff");
}

/* Roslindale Display Condensed — the display/serif face, for headings. */
@font-face {
  font-family: "Roslindale Display Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/031b6f8e3d71a92f/fonts/Roslindale-DisplayCondensedMedium.woff2") format("woff2"),
    url("/static/59e5a7b1d4eaf13b/fonts/Roslindale-DisplayCondensedMedium.woff") format("woff");
}
@font-face {
  font-family: "Roslindale Display Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/d2eb75823f71ca80/fonts/Roslindale-DisplayCondensedBold.woff2") format("woff2"),
    url("/static/9383e33c7a4d64ec/fonts/Roslindale-DisplayCondensedBold.woff") format("woff");
}

:root {
  /* Typography. The brand faces, with real fallback stacks so a face that fails
     to load still renders in the right shape. */
  --font-body: "Jokker", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Roslindale Display Condensed", ui-serif, Georgia, Cambria,
    "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* The type scale is Tailwind's default sizes (what the old app used for
     xs..2xl) plus Sera's own overrides for the larger display sizes. Named by
     role, not by pixel size, so a redesign edits values not call sites. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem; /* Sera override */
  --text-4xl: 2.5rem; /* Sera */
  --text-6xl: 3.5rem; /* Sera */
  --text-8xl: 5rem; /* Sera */

  --leading-tight: 1.25;
  --leading-normal: 1.5;

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

  /* Spacing, a 4px base (Tailwind's default scale) plus the extensions the old
     app added. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-22: 5.5rem;
  --space-30: 7.5rem;

  /* Colour — the exact Sera palette. Raw hues first; the roles below reference
     them, so a future brand tweak edits the ramp and nothing else. */
  --white: #ffffff;
  --black: #261b1b;
  --off-white: #f8f5f2;
  --paper: #f2ebe5;
  --grey-1: #4f4543;
  --grey-2: #786e6c;
  --grey-3: #a09894;
  --grey-4: #c9c1bd;
  --red: #d03025;
  --error: #d04325;
  --deep-grape: #203248;
  --deep-lemon: #d28831;
  --tint-grape: #c9d4e6;
  --tint-salmon: #ebbebe;
  --tint-mint: #b1beab;
  --deep-mint: #264a35;
  --deep-amber: #8a5a1e;
  --deep-peach: #c25630; /* the brand guide's signature warm orange (SER-960) */

  /* Roles. Components use these, never the raw hues above. */
  --surface: var(--off-white);
  --surface-sunken: var(--paper);
  --surface-raised: var(--white);
  --border: var(--grey-4);
  --border-strong: var(--grey-3);

  --ink: var(--black);
  --ink-muted: var(--grey-2);
  --ink-subtle: var(--grey-3);
  --ink-inverse: var(--off-white);

  /* The brand guide's translucent ink scale (SER-960 handoff): the brand black at
     an alpha, so a line or a muted label sits right on paper, off-white or white
     alike. Newer member surfaces use these; older ones keep the grey ramp above. */
  --fg-muted: rgb(38 27 26 / 64%);
  --fg-subtle: rgb(38 27 26 / 40%);
  --line: rgb(38 27 26 / 12%);
  --line-strong: rgb(38 27 26 / 24%);
  --eyebrow: var(--deep-peach);

  --accent-500: var(--deep-grape);
  --accent-600: var(--black);
  --link: var(--deep-grape);
  --link-hover: var(--black);

  --danger-500: var(--error);
  --alert-500: var(--red);
  --highlight-500: var(--deep-lemon);
  --success-500: var(--tint-mint);

  /* Inventory segments (SER-686): a comped unit (a deeper sage than the mint tint, so
     it reads on a bar beside grape and lemon) and the unsold track under every
     sold / held / comp bar. */
  --comp: #5f7d6a;
  --track: #9fb3cc;

  /* Subtle status backgrounds — the brand tints. */
  --tint-info-bg: var(--tint-grape);
  --tint-warning-bg: var(--tint-salmon);
  --tint-success-bg: var(--tint-mint);

  /* Ink on those status tints, for small pills (the dashboard's Your-events
     flags, SER-704): the mock's deep green on mint (darkened to 5.1:1 for AA) and deep amber
     on lemon. */
  --success-ink: var(--deep-mint);
  --warning-ink: var(--deep-amber);

  /* Shape and depth — the old app's real shadows (all tinted with the brand
     black rather than a neutral). */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-2xl: 16px; /* the live site's rounded-2xl (1rem); the event/booking card radius */

  --shadow-card: 0 2px 6px 0 rgb(38 27 27 / 10%);
  --shadow-container: 0 4px 0 0 rgb(38 27 27 / 30%);
  --shadow-badge: 0 1px 4px 0 rgb(38 27 27 / 15%);
  --shadow-tag: 0 4px 6px -1px rgb(38 27 27 / 10%), 0 2px 4px -2px rgb(38 27 27 / 10%); /* the site's shadow-md, on the events-list card tag */
  --shadow-panel: 0 2px 4px 0 rgb(38 27 27 / 10%);
  --shadow-pop: 0 12px 32px -12px rgb(38 27 27 / 30%); /* a floating dialog (the create modal) */

  /* Motion. */
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  /* The design system's expressive curve, used by the sign-up door and form
     (design handoff 2026-10): 140ms state changes, 380ms between steps. */
  --ease-door: cubic-bezier(0.22, 1, 0.36, 1);

  /* The sign-up door and form (design handoff 2026-10). The handoff specifies
     its greys as alpha over the brand black, not as the --grey-* steps, so the
     door uses these rather than reusing --grey-* / --border. */
  --claret: #7e2f31;
  --peach: #c25630;
  --tint-peach: #f8836a;
  --line: rgb(38 27 26 / 12%);
  --line-strong: rgb(38 27 26 / 24%);
  --fg-muted: rgb(38 27 26 / 64%);
  --fg-subtle: rgb(38 27 26 / 40%);

  /* Layout. The old app's real page widths. */
  --page: 552px;
  --page-lg: 1076px;
  --page-xl: 1378px;
  --container: var(--page-lg);
  --measure: 68ch;

  --focus-ring: 2px solid var(--accent-500);
  --focus-offset: 2px;
}