/* Design tokens - the only file that decides what NinjaWords looks like.
 *
 * Every other stylesheet reads from here and defines no raw colour, size or
 * timing of its own. Change a value in this file and it lands everywhere.
 *
 * A handful of tokens are also written from config/dev_settings.toml at page
 * render, so the app icon and the interface cannot drift apart:
 *
 *     [app].theme_color       -> --color-brand
 *     [app].accent_color      -> --color-accent
 *     [app].background_color  -> --color-canvas-deep
 *     [ui].font_scale         -> --font-scale
 *
 * The look is warm, light and playful on purpose. Nothing here is pure white,
 * pure black or a right angle.
 */

:root {
  /* --- Colour ------------------------------------------------------------
   *
   * Warm cream rather than cold white. A screen you meet first thing in the
   * morning should feel like paper, not like a spreadsheet.
   */

  --color-canvas: #fff9f2;        /* page background, warm cream */
  --color-canvas-deep: #ffeede;   /* recessed areas, subtle warmth */
  --color-surface: #ffffff;       /* cards, lifted above the cream */
  --color-surface-sunken: #fdf4ea;

  --color-ink: #3d3548;           /* body text - soft plum, never pure black */
  --color-ink-soft: #6b6178;      /* secondary text */
  --color-ink-faint: #8a7f98;     /* hints, captions, placeholders */

  --color-accent: #ff8a5b;        /* coral - primary actions, focus */
  --color-accent-soft: #ffe4d6;   /* accent tint for backgrounds */
  --color-accent-deep: #e86f3f;   /* accent pressed state */

  --color-brand: #b8a9db;         /* lavender - secondary accent */
  --color-brand-soft: #efe9fa;

  /* Right is mint, wrong is soft rose. Deliberately not alarm red: missing a
   * word should read as "almost!", not as an error. Red tells you off, rose
   * invites another go. */
  --color-right: #5bc49a;
  --color-right-soft: #dcf5eb;
  --color-wrong: #ff7a8a;
  --color-wrong-soft: #ffe5e9;

  --color-gold: #ffd166;          /* streaks, rewards, small celebrations */
  --color-gold-soft: #fff3d4;

  --color-line: #f0e4d8;          /* hairlines and dividers */
  --color-line-strong: #e4d3c2;

  /* --- Type --------------------------------------------------------------
   *
   * A rounded, friendly sans. Fonts are bundled locally as woff2 rather than
   * fetched from a CDN, because the app has to work offline as a PWA and
   * should not phone home to render text.
   */

  --font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
    "Segoe UI", system-ui, sans-serif;
  --font-display: "Fredoka", "Nunito", var(--font-fallback);
  --font-body: "Nunito", var(--font-fallback);
  --font-mono: "Cascadia Code", "SF Mono", ui-monospace, monospace;

  --font-scale: 1;

  --text-xs: calc(0.75rem * var(--font-scale));
  --text-sm: calc(0.875rem * var(--font-scale));
  --text-base: calc(1.0625rem * var(--font-scale));
  --text-lg: calc(1.25rem * var(--font-scale));
  --text-xl: calc(1.625rem * var(--font-scale));
  --text-2xl: calc(2.125rem * var(--font-scale));
  --text-3xl: calc(2.75rem * var(--font-scale));

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-normal: 1.55;
  --leading-loose: 1.75;

  /* --- Space -------------------------------------------------------------
   * Four-pixel base. Generous by default; cramped never reads as playful.
   */

  --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;

  /* --- Shape -------------------------------------------------------------
   * Nothing is square. The large radii are what make the interface read as
   * soft before a single word is read.
   */

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* --- Depth -------------------------------------------------------------
   * Shadows are tinted with the ink colour rather than black, and kept wide
   * and low. A black shadow on cream looks like dirt.
   */

  --shadow-sm: 0 2px 8px rgba(61, 53, 72, 0.06);
  --shadow-md: 0 4px 16px rgba(61, 53, 72, 0.08);
  --shadow-lg: 0 12px 32px rgba(61, 53, 72, 0.1);
  --shadow-glow-accent: 0 6px 20px rgba(255, 138, 91, 0.28);
  --shadow-glow-right: 0 6px 20px rgba(91, 196, 154, 0.28);

  /* --- Motion ------------------------------------------------------------
   * The overshoot curve is the whole difference between "correct" and
   * "playful". Things should arrive with a little bounce.
   */

  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --speed-fast: 140ms;
  --speed-normal: 240ms;
  --speed-slow: 420ms;

  /* --- Layout ------------------------------------------------------------ */

  --width-content: 34rem;   /* one card, comfortable on a phone and a desktop */
  --width-wide: 52rem;
}

/* Respect the system setting. Someone who has asked for less motion gets a
 * calm interface, not a bouncy one. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --speed-fast: 0ms;
    --speed-normal: 0ms;
    --speed-slow: 0ms;
    --ease-bounce: linear;
  }
}