/* Shared design tokens and runtime CSS variables. */
:root {
  --color-primary: #1f7a8c;
  --color-primary-dark: #155a66;
  --color-primary-light: #e3f4f6;
  --color-bg: #f8fafb;
  --color-pendulum-floor: #f1f4f5;
  --color-text: #1f2937;
  --color-text-heading: #4b5563;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  --color-text-muted: var(--color-text-secondary);
  --color-border: #e5e7eb;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;

  --font-label: var(--font-size-xs);
  --font-secondary: var(--font-size-sm);
  --font-body: var(--font-size-md);
  --font-primary: var(--font-size-lg);
  --font-section: var(--font-size-xl);
  --font-title: var(--font-size-2xl);

  --color-category-planning: #5c8dcc;
  --color-category-practical: #6ba368;
  --color-category-time: #d9822b;
  --color-category-finance: #4b5bdc;
  --color-category-creative: #8e6bbe;
  --color-category-notes: #e0b04a;
  --color-category-sharing: #c76d5e;
  --color-category-system: #7daa92;

  --helper-accent: var(--color-category-practical);

  --bg: var(--color-bg);
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --text: var(--color-text);
  --text-heading: var(--color-text-heading);
  --muted: var(--color-text-secondary);
  --text-help: var(--color-text-tertiary);
  --line: var(--color-border);
  --line-strong: #d1d5db;
  --accent: var(--helper-accent);
  --accent-soft: #eaf3e7;
  --danger: #c56d67;
  --danger-soft-border: #e8b4af;
  --danger-soft-bg: #f9edeb;
  --success: #067647;
  --success-soft-border: #a7d7bc;
  --focus-ring: #8fa9d8;
  --on-accent: #ffffff;
  --radius: 24px;
  --radius-sm: 20px;
  --shadow: 0 1px 2px rgba(18, 26, 47, 0.08), 0 6px 20px rgba(18, 26, 47, 0.06);
  --ui-viewport-top-accent-height: 3px;

  --ui-control-height-default: 44px;
  --ui-control-height-compact: 40px;
  --ui-control-height-large: 44px;
  --ui-control-height: var(--ui-control-height-default);
  --ui-control-padding-x: 14px;
  --ui-control-radius: var(--radius-sm);
  --ui-control-border-color: var(--line-strong);
  --ui-control-bg: var(--surface-strong);
  --ui-control-text: var(--text);
  --ui-control-placeholder: var(--text-help);
  --ui-control-select-right-padding: 36px;
  --ui-dropdown-radius: var(--ui-control-radius);
  --ui-dropdown-panel-bg: var(--surface-strong);
  --ui-dropdown-panel-border: var(--line-strong);
  --ui-dropdown-panel-shadow: 0 10px 28px rgba(18, 26, 47, 0.14), 0 2px 10px rgba(18, 26, 47, 0.08);
  --ui-dropdown-option-border: var(--line);
  --ui-dropdown-item-divider: var(--line-strong);
  --ui-dropdown-hover-bg: var(--color-primary-light);
  --ui-dropdown-selected-border: var(--color-primary-dark);
  --ui-state-transition-fast: 140ms ease;
  --ui-input-hover-bg: var(--surface-strong);
  --ui-input-hover-border: var(--color-primary);
  --ui-control-hover-bg: var(--color-primary-light);
  --ui-control-hover-border: var(--line-strong);
  --ui-control-active-bg: #d7ebf0;
  --ui-control-active-border: var(--color-primary-dark);
  --ui-micro-label-size: var(--font-label);
  --ui-micro-label-weight: 400;
  --ui-micro-label-color: var(--text);

  --shopping-search-dropdown-margin-top: 10px;
  --shopping-search-item-gap: 8px;
  --shopping-search-item-padding-y: 5px;
  --shopping-search-item-padding-x: 14px;
  --shopping-search-actions-min-width: 120px;
  --shopping-search-comment-width: 130px;
  --shopping-search-comment-width-mobile: 108px;

  --shopping-category-label-margin-top: 5px;
  --shopping-category-label-margin-bottom: 0px;
  --shopping-category-label-font-size: var(--font-label);
  --shopping-item-row-gap: 10px;
  --shopping-item-row-padding-y: 6px;
  --shopping-item-main-padding-left: 12px;
  --shopping-item-name-font-size: var(--font-body);
  --shopping-item-meta-margin-top: 2px;
  --shopping-item-meta-font-size: var(--font-secondary);
  --shopping-item-actions-gap: 6px;
  --shopping-item-actions-min-width: 110px;
  --shopping-item-actions-min-width-mobile: 92px;
  --shopping-remove-pending-duration: 3s;
  --help-icon-animate-duration: 300ms;
  --ui-bottom-nav-height: 56px;
  --ui-bottom-nav-safe-area: env(safe-area-inset-bottom, 0px);
  --ui-bottom-nav-z-index: 70;
  --icon-stroke-width: 1.5;
}

body.ui-dropdown-contrast-subtle {
  --ui-dropdown-panel-bg: var(--surface-strong);
  --ui-dropdown-panel-border: var(--line);
  --ui-dropdown-panel-shadow: var(--shadow);
  --ui-dropdown-option-border: var(--line);
  --ui-dropdown-item-divider: var(--line);
  --ui-dropdown-hover-bg: #f3f8f9;
  --ui-dropdown-selected-border: var(--line-strong);
}

body.ui-dropdown-contrast-balanced {
  --ui-dropdown-panel-bg: var(--surface-strong);
  --ui-dropdown-panel-border: var(--line-strong);
  --ui-dropdown-panel-shadow: 0 10px 28px rgba(18, 26, 47, 0.14), 0 2px 10px rgba(18, 26, 47, 0.08);
  --ui-dropdown-option-border: var(--line);
  --ui-dropdown-item-divider: var(--line-strong);
  --ui-dropdown-hover-bg: var(--color-primary-light);
  --ui-dropdown-selected-border: var(--color-primary-dark);
}

body.ui-dropdown-contrast-strong {
  --ui-dropdown-panel-bg: var(--surface-strong);
  --ui-dropdown-panel-border: var(--color-primary-dark);
  --ui-dropdown-panel-shadow: 0 14px 34px rgba(18, 26, 47, 0.2), 0 4px 14px rgba(18, 26, 47, 0.12);
  --ui-dropdown-option-border: var(--line-strong);
  --ui-dropdown-item-divider: var(--line-strong);
  --ui-dropdown-hover-bg: #d7ebf0;
  --ui-dropdown-selected-border: var(--color-primary-dark);
}