/*
  MagicFeather v5.27c theme regression repair
  Token layer only: concrete values for themes and shared scales.
  Component files consume semantic tokens and do not encode Light/Dark colors.
*/

:root,
html[data-mf-theme="light"] {
  color-scheme: light;

  --mf-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mf-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mf-font-editor: Georgia, "Times New Roman", serif;
  --mf-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --mf-type-xs: .76rem;
  --mf-type-sm: .88rem;
  --mf-type-base: 1rem;
  --mf-type-md: 1.06rem;
  --mf-type-lg: 1.18rem;
  --mf-type-xl: 1.38rem;
  --mf-type-2xl: 1.72rem;
  --mf-type-3xl: 2.15rem;
  --mf-type-4xl: 2.72rem;
  --mf-type-editor: 1.2rem;

  --mf-weight-medium: 560;
  --mf-weight-bold: 760;
  --mf-weight-black: 880;
  --mf-track-tight: -.035em;
  --mf-track-wide: .08em;
  --mf-track-label: .11em;

  --mf-space-1: .25rem;
  --mf-space-2: .5rem;
  --mf-space-3: .75rem;
  --mf-space-4: 1rem;
  --mf-space-5: 1.25rem;
  --mf-space-6: 1.5rem;
  --mf-space-7: 1.85rem;
  --mf-space-8: 2.25rem;
  --mf-space-10: 3rem;
  --mf-space-12: 4rem;

  --mf-radius-xs: .45rem;
  --mf-radius-sm: .8rem;
  --mf-radius-md: 1rem;
  --mf-radius-lg: 1.35rem;
  --mf-radius-xl: 1.75rem;
  --mf-radius-2xl: 2.35rem;
  --mf-radius-pill: 999px;

  --mf-container-max: 104rem;
  --mf-card-min: 17.5rem;
  --mf-sidebar-width: 17rem;
  --mf-side-panel-width: 24rem;
  --mf-modal-width: 58rem;
  --mf-topbar-height: 4.9rem;
  --mf-footer-height: 3.2rem;
  --mf-runtime-footer-height: var(--mf-footer-height);
  --mf-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --mf-shell-bottom-gap: var(--mf-space-3);
  --mf-runtime-bottom-reserve: calc(var(--mf-runtime-footer-height, var(--mf-footer-height)) + var(--mf-shell-bottom-gap) + var(--mf-safe-area-bottom));
  --mf-page-pad-x: clamp(1rem, 2vw, 2rem);
  --mf-page-pad-y: clamp(1rem, 2vw, 1.8rem);
  --mf-card-pad: clamp(1rem, 1.45vw, 1.45rem);
  --mf-hero-pad: clamp(1.25rem, 2vw, 2.1rem);
  --mf-book-cover-thumb: 5.6rem;
  --mf-book-cover-card: 6.4rem;
  --mf-book-cover-hero: 12.5rem;
  --mf-book-cover-hero-max-h: 18rem;
  --mf-editor-min-height: 46rem;
  --mf-control-height: 2.8rem;
  --mf-control-height-sm: 2.15rem;
  --mf-control-pad-y: .68rem;
  --mf-control-pad-x: .95rem;
  --mf-icon-size: 1.12rem;
  --mf-icon-button-size: 2.75rem;
  --mf-brand-logo-size: 3.15rem;
  --mf-brand-logo-mobile-size: 2.65rem;
  --mf-chip-height: 1.85rem;
  --mf-progress-height: .55rem;
  --mf-status-rail: .28rem;
  --mf-dot-size: .72rem;
  --mf-spark-size: .52rem;

  --mf-bg-page: #f4f0e8;
  --mf-bg-page-soft: #edf4f8;
  --mf-bg-page-glow: rgba(62, 198, 214, .12);
  --mf-bg-card: #fffaf2;
  --mf-bg-card-soft: #fbf4ea;
  --mf-bg-panel: #f7ecdb;
  --mf-bg-panel-strong: #efe0ca;
  --mf-bg-panel-glow: rgba(62, 198, 214, .14);
  --mf-bg-sidebar: #061533;
  --mf-bg-sidebar-soft: #020817;
  --mf-sidebar-glow: rgba(207, 162, 93, .18);
  --mf-sidebar-active-bg: rgba(207, 162, 93, .16);
  --mf-sidebar-active-border: rgba(255, 255, 255, .12);
  --mf-sidebar-control-bg: rgba(255, 255, 255, .08);
  --mf-bg-topbar: rgba(255, 250, 242, .9);
  --mf-bg-footer: rgba(255, 250, 242, .94);
  --mf-bg-code: rgba(7, 23, 53, .06);
  --mf-bg-chip: #fff7e8;
  --mf-bg-icon: #efe4d5;
  --mf-bg-track: #eadfcd;
  --mf-bg-scrim: rgba(3, 10, 24, .48);

  --mf-text-main: #182033;
  --mf-text-heading: #071735;
  --mf-text-muted: #65738b;
  --mf-text-subtle: #8290a4;
  --mf-text-inverted: #eef5ff;
  --mf-text-inverted-muted: #b7c7df;
  --mf-text-accent: #9b6a2d;
  --mf-text-code: #071735;
  --mf-text-on-accent: #09162e;

  --mf-border-soft: #e2d7c7;
  --mf-border-medium: #cbbda9;
  --mf-border-strong: #b8a58b;
  --mf-border-inverted: rgba(255, 255, 255, .12);
  --mf-border-accent: rgba(207, 162, 93, .62);

  --mf-accent: #f4c76d;
  --mf-accent-hover: #d99a35;
  --mf-accent-strong: #a9792f;
  --mf-accent-soft: rgba(244, 199, 109, .24);
  --mf-cyan: #43d4e3;
  --mf-cyan-soft: rgba(67, 212, 227, .14);
  --mf-violet: #8d73ff;
  --mf-violet-soft: rgba(141, 115, 255, .13);

  --mf-success: #14864f;
  --mf-success-soft: #e7f5e8;
  --mf-success-border: #b9dfbf;
  --mf-warning: #9a6817;
  --mf-warning-soft: #fff0cf;
  --mf-warning-border: #e8c778;
  --mf-danger: #b0382e;
  --mf-danger-soft: #fde5df;
  --mf-danger-border: #efb9ad;
  --mf-info: #2468a8;
  --mf-info-soft: #e7f0fa;
  --mf-info-border: #b6d2ee;

  --mf-link: #2d5f9d;
  --mf-link-hover: #173f7d;
  --mf-control-bg: #ffffff;
  --mf-control-bg-hover: #fff7e8;
  --mf-control-text: #071735;
  --mf-control-border: #d9cdbc;
  --mf-control-border-hover: #cfa25d;
  --mf-input-bg: #ffffff;
  --mf-input-text: #182033;
  --mf-input-placeholder: #8794a9;
  --mf-input-border: #cfd7e2;
  --mf-input-border-focus: #cfa25d;
  --mf-editor-bg: #ffffff;
  --mf-editor-text: #14151b;
  --mf-modal-bg: #fffaf2;
  --mf-modal-head-bg: #f5e8d6;
  --mf-table-head-bg: #f3e6d4;

  --mf-shadow-card: 0 1.1rem 3rem rgba(7, 27, 74, .10);
  --mf-shadow-card-hover: 0 1.4rem 3.4rem rgba(7, 27, 74, .14);
  --mf-shadow-modal: 0 2rem 6rem rgba(3, 10, 24, .32);
  --mf-shadow-sidebar: .7rem 0 2rem rgba(2, 8, 23, .18);
  --mf-shadow-control: 0 .35rem 1rem rgba(7, 27, 74, .06);
  --mf-shadow-input: inset 0 .06rem .1rem rgba(7, 27, 74, .04);
  --mf-shadow-editor: inset 0 0 0 1px rgba(7, 27, 74, .04);
  --mf-shadow-brand: 0 1rem 2.6rem rgba(207, 162, 93, .32);
  --mf-shadow-dot: 0 0 0 .25rem rgba(20, 134, 79, .14);

  --mf-focus-ring: .18rem solid rgba(207, 162, 93, .34);
  --mf-focus-offset: .12rem;
  --mf-backdrop-blur: blur(16px);
  --mf-blur-xs: 3px;
  --mf-blur-lg: 28px;
  --mf-opacity-disabled: .48;
  --mf-motion-fast: 150ms ease;
  --mf-motion-normal: 220ms ease;
  --mf-z-content: 1;
  --mf-z-topbar: 40;
  --mf-z-sidebar: 50;
  --mf-z-side-panel: 55;
  --mf-z-bottom-bar: 60;
  --mf-z-footer: var(--mf-z-bottom-bar);
  --mf-z-drawer-backdrop: 110;
  --mf-z-drawer: 120;
  --mf-z-modal-backdrop: 130;
  --mf-z-modal: 140;
  --mf-z-popover: 150;
  --mf-z-toast: 170;

  /* Deprecated aliases: kept only while old templates/classes are migrated. */
  --bg: var(--mf-bg-page);
  --panel: var(--mf-bg-card);
  --panel2: var(--mf-bg-panel);
  --paper: var(--mf-bg-card);
  --surface: var(--mf-bg-card);
  --surface-soft: var(--mf-bg-panel);
  --ink: var(--mf-text-main);
  --muted: var(--mf-text-muted);
  --line: var(--mf-border-soft);
  --line-strong: var(--mf-border-strong);
  --accent: var(--mf-accent);
  --accent2: var(--mf-accent-hover);
  --accent-strong: var(--mf-accent-strong);
  --danger: var(--mf-danger);
  --navy: var(--mf-text-heading);
  --navy-900: var(--mf-text-heading);
  --navy-800: var(--mf-text-heading);
  --navy-700: var(--mf-text-heading);
  --navy2: var(--mf-bg-sidebar);
  --gold-500: var(--mf-accent);
  --gold-600: var(--mf-accent-strong);
}

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

  --mf-bg-page: #090f1d;
  --mf-bg-page-soft: #0d1628;
  --mf-bg-page-glow: rgba(67, 212, 227, .10);
  --mf-bg-card: #121a2b;
  --mf-bg-card-soft: #172139;
  --mf-bg-panel: #18233a;
  --mf-bg-panel-strong: #202d49;
  --mf-bg-panel-glow: rgba(141, 115, 255, .13);
  --mf-bg-sidebar: #071126;
  --mf-bg-sidebar-soft: #040917;
  --mf-sidebar-glow: rgba(244, 199, 109, .13);
  --mf-sidebar-active-bg: rgba(244, 199, 109, .14);
  --mf-sidebar-active-border: rgba(255, 255, 255, .14);
  --mf-sidebar-control-bg: rgba(255, 255, 255, .07);
  --mf-bg-topbar: rgba(14, 21, 36, .88);
  --mf-bg-footer: rgba(13, 20, 34, .93);
  --mf-bg-code: rgba(255, 255, 255, .08);
  --mf-bg-chip: #202b44;
  --mf-bg-icon: #242a3b;
  --mf-bg-track: #28344f;
  --mf-bg-scrim: rgba(0, 0, 0, .58);

  --mf-text-main: #edf2ff;
  --mf-text-heading: #ffffff;
  --mf-text-muted: #aab6cb;
  --mf-text-subtle: #8795ad;
  --mf-text-inverted: #f4f7ff;
  --mf-text-inverted-muted: #aeb9cc;
  --mf-text-accent: #ffd173;
  --mf-text-code: #ffffff;
  --mf-text-on-accent: #071126;

  --mf-border-soft: #293653;
  --mf-border-medium: #3b4a6b;
  --mf-border-strong: #556586;
  --mf-border-inverted: rgba(255, 255, 255, .12);
  --mf-border-accent: rgba(244, 199, 109, .54);

  --mf-accent: #ffd36c;
  --mf-accent-hover: #f0b84d;
  --mf-accent-strong: #ffdf93;
  --mf-accent-soft: rgba(255, 211, 108, .14);
  --mf-cyan: #58deeb;
  --mf-cyan-soft: rgba(88, 222, 235, .12);
  --mf-violet: #a894ff;
  --mf-violet-soft: rgba(168, 148, 255, .14);

  --mf-success: #69df93;
  --mf-success-soft: rgba(105, 223, 147, .13);
  --mf-success-border: rgba(105, 223, 147, .34);
  --mf-warning: #ffd173;
  --mf-warning-soft: rgba(255, 209, 115, .15);
  --mf-warning-border: rgba(255, 209, 115, .34);
  --mf-danger: #ff8e82;
  --mf-danger-soft: rgba(255, 142, 130, .15);
  --mf-danger-border: rgba(255, 142, 130, .34);
  --mf-info: #8cc8ff;
  --mf-info-soft: rgba(140, 200, 255, .13);
  --mf-info-border: rgba(140, 200, 255, .34);

  --mf-link: #9dc8ff;
  --mf-link-hover: #c6dcff;
  --mf-control-bg: #202b44;
  --mf-control-bg-hover: #263453;
  --mf-control-text: #f4f7ff;
  --mf-control-border: #33425f;
  --mf-control-border-hover: #5d6f97;
  --mf-input-bg: #0e1728;
  --mf-input-text: #edf2ff;
  --mf-input-placeholder: #8390a6;
  --mf-input-border: #33425f;
  --mf-input-border-focus: #ffd36c;
  --mf-editor-bg: #0a1020;
  --mf-editor-text: #f5f1e8;
  --mf-modal-bg: #121a2b;
  --mf-modal-head-bg: #172139;
  --mf-table-head-bg: #18233a;

  --mf-shadow-card: 0 1.2rem 3.2rem rgba(0, 0, 0, .28);
  --mf-shadow-card-hover: 0 1.5rem 3.6rem rgba(0, 0, 0, .34);
  --mf-shadow-modal: 0 2.2rem 6rem rgba(0, 0, 0, .58);
  --mf-shadow-sidebar: .7rem 0 2rem rgba(0, 0, 0, .34);
  --mf-shadow-control: 0 .35rem 1rem rgba(0, 0, 0, .18);
  --mf-shadow-input: inset 0 .08rem .14rem rgba(0, 0, 0, .22);
  --mf-shadow-editor: inset 0 0 0 1px rgba(255, 255, 255, .05);
  --mf-shadow-brand: 0 1rem 2.6rem rgba(244, 199, 109, .22);
  --mf-shadow-dot: 0 0 0 .25rem rgba(105, 223, 147, .12);

  --mf-focus-ring: .18rem solid rgba(255, 211, 108, .42);

  --navy: var(--mf-text-heading);
  --navy-900: var(--mf-text-heading);
  --navy-800: var(--mf-text-heading);
  --navy-700: var(--mf-text-heading);
}

html[data-mf-theme="vip-gold"] {
  color-scheme: light;

  --mf-bg-page: #f7efe4;
  --mf-bg-page-soft: #fff7ec;
  --mf-bg-card: #fffaf0;
  --mf-bg-panel: #f7e7cc;
  --mf-bg-panel-strong: #ead2aa;
  --mf-bg-sidebar: #1f172f;
  --mf-bg-sidebar-soft: #120d1e;
  --mf-text-heading: #1f172f;
  --mf-text-main: #261f33;
  --mf-text-muted: #6b6076;
  --mf-accent: #e7b95e;
  --mf-accent-hover: #c89132;
  --mf-accent-strong: #916221;
  --mf-border-soft: #e5cfaa;
}