/* =====================================================================
   Orlando — Design tokens
   Every colour, size, radius, shadow and timing used by the app and by
   the learning modules comes from here. Modules must not hard-code
   values: use these variables so light/dark and future themes work.
   ===================================================================== */
:root {
  /* ---- Surfaces & text ---- */
  --bg: #E9EEF4;          /* page background */
  --surface: #FFFFFF;     /* cards, panels */
  --soft: #F3F6FA;        /* insets: notebook, calc boxes, inputs */
  --ink: #16223A;         /* main text, primary buttons */
  --muted: #5B6881;       /* secondary text, labels */
  --line: #CDD5E1;        /* borders, dividers */
  --on-ink: #FFFFFF;      /* text on --ink */

  /* ---- Brand ---- */
  --brand: #FFD54A;       /* the yellow "etiqueta": highlights, focus, answers */
  --brand-ink: #241B00;   /* text on --brand */

  /* ---- Maths semantics (never change their meaning) ---- */
  --m-neutral: #3E5C91;   /* the whole / 100 % */
  --m-paid: #1E8758;      /* what you pay / what is left */
  --m-disc: #D2322A;      /* discount / what comes off / the unknown x */
  --m-extra: #7348C9;     /* increase / what is added */
  --m-sale: #C21E16;      /* sale sticker */

  /* ---- Feedback ---- */
  --ok: #1E8758;
  --warn: #B66A00;
  --err: #D2322A;

  /* ---- Disciplines (one hue each; add here when a discipline is added) ---- */
  --d-matematica: #3E5C91;
  --d-portugues: #C2410C;
  --d-ciencias: #1E8758;
  --d-ingles: #7348C9;
  --d-historia: #A16207;
  --d-geografia: #0E7490;

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Atkinson Hyperlegible", "Verdana", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-hero: clamp(34px, 5vw, 48px);
  --t-h1: clamp(28px, 4vw, 36px);
  --t-h2: clamp(22px, 3vw, 26px);
  --t-h3: 20px;
  --t-body: 17px;
  --t-small: 15px;
  --t-label: 12px;      /* uppercase labels */

  /* ---- Space (4 px grid) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --page-max: 1080px;

  /* ---- Shape ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 28px; --r-pill: 999px;
  --border: 2px;

  /* ---- Depth ---- */
  --shadow-1: 0 1px 2px rgba(22, 34, 58, .06), 0 2px 8px rgba(22, 34, 58, .06);
  --shadow-2: 0 4px 12px rgba(22, 34, 58, .10), 0 12px 32px rgba(22, 34, 58, .08);
  --shadow-key: 0 3px 0 var(--line);   /* "tactile" bottom edge: keys, drawers */

  /* ---- Touch ---- */
  --tap: 48px;          /* minimum touch target (iPad) */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-move: cubic-bezier(.6, 0, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.5, .5, 1);
  --dur-fast: 160ms; --dur: 300ms; --dur-slow: 600ms;

  color-scheme: light;
}

/* ---- Dark theme ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1420; --surface: #172030; --soft: #1E2839; --ink: #E7ECF4; --muted: #9AA6BB; --line: #2C374A; --on-ink: #0E1420;
    --brand: #F4CB46;
    --m-neutral: #5A7BB8; --m-paid: #34B079; --m-disc: #EC5148; --m-extra: #A585F0; --m-sale: #E0362C;
    --ok: #34B079; --warn: #E19A2E; --err: #EC5148;
    --d-matematica: #5A7BB8; --d-portugues: #F07A45; --d-ciencias: #34B079; --d-ingles: #A585F0; --d-historia: #D9A33A; --d-geografia: #31A9C4;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1420; --surface: #172030; --soft: #1E2839; --ink: #E7ECF4; --muted: #9AA6BB; --line: #2C374A; --on-ink: #0E1420;
  --brand: #F4CB46;
  --m-neutral: #5A7BB8; --m-paid: #34B079; --m-disc: #EC5148; --m-extra: #A585F0; --m-sale: #E0362C;
  --ok: #34B079; --warn: #E19A2E; --err: #EC5148;
  --d-matematica: #5A7BB8; --d-portugues: #F07A45; --d-ciencias: #34B079; --d-ingles: #A585F0; --d-historia: #D9A33A; --d-geografia: #31A9C4;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .3);
  color-scheme: dark;
}