/*
 * 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/fonts/Jokker-Regular.woff2") format("woff2"),
    url("/static/fonts/Jokker-Regular.woff") format("woff");
}
@font-face {
  font-family: "Jokker";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/Jokker-Medium.woff2") format("woff2"),
    url("/static/fonts/Jokker-Medium.woff") format("woff");
}
@font-face {
  font-family: "Jokker";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/Jokker-Semibold.woff2") format("woff2"),
    url("/static/fonts/Jokker-Semibold.woff") format("woff");
}
@font-face {
  font-family: "Jokker";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/Jokker-Bold.woff2") format("woff2"),
    url("/static/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/fonts/Roslindale-DisplayCondensedMedium.woff2") format("woff2"),
    url("/static/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/fonts/Roslindale-DisplayCondensedBold.woff2") format("woff2"),
    url("/static/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;

  /* 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);

  --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);

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

  /* 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;

  --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-panel: 0 2px 4px 0 rgb(38 27 27 / 10%);

  /* Motion. */
  --ease-out: cubic-bezier(0, 0, 0.58, 1);

  /* 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;
}