/* Tidbit Trivia website: design tokens.
   The palette is lifted from the app (src/styles.css) so product screenshots sit
   naturally on the page in either theme.

   Theme resolution:
     :root                             dark, matching the app's default
     [data-theme="light"|"dark"]       explicit visitor choice

   Every colour is defined on bare :root first, so nothing depends on a media
   query having matched. */

:root {
  /* ---- colour: dark (app default) ---- */
  --bg:        #171614;
  --surface:   #201e1b;
  --surface-2: #2a2723;
  --line:      #35312c;
  --text:      #ece8e1;
  --muted:     #968e83;
  --accent:    #d9a441;
  --correct:   #6aa87b;
  --wrong:     #c4685e;

  /* derived */
  --accent-ink:   #171614;               /* text on an accent fill */
  --line-strong:  #4a453e;
  --shadow-color: 0 0% 0%;
  --overlay:      rgb(23 22 20 / 0.72);

  /* ---- type ----
     One stack for now. This is the swap point when the typeface is chosen. */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;

  /* Fluid scale, 320px -> 1280px viewport. Steps are ~1.25 at the small end
     and ~1.333 at the large end, so headings gain more than body text. */
  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.07rem + 0.28vw, 1.3125rem);
  --text-xl:   clamp(1.35rem, 1.24rem + 0.55vw, 1.75rem);
  --text-2xl:  clamp(1.65rem, 1.43rem + 1.1vw, 2.5rem);
  --text-3xl:  clamp(2.05rem, 1.6rem + 2.25vw, 3.5rem);
  --text-4xl:  clamp(2.5rem, 1.75rem + 3.75vw, 4.75rem);

  --leading-tight: 1.08;
  --leading-snug:  1.28;
  --leading-body:  1.6;

  --tracking-tight: -0.02em;
  --tracking-wide:   0.14em;   /* matches the app's wordmark */

  /* ---- space ---- 4px base, named by step not by use */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* vertical rhythm between page sections, tighter on phones */
  --section-y: clamp(3.5rem, 2rem + 7vw, 7rem);

  /* ---- shape ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-full: 999px;

  /* ---- layout ---- */
  --measure: 34rem;        /* readable line length */
  --page-max: 68rem;       /* content column */
  --page-pad: clamp(1.25rem, 5vw, 2.5rem);

  /* ---- motion ----
     Same curve signature as the app, so the site and product feel related. */
  --t-dur-micro: 120ms;
  --t-dur-ui:    160ms;
  --t-dur-card:  260ms;
  --t-dur-modal: 340ms;

  --t-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --t-ease-entrance: cubic-bezier(.05, .7, .1, 1);
  --t-ease-exit:     cubic-bezier(.3, 0, 1, 1);
  --t-ease-settle:   cubic-bezier(.16, 1, .3, 1);
  --ease: var(--t-ease-settle);

  /* ---- elevation ---- */
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.28);
  --shadow-md: 0 4px 14px hsl(var(--shadow-color) / 0.3);
  --shadow-lg: 0 18px 48px hsl(var(--shadow-color) / 0.4);
}

:root[data-theme="light"] {
  --bg:        #f5f2ec;
  --surface:   #ffffff;
  --surface-2: #ebe6dd;
  --line:      #ddd6c9;
  --text:      #23211d;
  --muted:     #6f675c;
  --accent:    #a9741a;
  --correct:   #3f7a52;
  --wrong:     #a2453b;

  --accent-ink:   #ffffff;
  --line-strong:  #c9c0af;
  --shadow-color: 32 12% 40%;
  --overlay:      rgb(245 242 236 / 0.78);

  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.12);
  --shadow-md: 0 4px 14px hsl(var(--shadow-color) / 0.14);
  --shadow-lg: 0 18px 48px hsl(var(--shadow-color) / 0.18);
}