/* ds-prefs.css — per-user appearance preferences (design.md §13).
   Applied as data-* attributes + CSS vars on <html> by the pre-paint script in
   index.html and at runtime by DSAppearance.apply(). Loaded after ds.css so these win.
   Knobs: density · depth · corners · glass · icon colour/density/style/background ·
   font · motion · tilt · hatch · chart style. Theme + brand colour are vars on <html>. */

/* ── Density: card padding + base text size ───────────────────────────── */
:root[data-density="compact"] { font-size: 13px; }
:root[data-density="comfortable"] { font-size: 15px; }
:root[data-density="compact"]  :is(.ds-card, .ds-mini) { padding: 16px; }
:root[data-density="comfortable"] :is(.ds-card) { padding: 28px; }

/* ── Depth / 3D: restyle the elevation ramp ───────────────────────────── */
:root[data-depth="off"] {
  --ds-e-1: none; --ds-e-2: none; --ds-e-3: 0 0 0 1px var(--ds-border);
  --ds-bevel: inset 0 0 0 0 transparent; --ds-well-edge: inset 0 0 0 1px var(--ds-border);
  --ds-tube-edge: inset 0 0 0 1px var(--ds-border); --ds-track-well: inset 0 0 0 1px var(--ds-border);
}
:root[data-depth="off"] .ds-card .chart,
:root[data-depth="off"] .ds-card .ranklist { background: none; box-shadow: inset 0 0 0 1px var(--ds-border); }
:root[data-depth="deep"] {
  --ds-e-2: 0 14px 30px -12px rgba(17,18,20,.22), 0 3px 8px rgba(17,18,20,.09);
  --ds-e-3: 0 30px 60px -20px rgba(17,18,20,.34), 0 8px 16px rgba(17,18,20,.11);
}
:root[data-theme="dark"][data-depth="deep"] {
  --ds-e-2: 0 16px 34px -10px rgba(0,0,0,.82), 0 0 0 1px rgba(255,255,255,.05);
  --ds-e-3: 0 34px 64px -16px rgba(0,0,0,.92), 0 0 0 1px rgba(255,255,255,.07);
}

/* ── Corner style: scale the radius scale + the hardcoded card/modal radii ── */
:root[data-corners="sharp"] { --ds-r-sm: 6px; --ds-r-md: 8px; --ds-r-lg: 10px; --ds-r-xl: 14px; }
:root[data-corners="soft"]  { --ds-r-sm: 8px; --ds-r-md: 12px; --ds-r-lg: 16px; --ds-r-xl: 20px; }
:root[data-corners="sharp"] :is(.ds-card, .ds-mini, .modal, .ds-menu, .modal-overlay .modal) { border-radius: 10px !important; }
:root[data-corners="soft"]  :is(.ds-card, .ds-mini, .modal, .ds-menu, .modal-overlay .modal) { border-radius: 16px !important; }

/* ── Hatch textures off ───────────────────────────────────────────────── */
:root[data-hatch="off"] { --ds-hatch: transparent; --ds-hatch-bg: none; }

/* ── Motion: reduced turns off lifts/animations (mirrors prefers-reduced-motion) ── */
:root[data-motion="reduced"] .ds-card:hover,
:root[data-motion="reduced"] .ds-btn:active,
:root[data-motion="reduced"] :is(.icon-btn, .ds-nav, .ds-btn):hover svg { transform: none !important; }
:root[data-motion="reduced"] .chart .col .stack,
:root[data-motion="reduced"] .donut-svg,
:root[data-motion="reduced"] .gauge .g-on,
:root[data-motion="reduced"] .gauge-val { animation: none !important; }

/* ── Pointer tilt (opt-in): subtle lift already covers hover; tilt kept minimal ── */
:root[data-tilt] .ds-card:hover { transform: translateY(-3px) perspective(900px) rotateX(.6deg); }

/* ── Icon background for card-head discs (design.md §9.4) ─────────────── */
:root[data-icon-bg="none"] .ds-disc { background: transparent; box-shadow: none; }
:root:not([data-icons="line"])[data-icon-bg="bubble"] .ds-disc {
  background: linear-gradient(150deg, color-mix(in srgb, var(--ig-a) 55%, #fff), var(--ig-b) 50%, var(--ig-c));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 12px -6px var(--ig-b);
}
:root:not([data-icons="line"])[data-icon-bg="bubble"] .ds-disc svg { stroke: url(#ic-glass-light) #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

/* ── Chart style: flat (plain bars) · capsule/glass tubes ─────────────── */
:root[data-chart="flat"] .chart .col .stack { background: none; }
:root[data-chart="flat"] .chart .col .seg { -webkit-mask: none; mask: none; border-radius: 10px 10px 4px 4px !important; }
:root[data-chart="capsule"] .chart .col .seg { -webkit-mask: none; mask: none; border-radius: 999px !important; background-image: var(--ds-tube-gloss); box-shadow: var(--ds-tube-edge); }