/* Themeable design values. Component rules belong in style.css. */
:root {
  color-scheme: light;

  /* Palette */
  --color-canvas: #f7f8f4;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-soft: #eef3ef;
  --color-surface-accent: #e8f2ed;
  --color-surface-accent-strong: #d4e9de;
  --color-text: #263a35;
  --color-text-muted: #586a61;
  --color-text-subtle: #5e6d64;
  --color-border: #dce5de;
  --color-border-strong: #c5d4ca;
  --color-accent: #246953;
  --color-accent-hover: #1e5947;
  --color-accent-contrast: #ffffff;
  --color-focus: #246953;
  --color-danger: #873c2c;
  --color-danger-surface: #fbece7;
  --color-warning: #624813;
  --color-warning-surface: #fbf3dc;
  --color-success: #285d43;
  --color-success-surface: #e8f2e9;
  --color-category-family: #285d43;
  --color-category-family-surface: #e8f2e9;
  --color-category-sport: #624813;
  --color-category-sport-surface: #fbf3dc;
  --color-category-work: #155b78;
  --color-category-work-surface: #e1eff5;
  --color-category-other: #586a61;
  --color-category-other-surface: #eef3ef;
  --color-overlay: rgb(24 39 31 / 58%);
  --color-selection: #c9e4d4;
  --color-caret: var(--color-accent);
  --color-scrollbar: #aabdb0;
  --color-scrollbar-track: transparent;
  --preview-sage: #e8f2ed;
  --preview-sage-border: #246953;
  --preview-ocean: #e1eff5;
  --preview-ocean-border: #155b78;
  --preview-night: #30453a;
  --preview-night-border: #8bc5a4;

  /* Typography */
  --font-family-system: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-ui: var(--font-family-system);
  --font-family-brand: Georgia, "Times New Roman", serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-display: clamp(1.75rem, 4vw, 2.25rem);
  --font-size-brand-mark: 1.55rem;
  --font-size-heading-accent: 0.78em;
  --font-size-input: 1rem;
  --font-size-event: 0.875rem;
  --font-size-hidden: 0px;
  --font-weight-regular: 400;
  --font-weight-medium: 550;
  --font-weight-semibold: 650;
  --font-weight-bold: 700;
  --font-weight-brand-mark: 600;
  --line-height-tight: 1.18;
  --line-height-normal: 1.5;
  --line-height-loose: 1.65;
  --letter-spacing-tight: -0.035em;
  --letter-spacing-label: 0.09em;
  --text-underline-offset: 0.16em;

  /* Space scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Shape and depth */
  --radius-control: 0.625rem;
  --radius-card: 0.875rem;
  --radius-panel: 1.125rem;
  --radius-dialog: 1.25rem;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-strong: 1.5px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --shadow-control: 0 1px 3px rgb(34 61 46 / 8%);
  --shadow-card: 0 2px 8px rgb(34 61 46 / 5%);
  --shadow-raised: 0 14px 40px rgb(34 61 46 / 12%);
  --shadow-dialog: 0 20px 64px rgb(20 39 29 / 26%);

  /* Controls and behavior */
  --control-height: 2.75rem;
  --control-height-compact: 2.75rem;
  --control-icon-size: 2.75rem;
  --control-check-size: 2.75rem;
  --icon-size: 1.25rem;
  --icon-size-menu: 2rem;
  --status-dot-size: 0.5rem;
  --brand-mark-size: 2.125rem;
  --topbar-height: 4.5rem;
  --topbar-mobile-height: 4rem;
  --sidebar-width: 12rem;
  --layout-min-height: 28rem;
  --empty-art-size: 3.375rem;
  --menu-link-min-height: 4.5rem;
  --product-photo-min-height: 12rem;
  --product-thumbnail-size: 3.5rem;
  --assistant-avatar-size: 2.625rem;
  --assistant-avatar-small-size: 2rem;
  --assistant-messages-min-height: 15.5rem;
  --assistant-messages-max-height: 26rem;
  --auth-card-max-width: 27.5rem;
  --dialog-max-width: 30rem;
  --dialog-max-height: 50rem;
  --mobile-nav-item-min-width: 4.25rem;
  --mobile-nav-reserve: 5.5rem;
  --settings-option-min-width: 8rem;
  --event-card-height-extra: 0.25rem;
  --control-inset-small: 1rem;
  --check-inset: 0.65rem;
  --checkmark-top: 0.1rem;
  --checkmark-left: 0.3rem;
  --checkmark-width: 0.3rem;
  --checkmark-height: 0.55rem;
  --theme-swatch-size: 1.5rem;
  --event-time-width: 4.75rem;
  --event-time-width-mobile: 4rem;
  --quick-quantity-width: 8rem;
  --quick-quantity-width-narrow: 7rem;
  --suggestion-list-max-height: 18rem;
  --suggestion-thumbnail-size: 2.75rem;
  --suggestion-shadow: 0 8px 24px rgb(34 61 46 / 12%);
  --shop-row-min-height: 3.5rem;
  --recipe-photo-max-height: 24rem;
  --recipe-ingredient-min-height: 3rem;
  --recipe-ingredient-name-min: 10rem;
  --recipe-card-min-height: 5rem;
  --recipe-editor-max-width: 54rem;
  --recipe-content-max-width: 60rem;
  --google-calendar-row-min-height: 3.75rem;
  --google-account-max-width: 42rem;
  --description-lines: 2;
  --suggestion-layer: 4;
  --product-photo-max-height: 18rem;
  --assistant-input-max-height: 8rem;
  --assistant-mobile-min-height: 14rem;
  --dialog-textarea-min-height: 5rem;
  --content-width: 72rem;
  --motion-fast: 140ms;
  --motion-standard: 200ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --density-space: var(--space-4);
  --density-row-min: 4.25rem;
  --density-control-height: var(--control-height);
  --density-card-padding: var(--space-3);
  --density-list-gap: var(--space-2);

  font-family: var(--font-family-ui);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html[data-theme="ocean"] {
  color-scheme: light;
  --color-canvas: #f2f7fa;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-soft: #eaf2f7;
  --color-surface-accent: #e1eff5;
  --color-surface-accent-strong: #c9e1ec;
  --color-text: #183746;
  --color-text-muted: #405c68;
  --color-text-subtle: #4c6874;
  --color-border: #d6e3e8;
  --color-border-strong: #b6cdd7;
  --color-accent: #155b78;
  --color-accent-hover: #104c66;
  --color-accent-contrast: #ffffff;
  --color-focus: #155b78;
  --color-danger: #873c2c;
  --color-danger-surface: #fbece7;
  --color-warning: #624813;
  --color-warning-surface: #fbf3dc;
  --color-success: #285d43;
  --color-success-surface: #e8f2e9;
  --color-category-family: #285d43;
  --color-category-family-surface: #e8f2e9;
  --color-category-sport: #624813;
  --color-category-sport-surface: #fbf3dc;
  --color-category-work: #155b78;
  --color-category-work-surface: #e1eff5;
  --color-category-other: #405c68;
  --color-category-other-surface: #eaf2f7;
  --color-overlay: rgb(17 38 51 / 60%);
  --color-selection: #c6e1ed;
  --color-caret: var(--color-accent);
  --color-scrollbar: #9ab6c3;
  --font-family-ui: "Avenir Next", Avenir, var(--font-family-system);
  --font-family-brand: "Palatino Linotype", Palatino, Georgia, serif;
  --font-size-sm: 0.9rem;
  --font-size-md: 1.025rem;
  --font-weight-medium: 500;
  --font-weight-semibold: 620;
  --radius-control: 0.75rem;
  --radius-card: 1rem;
  --radius-panel: 1.25rem;
  --radius-dialog: 1.375rem;
  --shadow-control: 0 1px 3px rgb(24 55 70 / 8%);
  --shadow-card: 0 2px 8px rgb(24 55 70 / 5%);
  --shadow-raised: 0 14px 40px rgb(24 55 70 / 12%);
  --shadow-dialog: 0 20px 64px rgb(13 40 54 / 28%);
}

html[data-theme="night"] {
  color-scheme: dark;
  --color-canvas: #18211e;
  --color-surface: #222d28;
  --color-surface-raised: #293630;
  --color-surface-soft: #2b3932;
  --color-surface-accent: #30453a;
  --color-surface-accent-strong: #3b5848;
  --color-text: #edf4ef;
  --color-text-muted: #c2d0c7;
  --color-text-subtle: #b0c1b7;
  --color-border: #405148;
  --color-border-strong: #586d60;
  --color-accent: #8bc5a4;
  --color-accent-hover: #a1d4b7;
  --color-accent-contrast: #15241c;
  --color-focus: #a1d4b7;
  --color-danger: #ffb7a3;
  --color-danger-surface: #482d29;
  --color-warning: #f1d28c;
  --color-warning-surface: #443b27;
  --color-success: #a9d6b3;
  --color-success-surface: #2b4333;
  --color-category-family: #a9d6b3;
  --color-category-family-surface: #2b4333;
  --color-category-sport: #f1d28c;
  --color-category-sport-surface: #443b27;
  --color-category-work: #a8d6ea;
  --color-category-work-surface: #263c48;
  --color-category-other: #c2d0c7;
  --color-category-other-surface: #2b3932;
  --color-overlay: rgb(0 0 0 / 72%);
  --color-selection: #385844;
  --color-caret: #a1d4b7;
  --color-scrollbar: #62786a;
  --font-family-ui: "Trebuchet MS", var(--font-family-system);
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-size-sm: 0.85rem;
  --font-size-md: 0.975rem;
  --radius-control: 0.5rem;
  --radius-card: 0.75rem;
  --radius-panel: 1rem;
  --radius-dialog: 1.125rem;
  --shadow-control: 0 1px 3px rgb(0 0 0 / 20%);
  --shadow-card: 0 2px 8px rgb(0 0 0 / 18%);
  --shadow-raised: 0 14px 40px rgb(0 0 0 / 28%);
  --shadow-dialog: 0 20px 64px rgb(0 0 0 / 48%);
}

html[data-density="compact"] {
  --density-space: var(--space-3);
  --density-row-min: 3.5rem;
  --density-control-height: var(--control-height-compact);
  --density-card-padding: var(--space-2);
  --density-list-gap: var(--space-1);
}