/* Design tokens, v2 "Riso de butxaca" (docs/DESIGN.md). Variable names are part of the contract: don't rename. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../vendor/fonts/bricolage-grotesque-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* paper & ink */
  --bg: #fffdfb;
  --surface: #ffffff;
  --surface-2: #f6f4fa;
  --surface-3: #ebe8f3;
  --ink: #1e2557;
  --text: var(--ink);
  --text-2: #5d6290;
  --text-3: #6c71a0;
  --line: rgba(30, 37, 87, .12);
  --border: var(--line);
  --backdrop: rgba(30, 37, 87, .36);

  /* riso inks */
  --accent: #ff48b0;
  --accent-soft: #ffe0f1;
  --accent-ink: #ffffff;
  --danger: #e0245e;
  --ok: #00838a;

  --menstrual: #ff48b0;
  --menstrual-soft: #ffe0f1;
  --menstrual-ink: #b8176f;
  --follicular: #ffb511;
  --follicular-soft: #fff1cf;
  --follicular-ink: #8a5a00;
  --ovulation: #0078bf;
  --ovulation-soft: #dcefff;
  --ovulation-ink: #005c93;
  --luteal: #765ba7;
  --luteal-soft: #ece6f7;
  --luteal-ink: #5e4790;
  --pms: #a48fd0;
  --predicted: #ff48b0;
  --fertile: #0078bf;

  /* text printed ON a full ink (AA ≥ 4.5) */
  --menstrual-on: #1e2557;
  --follicular-on: #1e2557;
  --ovulation-on: #ffffff;
  --luteal-on: #ffffff;

  /* palette for tags & multi-series charts (riso inks) */
  --c-pink: #ff48b0;
  --c-peach: #ff6c2f;
  --c-lemon: #ffe800;
  --c-mint: #00a95c;
  --c-sky: #0078bf;
  --c-lavender: #765ba7;
  --c-lilac: #d28fd0;
  --c-coral: #f15060;

  /* intensity = amount of ink */
  --int-1: color-mix(in oklab, var(--accent) 22%, var(--bg));
  --int-2: color-mix(in oklab, var(--accent) 50%, var(--bg));
  --int-3: color-mix(in oklab, var(--accent) 80%, var(--bg));
  --int-4: var(--accent);

  /* shape: radius follows hierarchy */
  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* no grey drop shadows: only floating layers get one, tinted with ink */
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: 0 -1px 0 var(--line), 0 18px 50px rgba(30, 37, 87, .22);

  /* spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  /* type */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --font: var(--font-text);
  /* rem: 1rem = the iOS body size (17px by default), so text follows Dynamic Type (base.css) */
  --fs-xs: .765rem;   /* 13 */
  --fs-sm: .882rem;   /* 15 */
  --fs-md: 1rem;      /* 17 */
  --fs-lg: 1.294rem;  /* 22 */
  --fs-xl: 1.647rem;  /* 28 */
  --fs-2xl: 2.353rem; /* 40 */
  --fs-3xl: clamp(56px, 4.235rem, 96px);   /* "Dia 20": grows, but never eats the wheel */

  /* paper grain (riso texture) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .14 0 0 0 0 .34 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: .10;

  /* motion: only in response to her actions */
  --ease: cubic-bezier(.3, 1.3, .5, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 120ms;
  --t-med: 240ms;

  --tabbar-h: 50px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16183a;
    --surface: #1d2049;
    --surface-2: #232659;
    --surface-3: #2c3068;
    --ink: #f4f1ff;
    --text-2: #b4b3dc;
    --text-3: #8f91bd;
    --line: rgba(244, 241, 255, .12);
    --backdrop: rgba(5, 6, 20, .6);

    --accent: #ff5cba;
    --accent-soft: #4a1f4a;
    --accent-ink: #16183a;

    --menstrual: #ff5cba;
    --menstrual-soft: #4a1f4a;
    --menstrual-ink: #ff8fd0;
    --follicular: #ffc23d;
    --follicular-soft: #3d3530;
    --follicular-ink: #ffd27a;
    --ovulation: #3ba4e8;
    --ovulation-soft: #1b3460;
    --ovulation-ink: #8cccf5;
    --luteal: #a08bd6;
    --luteal-soft: #2f2a62;
    --luteal-ink: #c6b8ee;
    --pms: #8b7bc0;
    --predicted: #ff5cba;
    --fertile: #3ba4e8;

    --menstrual-on: #1e2557;
    --follicular-on: #1e2557;
    --ovulation-on: #1e2557;
    --luteal-on: #1e2557;

    --shadow-3: 0 -1px 0 var(--line), 0 18px 50px rgba(0, 0, 0, .5);
    --grain-opacity: .16;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --grain-opacity: 0; }
}