/* Design tokens for Academia Arithmora.
 *
 * The palette is sampled from the brand logo: a cerulean watercolour band, a
 * warm ochre sunburst and gold arrow points. It is deliberately NOT the
 * "royal blue" of the early brand notes, which the finished mark superseded.
 *
 * Two naming families live here and must never collide:
 *   --dur and the easing are MOTION tokens and carry time units.
 *   --ev-* are set per element by JS, are UNITLESS (minutes, column indices),
 *          and exist only on positioned schedule children.
 *   --tip-x/--tip-y are lengths; JS must set them with an explicit px suffix.
 */

:root {
  color-scheme: light;

  /* surfaces: warm paper, so the blue reads as ink rather than UI chrome */
  --bg: #F6F4EE;
  --surface: #FFFFFF;
  --surface-2: #EFEBE0;
  --surface-3: #E6E1D3;
  --text: #1B1F2E;
  --muted: #5B6172;
  --faint: #8B90A0;
  --line: #E3DFD3;
  --line-strong: #C8C2B2;

  /* brand, sampled from the logo */
  --brand: #1D5B96;
  --brand-line: #3B82B5;
  --brand-wash: #8FB8D8;
  --brand-soft: #E4EDF6;
  --brand-text: #144470;
  --on-brand: #FFFFFF;
  --gold: #D9963A;
  --ochre: #B9731C;
  --gold-soft: #F8EEDC;
  --gold-text: #7A4D0C;

  /* lesson status: fill / border / text, each pair contrast-checked */
  --st-planned: #3B82B5;
  --st-planned-soft: #E4EDF6;
  --st-planned-text: #144470;
  --st-taken: #1F7A45;
  --st-taken-soft: #E2F3E8;
  --st-taken-text: #16603A;
  --st-payable: #D97706;
  --st-payable-soft: #FDEFD8;
  --st-payable-text: #8A3A00;
  --st-excused: #8B90A0;
  --st-excused-soft: #EEEEF1;
  --st-excused-text: #4B5160;
  --st-cancelled: #B7BAC4;
  --st-cancelled-soft: #F2F2F4;
  --st-cancelled-text: #5F6474;

  /* payment overlay on a lesson chip */
  --pay-paid: var(--gold);
  --pay-credit: #4C2A85;
  --pay-none: #B42318;

  /* student state: the traffic lights from the spreadsheet this replaces */
  --state-active: #1F7A45;
  --state-active-soft: #E2F3E8;
  --state-ending: #D97706;
  --state-ending-soft: #FDEFD8;
  --state-payment: #B42318;
  --state-payment-soft: #FCE8E6;

  /* external calendar blocks */
  --busy-ink: #6B7080;

  --ok: #1F7A45;
  --warn: #D97706;
  --danger: #B42318;
  --focus: #1D5B96;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent);

  /* type */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-ui: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 34px;
  --fs-3xl: 44px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 48px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(20, 25, 50, .06);
  --sh-2: 0 4px 14px rgba(20, 25, 50, .10);
  --sh-3: 0 16px 48px rgba(20, 25, 50, .18);

  --dur: 150ms;
  --dur-fast: 100ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* layout */
  --nav-h: 56px;
  --axis-w: 52px;
  --slot-h: 40px;
  --day-start: 8;
  --day-end: 22;
  --drawer-w: 440px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* The phone's bottom bar. Zero on a wide screen, where the bar is hidden, so
   * that every "leave room below the content" rule can use the same expression
   * regardless of viewport and nothing has to be undone at the breakpoint. */
  --tabbar-h: 0px;

  /* Minimum comfortable target for a thumb. Apple asks for 44px, Material for
   * 48px; anything the tutor taps while holding a phone and talking uses this
   * rather than the tighter desktop paddings. */
  --tap: 48px;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0E1220;
  --surface: #161B2E;
  --surface-2: #1D2338;
  --surface-3: #252C45;
  --text: #E9E6DC;
  --muted: #9AA0B3;
  --faint: #6C7390;
  --line: #262D45;
  --line-strong: #3A4364;

  --brand: #6FA3DA;
  --brand-line: #5B93CE;
  --brand-wash: #2E4F73;
  --brand-soft: rgba(111, 163, 218, .16);
  --brand-text: #A9C8EC;
  --on-brand: #0E1220;
  --gold: #E0A94F;
  --ochre: #D08C34;
  --gold-soft: rgba(224, 169, 79, .14);
  --gold-text: #E8C078;

  --st-planned: #6FA3DA;
  --st-planned-soft: rgba(111, 163, 218, .16);
  --st-planned-text: #A9C8EC;
  --st-taken: #6FCF97;
  --st-taken-soft: rgba(111, 207, 151, .14);
  --st-taken-text: #8FD9A8;
  --st-payable: #F2A64E;
  --st-payable-soft: rgba(242, 166, 78, .14);
  --st-payable-text: #F2B36B;
  --st-excused: #6C7390;
  --st-excused-soft: rgba(108, 115, 144, .16);
  --st-excused-text: #B3B8C6;
  --st-cancelled: #4A5068;
  --st-cancelled-soft: rgba(74, 80, 104, .18);
  --st-cancelled-text: #8B90A0;

  --pay-credit: #A78BDA;
  --pay-none: #F08479;

  --state-active: #6FCF97;
  --state-active-soft: rgba(111, 207, 151, .14);
  --state-ending: #F2A64E;
  --state-ending-soft: rgba(242, 166, 78, .14);
  --state-payment: #F08479;
  --state-payment-soft: rgba(240, 132, 121, .14);

  --busy-ink: #9AA0B3;

  --ok: #6FCF97;
  --warn: #F2A64E;
  --danger: #F08479;
  --focus: #A9C8EC;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-2: 0 4px 14px rgba(0, 0, 0, .45);
  --sh-3: 0 16px 48px rgba(0, 0, 0, .6);
}