:root {
  --font-interface: 'Manrope', 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Vibe School brand palette. Product shells consume these values through
     semantic aliases instead of embedding brand colours in templates. */
  --vibe-paper: #f5f7f6;
  --vibe-surface: #ffffff;
  --vibe-sand: #eef3f1;
  --vibe-ink: #17231f;
  --vibe-muted: #64726d;
  --vibe-brand-900: #123c32;
  --vibe-palm-100: #e5f2ed;
  --vibe-palm-600: #1e6654;
  --vibe-palm-700: #174f42;
  --vibe-ocean: #75c6c4;
  --vibe-sun: #f5c84c;
  --vibe-coral: #ef8f72;
  --vibe-coral-100: #f7e2db;
  --vibe-palm-rgb: 30 102 84;
  --vibe-ink-rgb: 23 35 31;
  --vibe-white-rgb: 255 255 255;
  --vibe-shadow-rgb: 0 0 0;

  /* Parent and learner portals keep a calmer canvas than the operational
     backoffice. These aliases isolate learning from backoffice palette edits. */
  --portal-page-bg: #fffdf8;
  --portal-surface: #ffffff;
  --portal-surface-soft: #f7f1e7;

  /* Backoffice semantic theme. */
  --backoffice-page-bg: var(--vibe-paper);
  --backoffice-surface: var(--vibe-surface);
  --backoffice-surface-soft: var(--vibe-sand);
  --backoffice-text: var(--vibe-ink);
  --backoffice-text-muted: var(--vibe-muted);
  --backoffice-primary: var(--vibe-palm-600);
  --backoffice-primary-hover: var(--vibe-palm-700);
  --backoffice-primary-soft: var(--vibe-palm-100);
  --backoffice-accent: var(--vibe-ocean);
  --backoffice-sidebar-bg: var(--vibe-brand-900);
  --backoffice-sidebar-text: var(--vibe-palm-100);
  --backoffice-sidebar-hover: rgb(var(--vibe-white-rgb) / 0.08);
  --backoffice-sidebar-active: var(--vibe-palm-600);
  --backoffice-sidebar-active-text: var(--vibe-surface);
  --backoffice-border: rgb(var(--vibe-ink-rgb) / 0.12);
  --backoffice-border-soft: rgb(var(--vibe-ink-rgb) / 0.08);

  /* Extended state palette used by badges, alerts and operational tables. */
  --color-on-primary: #ffffff;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-neutral-50: #f9fafb;
  --color-neutral-100: #f3f4f6;
  --color-neutral-600: #475569;
  --color-neutral-700: #4b5563;
  --color-text-strong: #1e293b;
  --color-success-50: #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-300: #86efac;
  --color-success-600: #059669;
  --color-success-700: #15803d;
  --color-success-800: #166534;
  --color-success-900: #14532d;
  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-danger-50: #fff1f2;
  --color-danger-100: #fee2e2;
  --color-danger-red-200: #fecaca;
  --color-danger-200: #fecdd3;
  --color-danger-300: #fca5a5;
  --color-danger-700: #b91c1c;
  --color-danger-800: #991b1b;
  --color-danger-900: #9f1239;
  --color-info-50: #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-sky-100: #e0f2fe;
  --color-info-300: #93c5fd;
  --color-info-600: #2563eb;
  --color-info-sky-600: #0284c7;
  --color-info-sky-700: #0369a1;
  --color-info-700: #1e40af;
  --color-info-800: #1e3a8a;
  /* Guru.ru application primitives; aligned with the supplied prototype. */
  --ui-background: hsl(210 40% 98%);
  --ui-foreground: hsl(222 47% 11%);
  --ui-primary: hsl(328 100% 54%);
  --ui-primary-foreground: hsl(210 40% 98%);
  --ui-accent: hsl(142 70% 45%);
  --ui-muted: hsl(210 40% 96%);
  --ui-muted-foreground: hsl(215 16% 47%);
  --ui-focus-ring: hsl(217 91% 60%);
  --ui-danger: hsl(0 84% 60%);
  /* Primary (Teacher focused) */
  --color-primary-50: #eef4ff;
  --color-primary-100: #dce8ff;
  --color-primary-200: #bfd4ff;
  --color-primary-300: #8cb6ff;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;

  /* Secondary (Student / Games focused) */
  --color-secondary-50: #f3f0ff;
  --color-secondary-100: #e9e0ff;
  --color-secondary-300: #bda7ff;
  --color-secondary-500: #8b5cf6;
  --color-secondary-600: #7c3aed;
  --color-secondary-700: var(--vibe-palm-600);

  /* Success (Correct spelling, achievements) */
  --color-success-400: #22c55e;
  --color-success-500: #16a34a;
  --color-success-600: #15803d;

  /* Warning */
  --color-warning-400: #f59e0b;
  --color-warning-500: #d97706;
  --color-warning-600: #ca8a04;

  /* Danger / Error */
  --color-danger-400: #ef4444;
  --color-danger-500: #dc2626;
  --color-danger: var(--color-danger-500);

  /* Neutral colors */
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-soft: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-text: #0f172a;
  --color-text-soft: #334155;
  --color-text-muted: #64748b;
  --color-disabled: #94a3b8;

  /* Typography Sizes */
  --text-xxs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;

  /* Spacing system (4px steps) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px hsl(217 91% 60% / .35);
  --shadow-primary-focus: 0 0 0 3px rgb(59 130 246 / 0.15);
  --shadow-danger-focus: 0 0 0 3px rgb(220 38 38 / 0.2);
  --overlay-medium: rgb(15 23 42 / 0.55);
  --overlay-strong: rgb(15 23 42 / 0.65);
  --overlay-builder: rgb(15 23 42 / 0.6);
}

/* The default Vibe scheme exposes its palm palette through shared primitives. */
:root[data-theme="vibe"] {
  --ui-primary: var(--vibe-palm-600);
  --ui-primary-foreground: var(--vibe-surface);
  --ui-focus-ring: var(--vibe-palm-600);
  --color-primary-50: color-mix(in srgb, var(--vibe-palm-100) 45%, var(--vibe-surface));
  --color-primary-100: var(--vibe-palm-100);
  --color-primary-200: color-mix(in srgb, var(--vibe-palm-600) 22%, var(--vibe-surface));
  --color-primary-300: color-mix(in srgb, var(--vibe-palm-600) 42%, var(--vibe-surface));
  --color-primary-500: var(--vibe-palm-600);
  --color-primary-600: var(--vibe-palm-600);
  --color-primary-700: var(--vibe-palm-700);
  --color-primary-800: var(--vibe-brand-900);
  --shadow-primary-focus: 0 0 0 3px rgb(var(--vibe-palm-rgb) / 0.15);
}

/* Alternative palette sourced from the Yoshkola product site. All product
   shells inherit it through the same semantic Vibe variables. */
:root[data-theme="yoshkola"] {
  --vibe-paper: #fffbfb;
  --vibe-surface: #ffffff;
  --vibe-sand: #e3e9f8;
  --vibe-ink: #011c4c;
  --vibe-muted: #52627d;
  --vibe-brand-900: #011c4c;
  --vibe-palm-100: #e3e9f8;
  --vibe-palm-600: #145ddd;
  --vibe-palm-700: #0d47ad;
  --vibe-ocean: #33c540;
  --vibe-sun: #ffce24;
  --vibe-coral: #f2299a;
  --vibe-coral-100: #fde1f1;
  --vibe-palm-rgb: 20 93 221;
  --vibe-ink-rgb: 1 28 76;
  --vibe-white-rgb: 255 255 255;
  --vibe-shadow-rgb: 1 28 76;
  --portal-page-bg: #fffbfb;
  --portal-surface: #ffffff;
  --portal-surface-soft: #f5f7ff;
  --ui-primary: var(--vibe-palm-600);
  --ui-primary-foreground: var(--vibe-surface);
  --ui-accent: var(--vibe-ocean);
  --ui-muted: var(--vibe-sand);
  --ui-muted-foreground: var(--vibe-muted);
  --ui-focus-ring: var(--vibe-sun);
  --color-primary-50: #eef4ff;
  --color-primary-100: #dbe7ff;
  --color-primary-300: #8bb0f2;
  --color-primary-500: #2870e8;
  --color-primary-600: #145ddd;
  --color-primary-700: #0d47ad;
  --color-secondary-50: #fff1f9;
  --color-secondary-100: #fde1f1;
  --color-secondary-300: #f68ac5;
  --color-secondary-500: #f2299a;
  --color-secondary-600: #cc197c;
  --color-secondary-700: #a51365;
  --color-bg: var(--vibe-paper);
  --color-surface: var(--vibe-surface);
  --color-surface-soft: var(--vibe-sand);
  --color-border: rgb(var(--vibe-ink-rgb) / 0.14);
  --color-border-strong: rgb(var(--vibe-ink-rgb) / 0.24);
  --color-text: var(--vibe-ink);
  --color-text-soft: #263e68;
  --color-text-muted: var(--vibe-muted);
  --color-disabled: #8292ad;
}