/* ==========================================================================
   Soul Sounds Academy (SSA) — design tokens
   Built by ETANC for Soul Sounds Academy (SSA).
   Direction A: "Recital Programme" — warm dark ground, single brass accent,
   Fraunces for display, Inter for UI. All text hierarchy is opacity on --paper.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Ground and surfaces (warm near-black, no blue) */
  --ink-900: #16130F;
  --ink-800: #221E18;
  --ink-750: #292319;
  --ink-700: #302A22;
  --ink-600: #3E362B;

  /* Base text colour — every text style is an opacity step of this */
  --paper: #F3EBDD;
  --paper-rgb: 243 235 221;

  /* The one accent */
  --brass: #C9A45C;
  --brass-rgb: 201 164 92;
  --brass-deep: #A88540;
  --brass-ink: #1A1408;          /* text on brass */

  /* Status only: unpaid / overdue. Never chrome. */
  --ember: #D9654B;
  --ember-rgb: 217 101 75;

  /* Opacity system (technique 5) */
  --o-1: 1;
  --o-2: 0.62;
  --o-3: 0.36;

  --text-1: rgb(var(--paper-rgb) / var(--o-1));
  --text-2: rgb(var(--paper-rgb) / var(--o-2));
  --text-3: rgb(var(--paper-rgb) / var(--o-3));

  /* Hairlines */
  --line: var(--ink-700);
  --line-strong: var(--ink-600);
  --line-soft: rgb(var(--paper-rgb) / 0.07);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-base: 0.9375rem; /* 15 — dense tool default */
  --fs-md: 1.0625rem;   /* 17 */
  --fs-lg: 1.375rem;    /* 22 */
  --fs-xl: 1.875rem;    /* 30 */
  --fs-2xl: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  --fs-hero: clamp(2.75rem, 1.5rem + 5.4vw, 6rem);

  /* Space (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;

  /* Shape — the cell is the base unit; everything else rhymes with it */
  --r-cell: 2px;
  --r-ctl: 4px;
  --r-panel: 6px;
  --r-hero: 10px;

  /* Depth — spent sparingly */
  --shadow-hero: 0 30px 60px -30px rgb(0 0 0 / 0.7), 0 1px 0 rgb(var(--paper-rgb) / 0.06) inset;
  --shadow-modal: 0 40px 80px -20px rgb(0 0 0 / 0.75), 0 1px 0 rgb(var(--paper-rgb) / 0.08) inset;
  --shadow-toast: 0 12px 32px -12px rgb(0 0 0 / 0.7);

  /* Focus: a border shift plus a tight 1px inset line — never a blurred halo */
  --focus-border: rgb(var(--brass-rgb) / 0.7);
  --focus-inset: inset 0 0 0 1px rgb(var(--brass-rgb) / 0.22);

  /* Page change: a brief fade out, then a fade in. No movement. */
  --dur-page-out: 60ms;
  --dur-page-in: 140ms;

  /* Shared input surface (text, number, date, month, search, the select button) */
  --input-bg: rgb(var(--paper-rgb) / 0.03);
  --input-bg-hover: rgb(var(--paper-rgb) / 0.045);
  --input-placeholder: rgb(var(--paper-rgb) / 0.5);

  /* Count-up for KPI figures */
  --dur-count: 750ms;

  /* Buttons: one tactile system. Press is fast, release is slower. */
  --ease-btn: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-btn-hover: 150ms;
  --dur-btn-press: 90ms;
  --dur-btn-release: 200ms;
  --btn-press-scale: 0.96;
  --shadow-btn-rest: 0 1px 0 rgb(0 0 0 / 0.2);
  --shadow-btn-hover: 0 6px 14px -6px rgb(0 0 0 / 0.55), 0 1px 0 rgb(0 0 0 / 0.25);
  --shadow-btn-press: 0 1px 2px rgb(0 0 0 / 0.35);
  --highlight-btn: inset 0 1px 0 rgb(255 255 255 / 0.16);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  --page-max: 1760px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* ==========================================================================
   Motion tokens — added for the interaction pass. Presentation only.
   The house curve stays --ease-out; --ease-emphasis is the sharper curve used
   for state changes that should feel decisive (icons, reveals, sheens).
   ========================================================================== */
:root {
  /* Curves */
  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1);
  --ease-rise: cubic-bezier(0.16, 1, 0.3, 1);

  /* Entrances: screens split into chunks that rise in sequence */
  --dur-rise: 520ms;
  --stagger: 60ms;
  --rise-dist: 14px;

  /* Bars in the cadence charts grow from the baseline */
  --dur-bar: 700ms;
  --stagger-bar: 34ms;

  /* Hover elevation for panels, tiles and cards */
  --lift: -2px;
  --lift-card: -3px;
  --dur-lift: 220ms;
  --shadow-lift: 0 14px 28px -16px rgb(0 0 0 / 0.65), 0 1px 0 rgb(var(--paper-rgb) / 0.05) inset;
  --shadow-lift-card: 0 18px 36px -18px rgb(0 0 0 / 0.7), 0 1px 0 rgb(var(--paper-rgb) / 0.06) inset;

  /* Brass glow — the accent's only depth treatment */
  --glow-brass: 0 0 0 1px rgb(var(--brass-rgb) / 0.35), 0 6px 20px -8px rgb(var(--brass-rgb) / 0.45);
  --glow-brass-soft: 0 4px 16px -8px rgb(var(--brass-rgb) / 0.35);

  /* The sheen that crosses a solid button on hover */
  --dur-sheen: 620ms;

  /* Row accent: a brass rule that wipes in at the leading edge on hover */
  --dur-accent: 240ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-rise: 0ms;
    --stagger: 0ms;
    --rise-dist: 0px;
    --dur-bar: 0ms;
    --stagger-bar: 0ms;
    --dur-lift: 0ms;
    --dur-sheen: 0ms;
    --dur-accent: 0ms;
    --lift: 0px;
    --lift-card: 0px;
  }
}

/* ==========================================================================
   PALETTES
   Three selectable palettes, switched by data-theme on <html>.

   The token names are role-based, not literal: --ink-900 means "the ground"
   and --paper means "the base text colour", whichever way round the palette
   runs. In Paper they invert — the ground goes light and the text goes dark —
   and every opacity step, hairline and surface follows automatically, because
   nothing in the stylesheets names a colour directly.

   These tokens were previously hardcoded in shell/screens/motion; they live
   here now so a palette can reach them.

   Brass is the default and is what :root carries, so a document with no
   data-theme attribute renders exactly as it always has.
   ========================================================================== */

:root {
  /* Scrollbars */
  --scroll-thumb: #6B6B6B;
  --scroll-thumb-hover: #8C8C8C;
  --scroll-thumb-active: #A0A0A0;

  /* Chrome and floating surfaces */
  --topbar-bg: rgb(22 19 15 / 0.85);
  --overlay: rgb(10 8 5 / 0.6);
  --float-bg: rgb(34 30 24 / 0.93);
  --float-solid: rgb(34 30 24);
  --matrix-sticky-hover: #1B1712;

  /* Accent variants */
  --brass-hover: #D2AE66;
  --sheen: rgb(255 255 255 / 0.38);

  /* The hero's noise layer */
  --grain-opacity: 0.35;
  --grain-blend: soft-light;

  /* Icons that live inside a data URI and so cannot read a colour token */
  --icon-calendar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23F3EBDD' stroke-width='1.25' stroke-linecap='round'><rect x='1.5' y='2.5' width='11' height='10' rx='1.5'/><path d='M1.5 5.5h11M4.5 1v3M9.5 1v3'/></svg>");

  /* Swatch previews for the palette picker */
  --sw-paper-bg: #F7F2E9;
  --sw-paper-fg: #8A6A1E;
  --sw-brass-bg: #221E18;
  --sw-brass-fg: #C9A45C;
  --sw-ink-bg: #0A0B0D;
  --sw-ink-fg: #E7C173;
}

/* --------------------------------------------------------------------------
   PAPER — the light palette.
   The ground becomes warm off-white and --paper becomes a dark warm ink, so
   the whole opacity hierarchy inverts in place. Brass is deepened to #8A6A1E
   so it clears 4.5:1 as text on the light ground while still taking near-white
   on top when it is used as a fill; --brass-ink flips to near-white for that.
   -------------------------------------------------------------------------- */
:root[data-theme="paper"] {
  color-scheme: light;

  --ink-900: #F7F2E9;   /* page ground */
  --ink-800: #FFFCF6;   /* raised surfaces: panels, dialogs, toasts */
  --ink-750: #F1EADC;
  --ink-700: #E2D9C7;   /* hairlines */
  --ink-600: #C8BBA1;   /* strong hairlines */

  --paper: #1F1A12;     /* base text */
  --paper-rgb: 31 26 18;

  /* Secondary and tertiary text need a little more weight on a light ground */
  --o-2: 0.70;
  --o-3: 0.46;

  --brass: #8A6A1E;
  --brass-rgb: 138 106 30;
  --brass-deep: #6B521A;
  --brass-ink: #FFFAEE;  /* text and glyphs sitting on brass */
  --brass-hover: #74581A;

  --ember: #B33D22;
  --ember-rgb: 179 61 34;

  --line-soft: rgb(var(--paper-rgb) / 0.09);

  --input-bg: rgb(var(--paper-rgb) / 0.035);
  --input-bg-hover: rgb(var(--paper-rgb) / 0.055);
  --input-placeholder: rgb(var(--paper-rgb) / 0.45);

  --scroll-thumb: #B4A98F;
  --scroll-thumb-hover: #9A8D70;
  --scroll-thumb-active: #82755A;

  --topbar-bg: rgb(247 242 233 / 0.85);
  --overlay: rgb(60 50 32 / 0.35);
  --float-bg: rgb(255 252 246 / 0.96);
  --float-solid: rgb(255 252 246);
  --matrix-sticky-hover: #F0E9DA;

  /* Depth is lighter-handed on paper: a dark wash would read as dirt */
  --shadow-hero: 0 20px 44px -28px rgb(90 72 40 / 0.35), 0 1px 0 rgb(255 255 255 / 0.7) inset;
  --shadow-modal: 0 32px 64px -20px rgb(70 56 30 / 0.34);
  --shadow-toast: 0 12px 30px -12px rgb(70 56 30 / 0.3);
  --shadow-btn-rest: 0 1px 0 rgb(90 72 40 / 0.16);
  --shadow-btn-hover: 0 6px 14px -6px rgb(90 72 40 / 0.3), 0 1px 0 rgb(90 72 40 / 0.16);
  --shadow-btn-press: 0 1px 2px rgb(90 72 40 / 0.22);
  --shadow-lift: 0 10px 22px -14px rgb(90 72 40 / 0.32);
  --shadow-lift-card: 0 14px 30px -16px rgb(90 72 40 / 0.36);
  --highlight-btn: inset 0 1px 0 rgb(255 255 255 / 0.22);

  --sheen: rgb(255 255 255 / 0.3);
  --glow-brass: 0 0 0 1px rgb(var(--brass-rgb) / 0.4), 0 6px 18px -8px rgb(var(--brass-rgb) / 0.4);
  --glow-brass-soft: 0 4px 14px -8px rgb(var(--brass-rgb) / 0.35);

  --grain-opacity: 0.16;
  --grain-blend: multiply;

  --icon-calendar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231F1A12' stroke-width='1.25' stroke-linecap='round'><rect x='1.5' y='2.5' width='11' height='10' rx='1.5'/><path d='M1.5 5.5h11M4.5 1v3M9.5 1v3'/></svg>");
}

/* --------------------------------------------------------------------------
   INK — the high-contrast dark palette.
   Colder and deeper than Brass, with pure white text, brighter brass and
   raised opacity steps so secondary text stays legible against near-black.
   -------------------------------------------------------------------------- */
:root[data-theme="ink"] {
  color-scheme: dark;

  --ink-900: #0A0B0D;
  --ink-800: #131519;
  --ink-750: #191C21;
  --ink-700: #282C33;
  --ink-600: #3C424C;

  --paper: #FFFFFF;
  --paper-rgb: 255 255 255;

  --o-2: 0.74;
  --o-3: 0.50;

  --brass: #E7C173;
  --brass-rgb: 231 193 115;
  --brass-deep: #C9A45C;
  --brass-ink: #0A0B0D;
  --brass-hover: #F2D089;

  --ember: #FF7F63;
  --ember-rgb: 255 127 99;

  --line-soft: rgb(var(--paper-rgb) / 0.1);

  --topbar-bg: rgb(10 11 13 / 0.88);
  --overlay: rgb(0 0 0 / 0.7);
  --float-bg: rgb(19 21 25 / 0.95);
  --float-solid: rgb(19 21 25);
  --matrix-sticky-hover: #101216;

  --scroll-thumb: #4A505A;
  --scroll-thumb-hover: #646B78;
  --scroll-thumb-active: #7C8492;

  --shadow-hero: 0 30px 60px -30px rgb(0 0 0 / 0.85), 0 1px 0 rgb(var(--paper-rgb) / 0.08) inset;
  --shadow-modal: 0 40px 80px -20px rgb(0 0 0 / 0.9), 0 1px 0 rgb(var(--paper-rgb) / 0.1) inset;

  --grain-opacity: 0.22;

  --icon-calendar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23FFFFFF' stroke-width='1.25' stroke-linecap='round'><rect x='1.5' y='2.5' width='11' height='10' rx='1.5'/><path d='M1.5 5.5h11M4.5 1v3M9.5 1v3'/></svg>");
}

/* While a palette is swapping, every colour transition in the document is
   suppressed for one frame. Without this the swap smears, because hundreds of
   elements animate background, border and shadow at once. See setPalette(). */
:root.is-theming *,
:root.is-theming *::before,
:root.is-theming *::after {
  transition: none !important;
}