/*
 * Design v2 tokens (ETE-177): the approved colours, type, radii, shadows and
 * motion, in one file the landing uses now and the app will use later.
 *
 * Source: the founder-approved gallery (repite-componentes.html) and the v2
 * report, 2 November 2026. Two rules from that report decide most of what is
 * below:
 *
 * - One action colour. The brand red marks what you tap and what is Repite;
 *   everything else is a neutral. Error is NOT the brand red: --danger is a
 *   rust (#9A3412) with a different hue, always shown with an icon and a word.
 * - Everything subtle. Hairline strokes, near-invisible warm shadows, motion of
 *   a few pixels. The one deliberate exception is the reward celebration.
 *
 * Contrast pairs are recomputed from this file by
 * config.tests.StylesheetHealthTests, in both schemes. White on --brand is
 * 4.67:1, which passes AA but only just: never put small text in --red-500,
 * and never lighten or fade a filled red button -- --brand-text is the red for
 * words.
 *
 * Fonts are self-hosted (`font-src 'self'` in the CSP) and subset to Latin;
 * static/fonts/README.md says how they were made.
 */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/InstrumentSerif-Regular.c036d7200397.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/InstrumentSerif-Italic.29e70ae9d153.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Inter-Variable.629a249daba2.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Brand red. 500 fills (buttons, the mark, a landed point); 600 is the red
     for text and links; 700 is pressed and the end of the reward gradient. */
  --red-50: #fdf1f2;
  --red-100: #f5e3e0;
  --red-200: #f0b3bb;
  --red-300: #e68594;
  --red-500: #d7354a;
  --red-600: #c22d43;
  --red-700: #a71f36;
  --red-900: #5e0f1e;

  --brand: #d7354a;
  --brand-hover: #c22d43;
  --brand-press: #a71f36;
  --brand-text: #c22d43;
  --brand-tint: #f5e3e0;
  --brand-halo: #f0b3bb;
  --on-brand: #ffffff;

  /* Warm neutrals. --muted-text is the quietest grey that is still text
     (4.5:1 on the page, the card and the sunk fill); --muted is decoration
     only. --line and --line-strong are hairlines for cards and dividers;
     --control-line is the edge of something you type into or press, which
     needs 3:1 (WCAG 1.4.11). */
  --bg: #fbf4f2;
  --surface: #ffffff;
  --surface-2: #fefcfb;
  --sunk: #f5ece9;
  --ink: #15121b;
  --body: #5e5866;
  --muted-text: #6e6775;
  --muted: #958e9b;
  --line: #efe3df;
  --line-strong: #e3d3ce;
  --control-line: #8c8492;
  --dark: #15121b;
  --on-dark: #ffffff;

  /* States. Danger is rust, never the brand red. */
  --danger: #9a3412;
  --danger-bg: #fcebdd;
  --danger-line: #f3cdb2;
  --on-danger: #ffffff;
  --success: #18703f;
  --success-bg: #e6f3eb;
  --success-line: #c4e3cf;
  --on-success: #ffffff;
  --warning: #8a5300;
  --warning-500: #e8a33a;
  --warning-bg: #fdf1d8;
  --info: #2f5d9e;
  --info-bg: #e8eef8;

  /* Type. Instrument Serif only from 24px up: it is condensed and
     high-contrast, and its hairlines vanish at small sizes. It has no bold;
     hierarchy is size. */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-display: clamp(2.6rem, 1.6rem + 5vw, 5rem);
  --fs-h1: clamp(2.4rem, 1.6rem + 3.4vw, 4.5rem);
  --fs-h2: clamp(2.1rem, 1.6rem + 2.4vw, 3.5rem);
  --fs-statement: clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);
  --fs-h3: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.8125rem;

  /* Space, on a 4px grid. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --section: clamp(96px, 7rem + 6vw, 208px);
  --container: 1200px;
  --narrow: 780px;

  /* Radii: pill for buttons, chips and the navbar; 28 for cards; 20 for rows
     and the FAQ; 12 for tiles and inputs. */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* Shadows: barely there, warm-tinted. */
  --sh-1: 0 1px 2px rgb(21 18 27 / 4%), 0 2px 10px rgb(94 15 30 / 4%);
  --sh-2: 0 1px 2px rgb(21 18 27 / 4%), 0 14px 36px -12px rgb(94 15 30 / 12%);
  --sh-3: 0 2px 6px rgb(21 18 27 / 5%), 0 36px 70px -24px rgb(94 15 30 / 26%);
  --sh-red: 0 10px 26px -8px rgb(215 53 74 / 45%);
  --ring: 0 0 0 3px var(--surface), 0 0 0 5px var(--ink);

  /* Motion. How often something happens sets how long it may take: the
     counter gets 150ms or nothing, a celebration that happens once a month
     gets a second. Enter decelerating, leave accelerating and faster. */
  --dur-1: 100ms;
  --dur-2: 150ms;
  --dur-3: 200ms;
  --dur-4: 250ms;
  --dur-5: 300ms;
  --dur-6: 400ms;
  --dur-celebrate: 1100ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-spring-soft: var(--ease-enter);
  --ease-spring-pop: var(--ease-enter);
}

/* Springs where the browser can draw them; the bezier above everywhere else. */
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --ease-spring-soft: linear(0, 0.077, 0.241, 0.427, 0.597, 0.736, 0.841, 0.915, 0.963, 0.992, 1.007, 1.014, 1.015, 1.014, 1.011, 1.008, 1.006, 1.004, 1.002, 1.001, 1);
    --ease-spring-pop: linear(0, 0.089, 0.289, 0.519, 0.729, 0.894, 1.005, 1.068, 1.093, 1.092, 1.076, 1.055, 1.034, 1.016, 1.003, 0.996, 0.992, 0.991, 0.992, 0.994, 0.996, 0.998, 0.999, 1);
  }
}

/* Dark, for pages that opt in. A page that is designed light-only (the
   landing) sets data-theme="light" on <html> and keeps the values above. The
   QR stays black on white in both schemes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141118;
    --surface: #1d1922;
    --surface-2: #221e28;
    --sunk: #18141c;
    --ink: #f6efef;
    --body: #c2bac6;
    --muted-text: #a9a1ae;
    --muted: #8f8796;
    --line: #2c2632;
    --line-strong: #3a333f;
    --control-line: #7d7585;
    --dark: #f6efef;
    --on-dark: #15121b;
    --brand-text: #f28b98;
    --brand-tint: #3a1d25;
    --brand-halo: #5e2533;
    --danger: #fb923c;
    --danger-bg: #2e1a10;
    --danger-line: #4a2a18;
    --on-danger: #1a0d05;
    --success: #7fd3a1;
    --success-bg: #132a1e;
    --success-line: #1f4630;
    --on-success: #0c1f14;
    --warning: #f2c46d;
    --warning-bg: #2c2210;
    --info: #9dbbea;
    --info-bg: #152033;
    --sh-1: 0 1px 2px rgb(0 0 0 / 30%);
    --sh-2: 0 16px 36px -12px rgb(0 0 0 / 55%);
    --sh-3: 0 36px 70px -24px rgb(0 0 0 / 70%);
  }
}