/* Shared design tokens. Load before component and responsive styles. */
:root {
  --bs-primary: #14566d;
  --bs-primary-rgb: 20, 86, 109;
  --bs-link-color: #14566d;
  --bs-link-color-rgb: 20, 86, 109;
  --bs-link-hover-color: #0f4052;
  --bs-link-hover-color-rgb: 15, 64, 82;
  --mm-button-touch-target: 2.75rem;
  --mymemo-navbar-height: 56px;
  --mm-color-page-bg: #f6f8fb;
  --mm-color-surface: #fff;
  --mm-color-surface-subtle: #f8fafc;
  --mm-color-surface-raised: #fff;
  --mm-color-surface-elevated: #fff;
  --mm-color-primary: #14566d;
  --mm-color-primary-dark: #0f3145;
  --mm-color-primary-soft: #e8f3f6;
  --mm-color-primary-text: #fff;
  --mm-color-text-primary: #1f2937;
  --mm-color-text-secondary: #475569;
  --mm-color-text-muted: #64748b;
  --mm-color-text-disabled: #94a3b8;
  --mm-color-text: var(--mm-color-text-primary);
  --mm-color-heading: #0f5368;
  --mm-color-muted: var(--mm-color-text-muted);
  --mm-color-border: rgba(15, 23, 42, 0.08);
  --mm-color-border-strong: rgba(15, 23, 42, 0.12);
  --mm-color-inactive: var(--mm-color-text-disabled);
  --mm-color-hover-bg: var(--mm-color-primary-soft);
  --mm-color-active-bg: var(--mm-color-primary);
  --mm-color-active-text: #fff;
  --mm-color-info-bg: #e0f2fe;
  --mm-color-info-text: #075985;
  --mm-color-success-bg: #dcfce7;
  --mm-color-success-text: #166534;
  --mm-color-warning-bg: #fef3c7;
  --mm-color-warning-text: #92400e;
  --mm-color-danger-bg: #ffe4e6;
  --mm-color-danger-text: #9f1239;
  --mm-color-purple-bg: #ede9fe;
  --mm-color-purple-text: #5b21b6;
  --mm-color-pink-bg: #fce7f3;
  --mm-color-pink-text: #9d174d;
  --mm-color-orange-bg: #ffedd5;
  --mm-color-orange-text: #c2410c;
  --mm-color-teal-bg: #ccfbf1;
  --mm-color-teal-text: #0f766e;
  --mm-radius-sm: 8px;
  --mm-radius-md: 10px;
  --mm-radius-lg: 12px;
  --mm-radius-pill: 999px;
  --mm-heading-muted-on-dark: rgba(255, 255, 255, 0.78);
  --mm-shadow-sm: 0 5px 14px rgba(15, 23, 42, 0.07);
  --mm-shadow-md: 0 8px 20px rgba(15, 23, 42, 0.08);
  --mm-shadow-hover: 0 12px 26px rgba(15, 23, 42, 0.12);
  --mm-focus-ring: rgba(37, 99, 235, 0.3);
  --mm-space-card: 0.75rem;
  --mm-space-section: 0.95rem;
  --mm-page-gap-xs: 0.45rem;
  --mm-page-gap-sm: 0.75rem;
  --mm-page-gap-md: 1rem;
  --mm-page-gap-lg: 1.35rem;
  --mm-page-title-size: clamp(1.32rem, 2vw, 1.7rem);
  --mm-page-description-size: 0.92rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --mm-color-page-bg: #0b1220;
    --mm-color-surface: #111827;
    --mm-color-surface-subtle: #0f172a;
    --mm-color-surface-raised: #162033;
    --mm-color-surface-elevated: #1b2638;
    --mm-color-primary-soft: rgba(14, 165, 233, 0.16);
    --mm-color-primary-text: #fff;
    --mm-color-text-primary: #e5e7eb;
    --mm-color-text-secondary: #cbd5e1;
    --mm-color-text-muted: #a8b3c4;
    --mm-color-text-disabled: #64748b;
    --mm-color-text: var(--mm-color-text-primary);
    --mm-color-heading: #d7f3fb;
    --mm-color-muted: var(--mm-color-text-muted);
    --mm-color-border: rgba(226, 232, 240, 0.14);
    --mm-color-border-strong: rgba(226, 232, 240, 0.22);
    --mm-color-inactive: var(--mm-color-text-disabled);
    --mm-color-hover-bg: rgba(125, 211, 252, 0.12);
    --mm-color-active-bg: var(--mm-color-primary);
    --mm-color-active-text: #fff;
    --mm-color-info-bg: rgba(14, 165, 233, 0.16);
    --mm-color-info-text: #7dd3fc;
    --mm-color-success-bg: rgba(34, 197, 94, 0.16);
    --mm-color-success-text: #86efac;
    --mm-color-warning-bg: rgba(245, 158, 11, 0.18);
    --mm-color-warning-text: #fbbf24;
    --mm-color-danger-bg: rgba(244, 63, 94, 0.18);
    --mm-color-danger-text: #fb7185;
    --mm-color-purple-bg: rgba(139, 92, 246, 0.18);
    --mm-color-purple-text: #c4b5fd;
    --mm-color-pink-bg: rgba(236, 72, 153, 0.18);
    --mm-color-pink-text: #f9a8d4;
    --mm-color-orange-bg: rgba(249, 115, 22, 0.18);
    --mm-color-orange-text: #fdba74;
    --mm-color-teal-bg: rgba(20, 184, 166, 0.18);
    --mm-color-teal-text: #5eead4;
    color-scheme: dark;
    --mm-shadow-sm: 0 5px 14px rgba(0, 0, 0, 0.22);
    --mm-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.24);
    --mm-shadow-hover: 0 12px 26px rgba(0, 0, 0, 0.28);
    --mm-focus-ring: rgba(125, 211, 252, 0.38);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  --mm-color-page-bg: #0b1220;
  --mm-color-surface: #111827;
  --mm-color-surface-subtle: #0f172a;
  --mm-color-surface-raised: #162033;
  --mm-color-surface-elevated: #1b2638;
  --mm-color-primary-soft: rgba(14, 165, 233, 0.16);
  --mm-color-primary-text: #fff;
  --mm-color-text-primary: #e5e7eb;
  --mm-color-text-secondary: #cbd5e1;
  --mm-color-text-muted: #a8b3c4;
  --mm-color-text-disabled: #64748b;
  --mm-color-text: var(--mm-color-text-primary);
  --mm-color-heading: #d7f3fb;
  --mm-color-muted: var(--mm-color-text-muted);
  --mm-color-border: rgba(226, 232, 240, 0.14);
  --mm-color-border-strong: rgba(226, 232, 240, 0.22);
  --mm-color-inactive: var(--mm-color-text-disabled);
  --mm-color-hover-bg: rgba(125, 211, 252, 0.12);
  --mm-color-active-bg: var(--mm-color-primary);
  --mm-color-active-text: #fff;
  --mm-color-info-bg: rgba(14, 165, 233, 0.16);
  --mm-color-info-text: #7dd3fc;
  --mm-color-success-bg: rgba(34, 197, 94, 0.16);
  --mm-color-success-text: #86efac;
  --mm-color-warning-bg: rgba(245, 158, 11, 0.18);
  --mm-color-warning-text: #fbbf24;
  --mm-color-danger-bg: rgba(244, 63, 94, 0.18);
  --mm-color-danger-text: #fb7185;
  --mm-color-purple-bg: rgba(139, 92, 246, 0.18);
  --mm-color-purple-text: #c4b5fd;
  --mm-color-pink-bg: rgba(236, 72, 153, 0.18);
  --mm-color-pink-text: #f9a8d4;
  --mm-color-orange-bg: rgba(249, 115, 22, 0.18);
  --mm-color-orange-text: #fdba74;
  --mm-color-teal-bg: rgba(20, 184, 166, 0.18);
  --mm-color-teal-text: #5eead4;
  color-scheme: dark;
  --mm-shadow-sm: 0 5px 14px rgba(0, 0, 0, 0.22);
  --mm-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.24);
  --mm-shadow-hover: 0 12px 26px rgba(0, 0, 0, 0.28);
  --mm-focus-ring: rgba(125, 211, 252, 0.38);
}