/* ==================================================================
   OrgNote · md3.css  —— Material Design 3 风格令牌
   包含：浅色/深色 两套配色 + 4 组主色（accent）
   仅定义变量，组件外观全部由 base.css 消费。
   ================================================================== */

/* ───────── 主色预设：紫（Material 基线） ───────── */
[data-accent="violet"] {
  --c-primary:#6750A4; --c-on-primary:#FFFFFF;
  --c-primary-container:#EADDFF; --c-on-primary-container:#21005D;
  --c-secondary:#625B71; --c-on-secondary:#FFFFFF;
  --c-secondary-container:#E8DEF8; --c-on-secondary-container:#1D192B;
  --c-tertiary:#7D5260; --c-on-tertiary:#FFFFFF;
  --c-tertiary-container:#FFD8E4; --c-on-tertiary-container:#31111D;
  --c-surface-tint:#6750A4;
  --c-surface:#FEF7FF; --c-surface-variant:#E7E0EC; --c-on-surface-variant:#49454F;
  --c-inverse-primary:#D0BCFF;
}
/* ───────── 主色预设：蓝 ───────── */
[data-accent="blue"] {
  --c-primary:#0B57D0; --c-on-primary:#FFFFFF;
  --c-primary-container:#D3E3FD; --c-on-primary-container:#041E49;
  --c-secondary:#565E71; --c-on-secondary:#FFFFFF;
  --c-secondary-container:#DAE2F9; --c-on-secondary-container:#131C2B;
  --c-tertiary:#6E5676; --c-on-tertiary:#FFFFFF;
  --c-tertiary-container:#F7D8FF; --c-on-tertiary-container:#271430;
  --c-surface-tint:#0B57D0;
  --c-surface:#F8F9FF; --c-surface-variant:#DFE2EB; --c-on-surface-variant:#43474E;
  --c-inverse-primary:#A8C7FA;
}
/* ───────── 主色预设：绿 ───────── */
[data-accent="green"] {
  --c-primary:#386A20; --c-on-primary:#FFFFFF;
  --c-primary-container:#B7F397; --c-on-primary-container:#042100;
  --c-secondary:#55624C; --c-on-secondary:#FFFFFF;
  --c-secondary-container:#D9E7CB; --c-on-secondary-container:#131F0D;
  --c-tertiary:#386667; --c-on-tertiary:#FFFFFF;
  --c-tertiary-container:#BBEBEC; --c-on-tertiary-container:#002020;
  --c-surface-tint:#386A20;
  --c-surface:#F7FBF2; --c-surface-variant:#DFE4D7; --c-on-surface-variant:#43483F;
  --c-inverse-primary:#9CD67D;
}
/* ───────── 主色预设：橙 ───────── */
[data-accent="amber"] {
  --c-primary:#8B5000; --c-on-primary:#FFFFFF;
  --c-primary-container:#FFDCBE; --c-on-primary-container:#2C1600;
  --c-secondary:#725A42; --c-on-secondary:#FFFFFF;
  --c-secondary-container:#FEDDBE; --c-on-secondary-container:#291806;
  --c-tertiary:#58633A; --c-on-tertiary:#FFFFFF;
  --c-tertiary-container:#DCE8B4; --c-on-tertiary-container:#161E00;
  --c-surface-tint:#8B5000;
  --c-surface:#FFF8F5; --c-surface-variant:#EDE1D9; --c-on-surface-variant:#4F453F;
  --c-inverse-primary:#FFB870;
}

/* ══════════════════ 浅色模式 ══════════════════ */
[data-mode="light"] {
  --c-on-surface:#1C1B1F; --c-on-surface-variant:#49454F;
  --c-outline:#79747E; --c-outline-variant:#CAC4D0;
  --c-error:#B3261E; --c-on-error:#FFFFFF;
  --c-error-container:#F9DEDC; --c-on-error-container:#410E0B;
  --c-inverse-surface:#313033; --c-inverse-on-surface:#F4EFF4;
  --c-scrim:#000000; --c-shadow:#000000;

  /* 表面容器（用 color-mix 从 surface 与 primary 派生，自动跟随主色） */
  --c-surface-container-lowest:#FFFFFF;
  --c-surface-container-low:   color-mix(in srgb, var(--c-surface) 94%, var(--c-surface-tint) 6%);
  --c-surface-container:       color-mix(in srgb, var(--c-surface) 90%, var(--c-surface-tint) 10%);
  --c-surface-container-high:  color-mix(in srgb, var(--c-surface) 86%, var(--c-surface-tint) 14%);
  --c-surface-container-highest: color-mix(in srgb, var(--c-surface) 82%, var(--c-surface-tint) 18%);

  --elev-1: 0 1px 2px rgba(0,0,0,.10), 0 1px 3px 1px rgba(0,0,0,.06);
  --elev-2: 0 1px 2px rgba(0,0,0,.12), 0 2px 6px 2px rgba(0,0,0,.08);
  --elev-3: 0 4px 8px 3px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.12);
  --elev-4: 0 8px 20px 6px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.10);

  --card-bg: var(--c-surface-container-low);
  --card-border: 1px solid color-mix(in srgb, var(--c-outline-variant) 60%, transparent);
  --card-shadow: var(--elev-1);
  --card-backdrop: none;
  --backdrop: none;
  --input-bg: var(--c-surface-container-high);
  --topbar-bg: color-mix(in srgb, var(--c-surface) 88%, transparent);
  --nav-bg: var(--c-surface-container);
  --body-bg: var(--c-surface);
}

/* ══════════════════ 深色模式 ══════════════════ */
[data-mode="dark"] {
  --c-on-surface:#E6E0E9; --c-on-surface-variant:#CAC4D0;
  --c-outline:#938F99; --c-outline-variant:#49454F;
  --c-error:#F2B8B5; --c-on-error:#601410;
  --c-error-container:#8C1D18; --c-on-error-container:#F9DEDC;
  --c-inverse-surface:#E6E0E9; --c-inverse-on-surface:#313033;
  --c-scrim:#000000; --c-shadow:#000000;

  --c-surface-container-lowest: color-mix(in srgb, var(--c-surface) 92%, #000 8%);
  --c-surface-container-low:    color-mix(in srgb, var(--c-surface) 93%, #FFF 7%);
  --c-surface-container:        color-mix(in srgb, var(--c-surface) 90%, #FFF 10%);
  --c-surface-container-high:   color-mix(in srgb, var(--c-surface) 86%, #FFF 14%);
  --c-surface-container-highest:color-mix(in srgb, var(--c-surface) 82%, #FFF 18%);

  --elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.20);
  --elev-2: 0 1px 2px rgba(0,0,0,.32), 0 2px 6px 2px rgba(0,0,0,.24);
  --elev-3: 0 4px 8px 3px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.32);
  --elev-4: 0 8px 20px 6px rgba(0,0,0,.36), 0 2px 6px rgba(0,0,0,.30);

  --card-bg: var(--c-surface-container-low);
  --card-border: 1px solid color-mix(in srgb, var(--c-outline-variant) 70%, transparent);
  --card-shadow: var(--elev-1);
  --card-backdrop: none;
  --backdrop: none;
  --input-bg: var(--c-surface-container-high);
  --topbar-bg: color-mix(in srgb, var(--c-surface) 88%, transparent);
  --nav-bg: var(--c-surface-container);
  --body-bg: var(--c-surface);
}

/* 深色模式下的主色（自动变亮，保证对比度） */
[data-mode="dark"][data-accent="violet"] {
  --c-primary:#D0BCFF; --c-on-primary:#381E72;
  --c-primary-container:#4F378B; --c-on-primary-container:#EADDFF;
  --c-secondary:#CCC2DC; --c-on-secondary:#332D41;
  --c-secondary-container:#4A4458; --c-on-secondary-container:#E8DEF8;
  --c-tertiary:#EFB8C8; --c-on-tertiary:#492532;
  --c-tertiary-container:#633B48; --c-on-tertiary-container:#FFD8E4;
  --c-surface:#141218; --c-surface-variant:#49454F; --c-on-surface-variant:#CAC4D0;
}
[data-mode="dark"][data-accent="blue"] {
  --c-primary:#A8C7FA; --c-on-primary:#062E6F;
  --c-primary-container:#0842A0; --c-on-primary-container:#D3E3FD;
  --c-secondary:#BEC6DC; --c-on-secondary:#283041;
  --c-secondary-container:#3E4759; --c-on-secondary-container:#DAE2F9;
  --c-tertiary:#DABDE2; --c-on-tertiary:#3E2846;
  --c-tertiary-container:#553E5D; --c-on-tertiary-container:#F7D8FF;
  --c-surface:#101418; --c-surface-variant:#43474E; --c-on-surface-variant:#C3C6CF;
}
[data-mode="dark"][data-accent="green"] {
  --c-primary:#9CD67D; --c-on-primary:#0F3900;
  --c-primary-container:#235105; --c-on-primary-container:#B7F397;
  --c-secondary:#BDCEB0; --c-on-secondary:#283421;
  --c-secondary-container:#3E4A36; --c-on-secondary-container:#D9E7CB;
  --c-tertiary:#A0CFD0; --c-on-tertiary:#003738;
  --c-tertiary-container:#1F4D4E; --c-on-tertiary-container:#BBEBEC;
  --c-surface:#101408; --c-surface-variant:#43483F; --c-on-surface-variant:#C3C8BC;
}
[data-mode="dark"][data-accent="amber"] {
  --c-primary:#FFB870; --c-on-primary:#4A2800;
  --c-primary-container:#6A3C00; --c-on-primary-container:#FFDCBE;
  --c-secondary:#E1C1A3; --c-on-secondary:#402C18;
  --c-secondary-container:#58432C; --c-on-secondary-container:#FEDDBE;
  --c-tertiary:#C0CC99; --c-on-tertiary:#2B3411;
  --c-tertiary-container:#414B24; --c-on-tertiary-container:#DCE8B4;
  --c-surface:#19120B; --c-surface-variant:#4F453F; --c-on-surface-variant:#D2C4BA;
}

/* MD3 特有的细节：顶栏在滚动后带一点点色调 */
[data-theme="md3"] .card { border-radius: var(--r-xl); }
[data-theme="md3"] .dialog { border-radius: 28px; }
[data-theme="md3"] .btn-filled { border-radius: var(--r-full); }
[data-theme="md3"] .fab { border-radius: 20px; }
[data-theme="md3"] .topbar { box-shadow: 0 1px 0 0 var(--c-outline-variant); }
[data-theme="md3"] .navbar { box-shadow: 0 -1px 0 0 var(--c-outline-variant); }