@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-700.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* Page & chrome: flat warm taupe page, lit cream sidebar with a tan bevel strip on its right. */
  --bg: #9E968D;
  --sidebar: #EDE2CF;
  --sidebar-strip: linear-gradient(90deg, #C5B39E 0%, #CBB9A4 60%, #CFBFAB 100%);
  /* Sidebar lighting: a soft inner shadow along its right edge, then the diagonal window light
     (a step darker than the cards'), layered in style.css. */
  --sidebar-edge-shade: linear-gradient(90deg, transparent 46%, rgba(50, 58, 62, 0.15) 68%, rgba(50, 58, 62, 0.15) 84%, rgba(50, 58, 62, 0.05) 95%, rgba(50, 58, 62, 0.05) 100%);
  --window-light-sidebar: linear-gradient(39deg, rgba(50, 58, 62, 0.17) 0%, rgba(50, 58, 62, 0.17) 11%, transparent 13.5%, transparent 100%);

  /* Surfaces */
  --surface: #FEF7EC;
  --surface-solid: #FEF7EC;
  --surface-2: #F0E9DD;
  --surface-3: #EDE6D9;
  --block: #E9DBC2;
  --rail-card: #E5E1D7;                  /* phone Upcoming cards: one step greyer than the schedule card */

  /* Controls */
  --control: #DCD5CC;
  --control-2: #DDD6CC;                  /* "+ Add Class" rectangle */
  --control-text: #2B2621;
  --control-edge: rgba(70, 55, 35, 0.12);
  --fab: #DACEBD;
  --active-nav: #CFBEAA;
  --active-nav-text: #3A2416;
  --active-tab: #E3D6C7;
  --tab-rule: rgba(70, 55, 35, 0.28);
  --avatar-bg: #E6DED5;

  /* Text */
  --text: #1A1613;
  --text-2: #4A443C;
  --text-muted: #6C665B;
  --text-faint: #7A7368;
  --text-on-accent: #FBF5EA;

  /* Lines */
  --border: rgba(70, 55, 35, 0.10);
  --grid-line: rgba(70, 55, 35, 0.085);         /* hour rules */
  --grid-line-strong: rgba(70, 55, 35, 0.10);   /* column dividers */

  /* Brand */
  --brand: #6E1F1B;
  --brand-deep: #4B100D;
  --brand-soft: #E9D8CC;

  /* Semantic accents (left-bar colours for non-class types) */
  --accent-blue: #6F7E88;
  --accent-blue-dark: #526975;
  --accent-orange: #B77A55;
  --accent-red: #8F332E;
  --accent-purple: #7A6480;
  --accent-green: #5F7260;
  --now-bg: #4B100D;
  --now-line: #6E1F1B;

  /* Item types. Each type has a fill, a left bar and a title colour; every pair clears 4.5:1.
     Classes keep the mockup's cream block and brand-red bar. */
  --ev-class-bg: var(--block);
  --ev-class-bar: var(--brand);
  --ev-class-title: var(--brand);
  --ev-task-bg: #DFE3D2;
  --ev-task-bar: #56704F;
  --ev-task-title: #2D4228;
  --ev-routine-bg: #EFD9C2;
  --ev-routine-bar: #B06B3F;
  --ev-routine-title: #6A3514;
  --ev-deadline-bg: #D9E1E6;
  --ev-deadline-bar: #4E6878;
  --ev-deadline-title: #243C4A;
  --ev-quiz-bg: #E7DDEB;
  --ev-quiz-bar: #7A4F8A;
  --ev-quiz-title: #4B2A58;
  --ev-meta: #4A443C;

  /* Admin charts: one series colour, validated (lightness, chroma, 3:1) against the card surface */
  --chart-bar: #8A3A33;

  /* Account menu: frosted glass (a faint white sheen over a translucent surface, blurred behind),
     hover washes, and the role badge. The base stays opaque enough that the schedule under the
     menu never competes with its text. */
  --menu-glass: rgba(254, 247, 236, 0.80);
  --menu-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.10));
  --menu-edge: rgba(70, 55, 35, 0.14);
  --menu-shadow: 0 10px 25px -5px rgba(40, 32, 24, 0.32), 0 2px 6px rgba(40, 32, 24, 0.10);
  --menu-hover: rgba(70, 55, 35, 0.07);
  --menu-rule: rgba(70, 55, 35, 0.10);
  --menu-pill: rgba(70, 55, 35, 0.08);
  --menu-danger-hover: rgba(161, 44, 36, 0.08);
  --segment-on: #FFFDF8;
  --segment-on-shadow: 0 1px 2px rgba(40, 32, 24, 0.18);
  --badge-admin-bg: rgba(161, 44, 36, 0.10);
  --badge-admin-edge: rgba(161, 44, 36, 0.30);
  --badge-admin-text: #8F2A22;

  /* Status */
  --danger: #A12C24;
  --danger-soft: #F2D8D2;
  --warn: #9A5A12;
  --warn-soft: #F3E1C6;
  --ok: #3E6A3A;
  --ok-soft: #DCE8D6;

  /* Illustration (empty-state art) */
  --art-stroke: #7C665E;
  --art-fill: #FBF8F2;
  --art-tint: #E4DACD;

  /* Shadows */
  --shadow-card: 0 3px 8px rgba(40, 32, 24, 0.16), 0 1px 2px rgba(40, 32, 24, 0.10);
  --shadow-block: 0 3px 7px rgba(60, 45, 25, 0.22), 0 1px 1px rgba(60, 45, 25, 0.10);
  --shadow-float: 0 4px 12px rgba(40, 32, 24, 0.22);
  --shadow-nav: 0 -2px 10px rgba(40, 32, 24, 0.12);
  --shadow-1: var(--shadow-card);
  --shadow-2: var(--shadow-block);

  /* Window light. One viewport-fixed diagonal gradient shared by the sidebar, cards and blocks
     (background-attachment: fixed) so the light band is continuous across surfaces while the
     page itself stays flat taupe: shaded lower-left corner, lit band, a faint parallel bar,
     then the shaded upper-right half. */
  --light-shade: rgba(50, 58, 62, 0.135);
  --light-band: rgba(50, 58, 62, 0.045);
  --window-light: linear-gradient(39deg,
    var(--light-shade) 0%, var(--light-shade) 8%, transparent 16%,
    transparent 29%, var(--light-band) 32%, var(--light-band) 34%, transparent 37.5%,
    transparent 47%, var(--light-shade) 57%, var(--light-shade) 100%);

  /* Shape */
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-block: 7px;

  /* Layout */
  --gap-xs: 4px;
  --gap-sm: 6px;
  --gap-md: 10px;
  --gap-lg: 14px;
  --sidebar-w: 146px;
  --header-h: 64px;
  --rail-w: 178px;
  --content-pad: 12px;                   /* sidebar -> card gap, filled by the tan strip */
  --card-gap: 10px;
  --hour-h: 47px;
  --dayhead-h: 30px;
  --time-col-w: 104px;
  --nav-h: 64px;
  --m-header-h: 64px;

  --focus: 2px solid var(--brand);
  --font: "Segoe UI", "Segoe UI Variable Text", Inter, system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

  --bg: #1B1917;
  --sidebar: #26221F;
  --sidebar-strip: linear-gradient(90deg, #15130F 0%, #1A1714 100%);
  --sidebar-edge-shade: linear-gradient(90deg, transparent 60%, rgba(0, 0, 0, 0.18) 100%);
  --window-light-sidebar: linear-gradient(39deg, transparent 14%, rgba(255, 236, 210, 0.04) 30%, rgba(255, 236, 210, 0.04) 44%, transparent 55%);

  --surface: #272420;
  --surface-solid: #272420;
  --surface-2: #2F2B27;
  --surface-3: #332F2A;
  --block: #3B342B;
  --rail-card: #24211E;

  --control: #3B3630;
  --control-2: #3B3630;
  --control-text: #D6CFC4;
  --control-edge: rgba(255, 240, 220, 0.06);
  --fab: #453D36;
  --active-nav: #4A3F37;
  --active-nav-text: #F0E4D7;
  --active-tab: #3F3831;
  --tab-rule: rgba(255, 240, 220, 0.22);
  --avatar-bg: #3B3630;

  --text: #EFE9DF;
  --text-2: #C9C2B7;
  --text-muted: #A59D91;
  --text-faint: #8A8377;
  --text-on-accent: #1B1917;

  --border: rgba(255, 240, 220, 0.10);
  --grid-line: rgba(255, 240, 220, 0.07);
  --grid-line-strong: rgba(255, 240, 220, 0.11);

  --brand: #DDA79E;
  --brand-deep: #B87A70;
  --brand-soft: #3D2B28;

  --accent-blue: #8AA0AC;
  --accent-blue-dark: #7B97A6;
  --accent-orange: #C99574;
  --accent-red: #C45B55;
  --accent-purple: #9A84A0;
  --accent-green: #7A8E7B;
  --now-bg: #DDA79E;
  --now-line: #B87A70;

  --ev-class-bg: #3E342C;
  --ev-class-bar: #D98E82;
  --ev-class-title: #F3CFC7;
  --ev-task-bg: #2E3A2D;
  --ev-task-bar: #8EB387;
  --ev-task-title: #D4E8CF;
  --ev-routine-bg: #45362A;
  --ev-routine-bar: #D69A6C;
  --ev-routine-title: #F5D6BD;
  --ev-deadline-bg: #2A3942;
  --ev-deadline-bar: #86A9BC;
  --ev-deadline-title: #D2E3EC;
  --ev-quiz-bg: #45344F;
  --ev-quiz-bar: #C29ED1;
  --ev-quiz-title: #EBDDF1;
  --ev-meta: #CFC7BB;

  --chart-bar: #C9786C;

  --menu-glass: rgba(39, 36, 32, 0.78);
  --menu-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  --menu-edge: rgba(255, 255, 255, 0.10);
  --menu-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.50);
  --menu-hover: rgba(255, 255, 255, 0.05);
  --menu-rule: rgba(255, 255, 255, 0.08);
  --menu-pill: rgba(255, 255, 255, 0.10);
  --menu-danger-hover: rgba(238, 139, 128, 0.10);
  --segment-on: rgba(255, 255, 255, 0.12);
  --segment-on-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
  --badge-admin-bg: rgba(228, 98, 86, 0.18);
  --badge-admin-edge: rgba(228, 98, 86, 0.32);
  --badge-admin-text: #F29589;

  --danger: #EE8B80;
  --danger-soft: #4A2724;
  --warn: #E7B475;
  --warn-soft: #4A3620;
  --ok: #A6CC9D;
  --ok-soft: #2C3B2A;

  --art-stroke: #B3A69C;
  --art-fill: #332F2A;
  --art-tint: #443E37;

  --shadow-card: 0 3px 10px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-block: 0 2px 6px rgba(0, 0, 0, 0.40);
  --shadow-float: 0 6px 16px rgba(0, 0, 0, 0.55);
  --shadow-nav: 0 -2px 10px rgba(0, 0, 0, 0.45);
  --shadow-1: var(--shadow-card);
  --shadow-2: var(--shadow-block);

  /* In dark mode the window light is a faint warm glow along the lit band instead of a shade */
  --light-shade: transparent;
  --light-band: transparent;
  --window-light: linear-gradient(39deg, transparent 14%, rgba(255, 236, 210, 0.04) 30%, rgba(255, 236, 210, 0.04) 44%, transparent 55%);
}