/*
 * Everidays design contract
 * Primitive tokens describe the scale; semantic tokens describe intent.
 * Designer-provided themes should override semantic tokens, not component selectors.
 */
:root {
  color-scheme: light;

  /* Typography */
  --font-family-sans: "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif;
  --font-family-mono: ui-monospace, consolas, monospace;
  --font-size-2xs: 0.625rem;
  --font-size-xs: 0.6875rem;
  --font-size-sm: 0.75rem;
  --font-size-md: 0.8125rem;
  --font-size-base: 0.875rem;
  --font-size-lg: 1.0625rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-page-title: 1.875rem;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --line-height-reset: 1;
  --line-height-tight: 1.2;
  --line-height-body: 1.6;
  --line-height-relaxed: 1.8;

  /* Spacing: standard 4px base scale with half steps for compact controls. */
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-13: 3.25rem;

  /* Shape and elevation */
  --radius-xs: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.75rem;
  --radius-dialog: 1rem;
  --radius-guest-brand-card: 2.375rem;
  --radius-round: 50%;
  --radius-pill: 999px;
  --shadow-resting: 0 3px 12px rgb(20 45 70 / 4%);
  --shadow-raised: 0 14px 38px rgb(20 45 70 / 9%);
  --shadow-dialog: 0 28px 90px rgb(10 30 50 / 28%);
  --shadow-drawer: -20px 0 60px rgb(0 0 0 / 22%);
  --shadow-sidebar: 20px 0 50px rgb(10 30 50 / 25%);
  --shadow-focus: 0 0 0 3px rgb(15 76 92 / 18%);
  --shadow-selection: inset 0 0 0 1px var(--color-brand);
  --shadow-state-edge: inset 4px 0 0 var(--color-state-accent);
  --shadow-state-tab: 0 -3px 0 var(--color-state-accent) inset;

  /* Primitive palette */
  --palette-navy-950: #091720;
  --palette-navy-900: #12324a;
  --palette-navy-800: #173d55;
  --palette-blue-800: #1f4e78;
  --palette-blue-700: #24799a;
  --palette-blue-600: #1d6fa5;
  --palette-blue-500: #427ca5;
  --palette-blue-400: #4aa9d8;
  --palette-blue-300: #76aeca;
  --palette-blue-200: #9bd3f0;
  --palette-blue-100: #c4ddea;
  --palette-blue-075: #d9eaf7;
  --palette-blue-050: #eaf4fa;
  --palette-slate-950: #172536;
  --palette-slate-800: #31485d;
  --palette-slate-700: #405267;
  --palette-slate-600: #52657a;
  --palette-slate-500: #657588;
  --palette-slate-350: #afc1cf;
  --palette-slate-300: #bccbd8;
  --palette-slate-200: #d9e3ec;
  --palette-slate-100: #edf2f6;
  --palette-slate-050: #f4f7fa;
  --palette-slate-025: #f8fafc;
  --palette-white: #fff;
  --palette-purple-900: #40364a;
  --palette-purple-800: #4f3a74;
  --palette-purple-700: #5c2478;
  --palette-purple-600: #6f2d91;
  --palette-purple-500: #8446a5;
  --palette-purple-400: #9c7bc8;
  --palette-purple-300: #c4a5dc;
  --palette-purple-200: #d8d1df;
  --palette-purple-150: #e6e0ed;
  --palette-purple-100: #eee7f4;
  --palette-purple-050: #f5f2f7;
  --palette-green-800: #126a46;
  --palette-green-600: #19875c;
  --palette-green-500: #548235;
  --palette-green-050: #e4f5ed;
  --palette-amber-900: #674e08;
  --palette-amber-800: #8a5100;
  --palette-amber-700: #b76b00;
  --palette-amber-600: #cf7b15;
  --palette-amber-300: #e0b44c;
  --palette-amber-100: #fff2cc;
  --palette-amber-050: #fff0dd;
  --palette-red-800: #b42318;
  --palette-red-700: #b33434;
  --palette-red-600: #c73b3b;
  --palette-red-500: #d92d20;
  --palette-red-200: #e3a3a3;
  --palette-red-050: #fbe8e8;

  /* Transparent primitives for overlays, glass surfaces, and shadows. */
  --palette-overlay-navy-62: rgb(10 25 38 / 62%);
  --palette-overlay-navy-58: rgb(11 31 46 / 58%);
  --palette-overlay-purple-14: rgb(118 84 168 / 14%);
  --palette-overlay-white-97: rgb(255 255 255 / 97%);
  --palette-overlay-white-96: rgb(255 255 255 / 96%);
  --palette-overlay-white-45: rgb(255 255 255 / 45%);
  --palette-overlay-white-28: rgb(255 255 255 / 28%);

  /* Provider marks retain their official brand colors. */
  --color-provider-microsoft-red: #f25022;
  --color-provider-microsoft-green: #7fba00;
  --color-provider-microsoft-blue: #00a4ef;
  --color-provider-microsoft-yellow: #ffb900;

  /* Semantic color contract: this is the designer mapping layer. */
  --color-brand-strong: var(--palette-navy-900);
  --color-brand: var(--palette-blue-600);
  --color-brand-subtle: var(--palette-blue-050);
  --color-text: var(--palette-slate-950);
  --color-text-secondary: var(--palette-slate-500);
  --color-text-control: var(--palette-slate-700);
  --color-surface: var(--palette-white);
  --color-surface-subtle: var(--palette-slate-050);
  --color-surface-muted: var(--palette-slate-100);
  --color-border: var(--palette-slate-200);
  --color-border-control: var(--palette-slate-300);
  --color-success: var(--palette-green-600);
  --color-success-subtle: var(--palette-green-050);
  --color-warning: var(--palette-amber-700);
  --color-warning-subtle: var(--palette-amber-050);
  --color-danger: var(--palette-red-700);
  --color-danger-subtle: var(--palette-red-050);
  --color-success-text: var(--palette-green-800);
  --color-danger-text: var(--palette-red-800);
  --color-print-text: var(--palette-slate-950);
  --color-print-border: var(--palette-slate-350);
  --color-print-heading: var(--palette-slate-100);

  /* Component contract */
  --app-header-height: 68px;
  --app-sidebar-width: 220px;
  --app-sidebar-collapsed-width: 72px;
  --content-max-width: 1500px;
  --content-gutter-wide: 4rem;
  --content-guest-card-padding-wide: 3.5rem;
  --content-manual-page-bottom-space: 4.5rem;
  --content-manual-anchor-offset: 9rem;
  --content-manual-step-indent: 2.75rem;
  --control-height: 40px;
  --control-height-compact: 36px;
  --control-height-touch: 44px;
  --control-radius: var(--radius-md);
  --panel-radius: var(--radius-xl);
  --panel-padding: var(--space-6);
  --panel-shadow: var(--shadow-resting);
  --z-sticky: 20;
  --z-content: 5;
  --z-navigation: 8;
  --z-raised: 10;
  --z-sidebar: 25;
  --z-mobile-toggle: 26;
  --z-overlay: 30;
}

.guest-theme {
  --color-brand-strong: var(--palette-purple-900);
  --color-brand: var(--palette-purple-500);
  --color-brand-subtle: var(--palette-purple-100);
}