/*
 * MetaSalon Central Design Tokens
 * This file is the only permitted source for colors, typography families,
 * radii, motion timing, shared shadows, gradients, and shell dimensions.
 */

@font-face {
  font-family: "Estedad";
  src: url("../../fonts/Estedad-FD-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Estedad";
  src: url("../../fonts/Estedad-FD-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Estedad";
  src: url("../../fonts/Estedad-FD-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Estedad";
  src: url("../../fonts/Estedad-FD-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Estedad";
  src: url("../../fonts/Estedad-FD-Black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Primitive palette */
  --ms-color-transparent: transparent;
  --ms-color-white: #ffffff;
  --ms-color-black: #000000;
  --ms-color-ink-950: #17102f;
  --ms-color-ink-900: #24174a;
  --ms-color-ink-800: #302a42;
  --ms-color-ink-700: #474155;
  --ms-color-slate-900: #0f172a;
  --ms-color-slate-800: #1e293b;
  --ms-color-slate-700: #334155;
  --ms-color-slate-600: #475569;
  --ms-color-slate-500: #64748b;
  --ms-color-slate-400: #94a3b8;
  --ms-color-slate-300: #cbd5e1;
  --ms-color-slate-200: #e2e8f0;
  --ms-color-slate-100: #f1f5f9;
  --ms-color-slate-50: #f8fafc;
  --ms-color-pearl: #fbfafe;
  --ms-color-surface-soft: #f7f5fc;
  --ms-color-border: #e9e4f4;
  --ms-color-border-strong: #d9d0eb;
  --ms-color-violet-900: #35166f;
  --ms-color-violet-800: #431a8f;
  --ms-color-violet-700: #511db1;
  --ms-color-violet-600: #6425d8;
  --ms-color-violet-500: #7a3ff2;
  --ms-color-violet-400: #9b6dff;
  --ms-color-violet-300: #bea2ff;
  --ms-color-violet-200: #dacbff;
  --ms-color-violet-100: #ece4ff;
  --ms-color-violet-50: #f6f2ff;
  --ms-color-fuchsia-700: #a9128f;
  --ms-color-fuchsia-600: #bc16a1;
  --ms-color-fuchsia-500: #d51bb8;
  --ms-color-fuchsia-400: #ec3ccb;
  --ms-color-fuchsia-300: #f073db;
  --ms-color-fuchsia-200: #f5b5eb;
  --ms-color-fuchsia-100: #f8eafb;
  --ms-color-fuchsia-50: #fdf6fd;
  --ms-color-coral-700: #c91b3f;
  --ms-color-coral-600: #ed284d;
  --ms-color-coral-500: #ff4f64;
  --ms-color-coral-400: #ff766a;
  --ms-color-coral-300: #ffa398;
  --ms-color-coral-200: #ffc9c1;
  --ms-color-coral-100: #ffe2de;
  --ms-color-coral-50: #fff3f2;
  --ms-color-peach: #ffb38e;
  --ms-color-success-700: #166534;
  --ms-color-success-600: #14966f;
  --ms-color-success-500: #20a87d;
  --ms-color-success-300: #70cfaa;
  --ms-color-success-200: #86efac;
  --ms-color-success-100: #dcfce7;
  --ms-color-success-50: #ecfdf5;
  --ms-color-warning-800: #92400e;
  --ms-color-warning-700: #a66b22;
  --ms-color-warning-600: #c17814;
  --ms-color-warning-500: #f59e0b;
  --ms-color-warning-300: #fcd34d;
  --ms-color-warning-100: #fef3c7;
  --ms-color-danger-800: #991b1b;
  --ms-color-danger-700: #b91c1c;
  --ms-color-danger-600: #cb334d;
  --ms-color-danger-500: #dc2626;
  --ms-color-danger-400: #ef4444;
  --ms-color-danger-100: #fee2e2;
  --ms-color-info-700: #0e7490;
  --ms-color-info-600: #1689a7;
  --ms-color-info-500: #2c73d2;
  --ms-color-info-100: #e0f2fe;

  /* Typography */
  --ms-font-sans: "Estedad", Tahoma, "Segoe UI", Arial, sans-serif;
  --ms-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Semantic colors */
  --ms-ink: var(--ms-color-ink-800);
  --ms-ink-strong: var(--ms-color-ink-950);
  --ms-ink-muted: var(--ms-color-ink-700);
  --ms-surface: var(--ms-color-white);
  --ms-surface-elevated: var(--ms-color-white);
  --ms-surface-soft: var(--ms-color-pearl);
  --ms-surface-accent: var(--ms-color-violet-50);
  --ms-border: var(--ms-color-border);
  --ms-border-strong: var(--ms-color-border-strong);
  --ms-primary: var(--ms-color-fuchsia-500);
  --ms-primary-strong: var(--ms-color-violet-600);
  --ms-primary-soft: var(--ms-color-fuchsia-100);
  --ms-secondary: var(--ms-color-violet-500);
  --ms-secondary-strong: var(--ms-color-violet-600);
  --ms-secondary-soft: var(--ms-color-violet-100);
  --ms-accent: var(--ms-color-coral-500);
  --ms-accent-soft: var(--ms-color-coral-50);
  --ms-peach: var(--ms-color-peach);
  --ms-success: var(--ms-color-success-600);
  --ms-warning: var(--ms-color-warning-600);
  --ms-danger: var(--ms-color-danger-600);
  --ms-info: var(--ms-color-info-600);
  --ms-focus: var(--ms-color-coral-300);
  --ms-panel-ink: var(--ms-color-ink-950);
  --ms-panel-ink-soft: var(--ms-color-ink-900);
  --ms-panel-background: var(--ms-color-surface-soft);
  --ms-panel-surface: color-mix(in srgb, var(--ms-color-white) 86%, transparent);
  --ms-panel-border: color-mix(in srgb, var(--ms-color-violet-500) 12%, transparent);
  --ms-panel-text: var(--ms-color-ink-800);
  --ms-panel-muted: var(--ms-color-slate-500);

  /* Glass and gradients */
  --ms-glass-surface: color-mix(in srgb, var(--ms-color-white) 72%, transparent);
  --ms-glass-surface-strong: color-mix(in srgb, var(--ms-color-white) 90%, transparent);
  --ms-glass-border: color-mix(in srgb, var(--ms-color-white) 72%, transparent);
  --ms-brand-line: color-mix(in srgb, var(--ms-secondary) 12%, transparent);
  --ms-gradient-brand: linear-gradient(120deg, var(--ms-accent) 0%, var(--ms-primary) 48%, var(--ms-secondary) 100%);
  --ms-gradient-brand-soft: linear-gradient(120deg, color-mix(in srgb, var(--ms-accent) 12%, transparent), color-mix(in srgb, var(--ms-primary) 10%, transparent) 48%, color-mix(in srgb, var(--ms-secondary) 12%, transparent));

  /* Radius scale */
  --ms-radius-2xs: 0.5rem;
  --ms-radius-xs: 0.65rem;
  --ms-radius-sm: 0.75rem;
  --ms-radius-md: 0.9rem;
  --ms-radius-lg: 1rem;
  --ms-radius-xl: 1.25rem;
  --ms-radius-2xl: 1.5rem;
  --ms-radius-3xl: 2rem;
  --ms-radius-4xl: 2.6rem;
  --ms-radius-pill: 999px;
  --ms-radius-round: 50%;
  --ms-panel-radius: 1.375rem;

  /* Elevation */
  --ms-shadow-xs: 0 0.5rem 1.5rem color-mix(in srgb, var(--ms-color-ink-950) 5%, transparent);
  --ms-shadow-sm: 0 1rem 2.625rem color-mix(in srgb, var(--ms-color-ink-950) 8%, transparent);
  --ms-shadow-md: 0 1.5rem 4.375rem color-mix(in srgb, var(--ms-color-ink-950) 10%, transparent);
  --ms-shadow-lg: 0 1.875rem 5.625rem color-mix(in srgb, var(--ms-secondary) 20%, transparent);
  --ms-shadow-panel: 0 1.375rem 3.75rem color-mix(in srgb, var(--ms-color-ink-900) 8%, transparent);

  /* Motion */
  --ms-duration-fast: 180ms;
  --ms-duration-normal: 240ms;
  --ms-duration-slow: 650ms;
  --ms-delay-1: 90ms;
  --ms-delay-2: 180ms;
  --ms-delay-3: 270ms;
  --ms-ease-standard: ease;
  --ms-ease-emphasized: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ms-transition: var(--ms-duration-fast) var(--ms-ease-standard);

  /* Layout */
  --ms-content-width: 78rem;
  --ms-header-height: 5.5rem;
  --ms-panel-sidebar-width: 292px;
  --ms-panel-topbar-height: 86px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ms-ink: var(--ms-color-violet-100);
  --ms-ink-strong: var(--ms-color-white);
  --ms-ink-muted: var(--ms-color-violet-300);
  --ms-surface: var(--ms-color-ink-950);
  --ms-surface-elevated: var(--ms-color-ink-900);
  --ms-surface-soft: var(--ms-color-slate-900);
  --ms-surface-accent: var(--ms-color-violet-900);
  --ms-border: var(--ms-color-violet-800);
  --ms-border-strong: var(--ms-color-violet-700);
  --ms-primary: var(--ms-color-fuchsia-300);
  --ms-primary-strong: var(--ms-color-violet-300);
  --ms-primary-soft: var(--ms-color-fuchsia-700);
  --ms-secondary: var(--ms-color-violet-400);
  --ms-secondary-strong: var(--ms-color-violet-300);
  --ms-secondary-soft: var(--ms-color-violet-900);
  --ms-accent: var(--ms-color-coral-300);
  --ms-accent-soft: var(--ms-color-coral-700);
  --ms-focus: var(--ms-color-coral-300);
  --ms-glass-surface: color-mix(in srgb, var(--ms-color-ink-950) 72%, transparent);
  --ms-glass-surface-strong: color-mix(in srgb, var(--ms-color-ink-900) 90%, transparent);
  --ms-glass-border: color-mix(in srgb, var(--ms-color-white) 12%, transparent);
  --ms-brand-line: color-mix(in srgb, var(--ms-color-violet-300) 15%, transparent);
  --ms-shadow-xs: 0 0.5rem 1.5rem color-mix(in srgb, var(--ms-color-black) 18%, transparent);
  --ms-shadow-sm: 0 1rem 2.625rem color-mix(in srgb, var(--ms-color-black) 24%, transparent);
  --ms-shadow-md: 0 1.5rem 4.375rem color-mix(in srgb, var(--ms-color-black) 30%, transparent);
  --ms-shadow-lg: 0 2rem 6rem color-mix(in srgb, var(--ms-color-black) 40%, transparent);
}