/* ============================================================================
   Orchid Medical — Material 3 Design Tokens (m3.css)
   ============================================================================
   M3 baseline palette generated from brand seed #7C3AED (violet) with
   tertiary from orchid pink #DB2777 family. Implements the M3 color roles,
   type scale, shape scale, elevation system, state layers and motion tokens.

   Light palette is default on :root; dark palette lives under [data-theme="dark"]
   (the app already toggles this attribute + orchids localStorage key).
   ========================================================================== */

:root {
  /* ---- M3 Color Roles: Light (from seed #7C3AED, M3 theme builder) ---- */
  --md-primary: #65558f;
  --md-on-primary: #ffffff;
  --md-primary-container: #e9ddff;
  --md-on-primary-container: #21005d;
  --md-secondary: #625b71;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #e8def8;
  --md-on-secondary-container: #1e192b;
  --md-tertiary: #7d5260;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #ffd9e2;
  --md-on-tertiary-container: #310d1a;
  --md-error: #b3261e;
  --md-on-error: #ffffff;
  --md-error-container: #f9dedc;
  --md-on-error-container: #410e0b;
  --md-background: #fffbff;
  --md-on-background: #1d1b20;
  --md-surface: #fffbff;
  --md-on-surface: #1d1b20;
  --md-surface-container: #f3edf7;
  --md-surface-container-low: #f7f2fa;
  --md-surface-container-high: #ece6f0;
  --md-surface-variant: #e7e0ec;
  --md-on-surface-variant: #49454f;
  --md-outline: #79747e;
  --md-outline-variant: #cac4d0;
  --md-shadow: #000000;
  --md-scrim: #000000;
  --md-inverse-surface: #322f35;
  --md-inverse-on-surface: #f5eff7;
  --md-inverse-primary: #cdbcff;

  /* ---- M3 Type Scale ---- */
  --md-display-large: 57px/64px/0px;
  --md-display-medium: 45px/52px/0px;
  --md-display-small: 36px/44px/0px;
  --md-headline-large: 32px/40px/0px;
  --md-headline-medium: 28px/36px/0px;
  --md-headline-small: 24px/32px/0px;
  --md-title-large: 22px/28px/0px;
  --md-title-medium: 16px/24px/0.15px;
  --md-title-small: 14px/20px/0.1px;
  --md-body-large: 16px/24px/0.5px;
  --md-body-medium: 14px/20px/0.25px;
  --md-body-small: 12px/16px/0.4px;
  --md-label-large: 14px/20px/0.1px;
  --md-label-medium: 12px/16px/0.5px;
  --md-label-small: 11px/16px/0.5px;

  /* ---- M3 Shape Scale ---- */
  --md-shape-none: 0px;
  --md-shape-extra-small: 4px;
  --md-shape-small: 6px;          /* was 8px */
  --md-shape-medium: 8px;          /* was 12px */
  --md-shape-large: 12px;          /* was 16px */
  --md-shape-extra-large: 16px;    /* was 28px */
  --md-shape-full: 999px;          /* keep: switch track + scrollbar thumb only */

  /* ---- M3 Elevation (offsetX offsetY blur spread color) ---- */
  --md-elevation-0: none;
  --md-elevation-1: none;
  --md-elevation-2: none;
  --md-elevation-3: none;
  --md-elevation-4: none;
  --md-elevation-5: none;

  /* ---- M3 Motion ---- */
  --md-ease-emphasized-decelerate: cubic-bezier(.05,.7,.1,1);
  --md-ease-emphasized-accelerate: cubic-bezier(.3,0,.8,.15);
  --md-ease-standard: cubic-bezier(.2,0,0,1);
  --md-duration-short1: 50ms;
  --md-duration-short2: 100ms;
  --md-duration-short3: 150ms;
  --md-duration-short4: 200ms;
  --md-duration-medium1: 250ms;
  --md-duration-medium2: 300ms;
  --md-duration-medium3: 350ms;
  --md-duration-medium4: 400ms;
  --md-duration-long1: 450ms;
  --md-duration-long2: 500ms;
  --md-duration-long3: 550ms;
  --md-duration-long4: 600ms;

  /* ---- M3 State Layer Opacities ---- */
  --md-state-hover: .08;
  --md-state-focus: .12;
  --md-state-pressed: .12;
  --md-state-dragged: .16;

  /* ---- Spacing (4dp grid — M3 standard) ---- */
  --md-space-1: 4px; --md-space-2: 8px; --md-space-3: 12px;
  --md-space-4: 16px; --md-space-5: 24px; --md-space-6: 32px;
  --md-space-7: 48px; --md-space-8: 64px;

  /* ======================================================================
     BACKWARD-COMPAT ALIASES — legacy components (btn, card, form-*, badge,
     alert, auth-*, stat-*, tab-*, modal-*, sidebar-*, data-table...) map
     onto M3 roles so existing markup re-skins without class renames.
     Legacy --primary etc. keep resolving to M3 colors.
     ====================================================================== */
  --primary: var(--md-primary);
  --primary-dark: #4f378b;
  --primary-darker: #381e72;
  --primary-light: var(--md-primary-container);
  --primary-bg: rgba(101,85,143,.08);
  --primary-bg-strong: rgba(101,85,143,.16);
  --primary-50: #f3edff;
  --primary-100: var(--md-primary-container);
  --primary-600: var(--md-primary);
  --primary-700: #4f378b;
  --primary-border: var(--md-primary-container);

  --accent: var(--md-tertiary);
  --accent-dark: #633b48;
  --accent-light: var(--md-tertiary-container);
  --accent-bg: rgba(125,82,96,.08);
  --accent-bg-strong: rgba(125,82,96,.16);

  --bg: var(--md-background);
  --bg-warm: #f7f2fa;
  --surface: var(--md-surface);
  --surface-hover: #f3edf7;
  --surface-raised: #ffffff;

  --text: var(--md-on-surface);
  --text-secondary: var(--md-on-surface-variant);
  --text-muted: var(--md-outline);
  --text-on-primary: var(--md-on-primary);

  --line: var(--md-outline-variant);
  --line-light: #ece6f0;
  --line-strong: var(--md-outline);

  --success: #2e7d32;
  --success-bg: rgba(46,125,50,.10);
  --success-border: rgba(46,125,50,.28);
  --warning: #b26a00;
  --warning-bg: rgba(178,106,0,.10);
  --warning-border: rgba(178,106,0,.28);
  --error: var(--md-error);
  --error-bg: var(--md-error-container);
  --error-border: rgba(179,38,30,.28);
  --info: #00639b;
  --info-bg: rgba(0,99,155,.10);
  --info-border: rgba(0,99,155,.28);

  --radius: var(--md-shape-medium);
  --radius-sm: var(--md-shape-extra-small);
  --radius-md: var(--md-shape-medium);
  --radius-lg: var(--md-shape-large);
  --radius-pill: var(--md-shape-full);

  --shadow-xs: var(--md-elevation-1);
  --shadow-sm: var(--md-elevation-1);
  --shadow-md: var(--md-elevation-2);
  --shadow-lg: var(--md-elevation-3);
  --shadow-xl: var(--md-elevation-4);

  --ease: var(--md-ease-standard);
  --t-fast: 150ms var(--md-ease-standard);
  --t-base: 250ms var(--md-ease-standard);
  --t-slow: 400ms var(--md-ease-emphasized-decelerate);
}

/* ---- M3 Color Roles: Dark ---- */
[data-theme="dark"] {
  --md-primary: #cdbcff;
  --md-on-primary: #381e72;
  --md-primary-container: #4f378b;
  --md-on-primary-container: #e9ddff;
  --md-secondary: #cbc2db;
  --md-on-secondary: #332d41;
  --md-secondary-container: #4a4458;
  --md-on-secondary-container: #e8def8;
  --md-tertiary: #efb8c8;
  --md-on-tertiary: #492532;
  --md-tertiary-container: #633b48;
  --md-on-tertiary-container: #ffd9e2;
  --md-error: #f2b8b5;
  --md-on-error: #601410;
  --md-error-container: #8c1d18;
  --md-on-error-container: #f9dedc;
  --md-background: #141218;
  --md-on-background: #e6e0e9;
  --md-surface: #141218;
  --md-on-surface: #e6e0e9;
  --md-surface-container: #211f26;
  --md-surface-container-low: #1d1b20;
  --md-surface-container-high: #2b2930;
  --md-surface-variant: #49454f;
  --md-on-surface-variant: #cac4d0;
  --md-outline: #938f99;
  --md-outline-variant: #49454f;
  --md-shadow: #000000;
  --md-scrim: #000000;
  --md-inverse-surface: #e6e0e9;
  --md-inverse-on-surface: #322f35;
  --md-inverse-primary: #65558f;

  --primary: var(--md-primary);
  --primary-dark: var(--md-primary-container);
  --primary-darker: #2e1b5e;
  --primary-light: var(--md-primary-container);
  --primary-bg: rgba(205,188,255,.12);
  --primary-bg-strong: rgba(205,188,255,.20);
  --primary-50: #2e1b5e;
  --primary-100: var(--md-primary-container);
  --primary-600: var(--md-primary);
  --primary-700: var(--md-primary-container);
  --primary-border: var(--md-primary-container);

  --accent: var(--md-tertiary);
  --accent-dark: var(--md-tertiary-container);
  --accent-light: var(--md-tertiary-container);
  --accent-bg: rgba(239,184,200,.12);
  --accent-bg-strong: rgba(239,184,200,.20);

  --bg: var(--md-background);
  --bg-warm: #1b1820;
  --surface: var(--md-surface);
  --surface-hover: #211e26;
  --surface-raised: #211e26;

  --text: var(--md-on-surface);
  --text-secondary: var(--md-on-surface-variant);
  --text-muted: var(--md-outline);
  --text-on-primary: var(--md-on-primary);

  --line: var(--md-outline-variant);
  --line-light: #352f3b;
  --line-strong: var(--md-outline);

  --success: #8fd892;
  --success-bg: rgba(143,216,146,.14);
  --success-border: rgba(143,216,146,.32);
  --warning: #f2c66d;
  --warning-bg: rgba(242,198,109,.14);
  --warning-border: rgba(242,198,109,.32);
  --error: var(--md-error);
  --error-bg: var(--md-error-container);
  --error-border: rgba(242,184,181,.32);
  --info: #8ec9ff;
  --info-bg: rgba(142,201,255,.14);
  --info-border: rgba(142,201,255,.32);

  --shadow-xs: var(--md-elevation-1);
  --shadow-sm: var(--md-elevation-1);
  --shadow-md: var(--md-elevation-2);
  --shadow-lg: var(--md-elevation-3);
  --shadow-xl: var(--md-elevation-4);
}

/* ============================================================================
   M3 Base — typography roles, browser-surface theming (craft floor)
   ========================================================================== */
body {
  font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--md-background);
  color: var(--md-on-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* M3 type helpers */
.md-display-large   { font: 400 var(--md-display-large)   "Roboto", system-ui, sans-serif; letter-spacing: 0; }
.md-display-medium  { font: 400 var(--md-display-medium)  "Roboto", system-ui, sans-serif; letter-spacing: 0; }
.md-display-small   { font: 400 var(--md-display-small)   "Roboto", system-ui, sans-serif; letter-spacing: 0; }
.md-headline-large  { font: 400 var(--md-headline-large)  "Roboto", system-ui, sans-serif; letter-spacing: 0; }
.md-headline-medium { font: 400 var(--md-headline-medium) "Roboto", system-ui, sans-serif; letter-spacing: 0; }
.md-headline-small  { font: 400 var(--md-headline-small)  "Roboto", system-ui, sans-serif; letter-spacing: 0; }
.md-title-large     { font: 400 var(--md-title-large)     "Roboto", system-ui, sans-serif; }
.md-title-medium    { font: 500 var(--md-title-medium)    "Roboto", system-ui, sans-serif; }
.md-title-small     { font: 500 var(--md-title-small)     "Roboto", system-ui, sans-serif; }
.md-body-large      { font: 400 var(--md-body-large)      "Roboto", system-ui, sans-serif; }
.md-body-medium     { font: 400 var(--md-body-medium)     "Roboto", system-ui, sans-serif; }
.md-body-small      { font: 400 var(--md-body-small)      "Roboto", system-ui, sans-serif; }
.md-label-large     { font: 500 var(--md-label-large)     "Roboto", system-ui, sans-serif; }
.md-label-medium    { font: 500 var(--md-label-medium)    "Roboto", system-ui, sans-serif; }
.md-label-small     { font: 500 var(--md-label-small)     "Roboto", system-ui, sans-serif; }

/* Headings follow M3 hierarchy */
h1 { font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: 0; color: var(--md-on-surface); }
h2 { font-size: 24px; line-height: 32px; font-weight: 400; letter-spacing: 0; }
h3 { font-size: 22px; line-height: 28px; font-weight: 400; letter-spacing: 0; }
h4 { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: .15px; color: var(--md-on-surface-variant); }

/* Browser-surface theming — the parts the design system owns everywhere */
::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }
* { caret-color: var(--md-primary); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border-radius: var(--md-shape-full); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--md-outline); background-clip: content-box; border: 2px solid transparent; }

:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
  border-radius: var(--md-shape-extra-small);
}

/* Tabular numerals for data */
table, .stat-value, .stat-bar-value, .slot-time, .pg-count {
  font-variant-numeric: tabular-nums;
}

/* Motion defaults: content visible, one authored moment per surface */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}