/* ============================================================
   ROUTINE — Tokens
   The "paper-sticker" system: warm paper background, ink borders,
   solid offset shadows, halftone/dot textures, Fraunces display
   italics + Mona Sans body. Lowercase French UI copy.
   ============================================================ */

/* Fonts — loaded from Google Fonts to match the live app exactly.
   See reference/routine-v5.html for the original <link>. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..900,0..100,0..1;1,9..144,300..900,0..100,0..1&family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');

:root {
  /* ── Surfaces / Ink ─────────────────────────────────────── */
  --paper:        #f4ead5;  /* base background — warm cream */
  --paper-deep:   #ead9b8;  /* sunk surface — buttons, chips, tabs */
  --paper-deeper: #d8c4a0;  /* weekend day pill, deeper tint */
  --ink:          #2a2a2e;  /* primary text + borders */
  --ink-soft:     #54534e;  /* secondary text */
  --ink-faint:    rgba(42, 42, 46, .25); /* footer, hairlines */
  --shadow:       rgba(42, 42, 46, .12);

  /* ── Accent palette (PAL) — used for steps, members, swatches ── */
  --coral:    #e87963;  /* primary brand accent, "today", active */
  --blue:     #5b89a8;
  --gold:     #f0c54e;  /* sun mascot fill */
  --purple:   #9c7ca8;
  --green:    #6a9971;  /* success / "go" / done state */
  --rose:     #c97b8a;
  --olive:    #7a8b6f;
  --clay:     #d49a6a;
  --lilac:    #a8a4c4;
  --sky:      #7eaab5;

  /* ── Semantic ─────────────────────────────────────────── */
  --accent:        var(--coral);
  --accent-on:     var(--paper);
  --success:       var(--green);
  --danger:        #c0392b;        /* "supprimer" actions */
  --weekend:       var(--paper-deeper);

  /* ── Typography ───────────────────────────────────────── */
  --font-display:  'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:     'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     'Fraunces', Georgia, serif; /* timer uses tabular Fraunces */

  /* Display variation settings — Fraunces is variable on opsz/SOFT/WONK */
  --fv-display:    'opsz' 144, 'SOFT' 50, 'WONK' 1;   /* default display italic */
  --fv-display-emph:'opsz' 144, 'SOFT' 100, 'WONK' 1; /* over-soft accent words */
  --fv-display-num:'opsz' 144, 'SOFT' 0,  'WONK' 0;   /* tabular timer */
  --fv-display-soft:'opsz' 144, 'SOFT' 30;            /* "now playing" step name */

  /* Sizes — Mona Sans body small; Fraunces grows large for moments. */
  --fs-12: 12px;   --fs-13: 13px;   --fs-14: 14px;
  --fs-15: 15px;   --fs-17: 17px;   --fs-20: 20px;
  --fs-30: 30px;   --fs-48: 48px;   --fs-64: 64px;

  /* ── Borders & Radii ──────────────────────────────────── */
  --bd:           1.5px solid var(--ink);
  --bd-thick:     2px   solid var(--ink);
  --bd-dashed:    1.5px dashed var(--ink-soft);

  --r-chip:       10px;   /* day cells, icon picker tiles */
  --r-card:       12px;   /* step bars, list rows */
  --r-card-lg:    14px;   /* "done" banner */
  --r-modal:      20px;   /* confirm dialog */
  --r-sheet:      24px;   /* bottom sheet */
  --r-pill:       100px;  /* all pills */
  --r-circle:     50%;

  /* ── Solid offset shadows ("sticker" depth) ───────────── */
  --sh-1: 2px 2px 0 var(--ink);   /* chips, list rows */
  --sh-2: 3px 3px 0 var(--ink);   /* primary buttons, active pills */
  --sh-3: 6px 6px 0 var(--ink);   /* dialogs */
  --sh-4: 8px 8px 0 var(--ink);   /* celebration banner */
  --sh-drop: 0 4px 16px var(--shadow); /* the clock face only */

  /* ── Spacing ──────────────────────────────────────────── */
  --sp-1: 2px;  --sp-2: 4px;  --sp-3: 6px;  --sp-4: 8px;
  --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px;

  /* ── Paper texture ─────────────────────────────────────
     Apply via a fixed ::before pseudo-element to layer dots on
     top of every screen. mix-blend-mode: multiply with opacity .6 */
  --texture-dots:
    radial-gradient(circle at 20% 30%, rgba(42,42,46,.025) 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(42,42,46,.02)  1px, transparent 1px);
  --texture-size: 3px 3px, 5px 5px;

  /* Halftone dot fill — used over color blocks (clock wedges, timeline bars).
     Apply as background-image over a solid color. */
  --halftone:
    radial-gradient(circle at 30% 40%, rgba(42,42,46,.12) 1px, transparent 1px);
  --halftone-size: 4px 4px;

  /* ── Motion ───────────────────────────────────────────── */
  --ease-out:     cubic-bezier(.32, .72, 0, 1);   /* sheet slide */
  --ease-pop:     cubic-bezier(.34, 1.56, .64, 1); /* celebrate */
  --dur-fast:     .15s;
  --dur-base:     .3s;
  --dur-slow:     .6s;
}

/* ============================================================
   SEMANTIC ELEMENTS
   These are *prescriptions*, not defaults. Designs may opt in
   via classnames, e.g. <h1 class="display"> or <p class="lead">.
   ============================================================ */

html, body { background: var(--paper); color: var(--ink); }
body {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: 1.4;
  -webkit-tap-highlight-color: transparent;
}

/* Headings — always Fraunces italic. Accents inside the heading
   bump SOFT for a swelled, hand-lettered look. */
.display, h1.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-variation-settings: var(--fv-display);
  font-size: var(--fs-48);
  letter-spacing: -.04em;
  line-height: .95;
}
.display .accent, h1.display .accent {
  color: var(--coral);
  font-variation-settings: var(--fv-display-emph);
}

h1 { font: 600 italic var(--fs-20)/1.1 var(--font-display);
     font-variation-settings: var(--fv-display); letter-spacing: -.03em; }
h2 { font: 700 var(--fs-30)/1   var(--font-display);
     font-variation-settings: var(--fv-display-soft); }
h3 { font: 600 italic var(--fs-17)/1.2 var(--font-display); }
h4 { font: 600 var(--fs-15)/1.3 var(--font-display); color: var(--ink-soft); }

p     { font: 400 var(--fs-14)/1.5 var(--font-body); }
.lead { font: 500 var(--fs-17)/1.4 var(--font-body); }
small { font: 500 var(--fs-12)/1.4 var(--font-body); color: var(--ink-soft); }

/* "Tabular" Fraunces — used for timers and large numeric readouts. */
.numeric {
  font-family: var(--font-display);
  font-variation-settings: var(--fv-display-num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -.03em;
}

/* All UI control labels are lowercase French. */
.label, .ctl-label {
  font: 600 var(--fs-12)/1 var(--font-body);
  text-transform: lowercase;
  letter-spacing: 0;
}

/* Section/eyebrow caps — small ALLCAPS used for form labels. */
.eyebrow {
  font: 600 10px/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

code, pre {
  font-family: var(--font-mono);
  background: var(--paper-deep);
  border: var(--bd);
  border-radius: 6px;
  padding: 1px 5px;
}