/* Doodle Turtle brand tokens — direction C "Shape Friends" (2026-09-17).
   Single source for web pages that can link a stylesheet. player.html inlines a
   copy (it must stay one self-contained file); keep the two in step.
   Source of the colours: brand/mascot.py. */

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

:root {
  /* core palette */
  --dt-ink: #1E2A47;          /* navy: text, icons, dark surfaces */
  --dt-ink-soft: #56607A;     /* secondary text (5.6:1 on paper) */
  --dt-paper: #FFF4E4;        /* page background */
  --dt-paper-deep: #F8E6CB;   /* bands, pressed states, dividers */
  --dt-card: #FFFBF4;         /* raised surfaces on paper */
  --dt-tangerine: #FF7A3D;    /* primary accent, the pencil line */
  --dt-tangerine-deep: #D9531A; /* white text on it: 4.0:1 — large/bold text only; navy on --dt-tangerine is 5.5:1 */
  --dt-teal: #13A39A;         /* the turtle */
  --dt-teal-deep: #0B7A73;    /* white text on it: 5.2:1 */
  --dt-mustard: #F5B72E;
  --dt-blush: #F6B3AC;

  /* tints for picture cards and category pills (text stays ink) */
  --dt-tint-teal: #D8F0EC;
  --dt-tint-tangerine: #FFE3D3;
  --dt-tint-mustard: #FDEDC6;
  --dt-tint-blush: #FCE3DF;
  --dt-tint-ink: #E3E6EE;

  /* shape */
  --dt-radius-sm: 14px;
  --dt-radius: 22px;
  --dt-radius-lg: 32px;
  --dt-pill: 999px;
  --dt-shadow: 0 4px 0 rgba(30, 42, 71, 0.10);
  --dt-shadow-lift: 0 10px 24px rgba(30, 42, 71, 0.12);
  --dt-outline: 3px solid var(--dt-ink);

  /* type */
  --dt-font: "Fredoka", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --dt-touch: 64px;           /* minimum child tap target */

  /* risograph grain, laid over flat colour at low opacity */
  --dt-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.16 0 0 0 0 0.28 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}