/* clubi — design tokens for the rendered pages (the /accounts/ screens and the landing).
   Source of truth: frontend/DESIGN.md section 11 (ADR-17).

   This file is the deliberate twin of frontend/src/styles/tokens.css: same names, same values.
   The rendered pages and the SPA are one site, and shared tokens are ADR-05's stated mitigation
   for the seam between them. Changing a value here means changing it there, and in DESIGN.md
   first.

   It carries the *whole* palette rather than the subset a given page happens to use. The subset
   is what auth.css held until the landing page needed --space-7 and --container-max and had
   nowhere to read them from — at which point the twin files had quietly stopped being twins.
   A full mirror is checkable by eye; a subset is not.

   The @font-face block lives here and not in the SPA's tokens.css because the SPA declares its
   faces in base.css. Same four files, same four weights — only the URL form differs, since these
   are resolved relative to this stylesheet and those are absolute. */

/* Brandbook typography (DESIGN.md 4.1). Only the four weights the brandbook names are shipped.
   Clash Semibold declares itself as family "Clash Display Semibold", so it is renamed here —
   without this the browser treats it as a separate family and font-weight silently stops working. */
@font-face {
  font-family: "Clash Display";
  src: url("../brand/fonts/ClashDisplay-Regular.34fd0cccd0f6.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../brand/fonts/ClashDisplay-Semibold.3d4dabbe9e5a.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../brand/fonts/Manrope-Regular.fae8df872c2f.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../brand/fonts/Manrope-Bold.eae929a00ceb.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Brand, literal from the brandbook p.3 ---- */
  --clubi-wine:   #88013e;
  --clubi-cream:  #fdfae7;
  --clubi-yellow: #ffd071;
  --clubi-orange: #ed6630;

  /* ---- Surfaces ---- */
  --clubi-bg:             var(--clubi-cream);
  --clubi-bg-invert:      var(--clubi-wine);
  --clubi-surface:        #fefdf4;
  --clubi-surface-sunken: #f7eedf;
  --clubi-line:           #edd7cf;
  --clubi-line-strong:    #e1bebe;
  --clubi-line-invert:    #9d2e5c;

  /* ---- Text ---- */
  --clubi-ink:                  #26161d;
  --clubi-ink-brand:            var(--clubi-wine);
  --clubi-ink-muted:            #716664;
  --clubi-ink-on-invert:        var(--clubi-cream);
  --clubi-ink-muted-on-invert:  #dcb4b8;

  /* ---- Action ---- */
  --clubi-action:        var(--clubi-wine);
  --clubi-action-hover:  #780137;
  --clubi-action-active: #6a0130;
  --clubi-action-ink:    var(--clubi-cream);
  --clubi-accent:        var(--clubi-orange);
  --clubi-accent-hover:  #d15a2a;
  --clubi-accent-ink:    #290013;  /* darker than --clubi-ink on purpose: passes AA on hover */
  --clubi-highlight:     var(--clubi-yellow);
  --clubi-highlight-ink: var(--clubi-wine);
  --clubi-focus:         var(--clubi-orange);

  /* ---- Tints ---- */
  --clubi-tint-wine:   #f1e1d6;
  --clubi-tint-orange: #fadfc6;
  --clubi-tint-yellow: #fee7b2;

  /* ---- State (extrapolated — DESIGN.md E-03) ---- */
  --clubi-danger:     #b83620;
  --clubi-danger-ink: #ffffff;
  --clubi-success:    #2f6b4f;
  --clubi-warning:    #8e3d1d;

  /* ---- Typography ---- */
  --clubi-font-display: "Clash Display", "Trebuchet MS", system-ui, sans-serif;
  --clubi-font-text:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5rem;
  --text-xl:   2rem;
  --text-2xl:  2.5rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;

  --leading-display: 1.0;   /* brandbook: Clash 1.0 */
  --leading-tight:   1.1;   /* brandbook: Manrope 1.1 */
  --leading-snug:    1.4;
  --leading-body:    1.6;   /* E-04 */

  --tracking-display: 0;         /* brandbook: Clash 0 */
  --tracking-text:    -0.02em;   /* brandbook: Manrope -20 */

  /* ---- Spacing ---- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;

  /* ---- Shape ---- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --shadow-paper:  0 1px 2px rgb(38 22 29 / .06), 0 6px 16px rgb(38 22 29 / .08);
  --shadow-lifted: 0 2px 4px rgb(38 22 29 / .08), 0 12px 28px rgb(38 22 29 / .12);

  /* ---- Layout ---- */
  --container-max:    1120px;
  --container-gutter: 5vw;
  --measure:          68ch;

  /* ---- Motion ---- */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --motion-ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* ---- Showreel layer — experimental, branch redesign/a-showreel (DESIGN.md E-22 … E-30) ---- */
  --clubi-wine-checker: #7f013a;  /* mix(vinho, #000, .065): the darker square of the checker, E-27 */
  --clubi-wine-deep:    #5e012b;  /* mix(vinho, #000, .31): a hard shadow on a wine ground, E-24 */
  --text-6xl:           6.25rem;  /* the giant page count: two ~1.25 steps past --text-4xl (64 → 80 → 100px), E-29 */
  --tracking-eyebrow:   0.16em;   /* the numbered chapter line, E-22 */
  --shadow-hard-sm:     3px 4px 0 0 var(--clubi-line-strong);   /* E-24 */
  --shadow-hard:        6px 8px 0 0 var(--clubi-line-strong);   /* E-24 */
  --shadow-hard-invert: 8px 10px 0 0 var(--clubi-wine-deep);    /* E-24 */
  --shadow-stamp:       4px 5px 0 0 var(--clubi-accent);        /* E-25 */
  --checker-size:       4rem;     /* E-27 */
  --motion-enter:       550ms;    /* E-26 */
  --motion-stagger:     80ms;     /* E-26 */
  --motion-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);      /* expo-out, E-26 */
  --motion-ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);  /* the one overshoot, E-26 */

  /* ---- Keys: the button as a pressable stamp (DESIGN.md E-32) ---- */
  --key-offset:      4px 5px;    /* the stamp's own offset, the one --shadow-stamp uses */
  --key-offset-lift: 6px 7px;    /* hover: the key rises off the page */
  --key-lift:        -2px, -2px; /* translate() on hover, two steps of the 1px grid */
  --key-press:       4px, 5px;   /* translate() on press: the key lands on its own shadow */
}