/* Design tokens derived from docs/03-design-system.md */
:root {
  /* Surfaces */
  --bg-page: #ffffff;
  --bg-sidebar: #f7f6f3;
  --bg-elevated: #ffffff;
  --bg-hover: rgba(43, 42, 39, 0.06);
  --bg-active: rgba(43, 42, 39, 0.10);
  --bg-selected: rgba(180, 55, 46, 0.08);
  --bg-header: rgba(255, 255, 255, 0.85);

  /* Text */
  --text-primary: #2b2a27;
  --text-secondary: #595853;
  --text-tertiary: #6e6c67;
  --text-on-accent: #ffffff;

  /* Lines */
  --border: rgba(43, 42, 39, 0.09);
  --border-strong: rgba(43, 42, 39, 0.16);

  /* Brand + status */
  --accent: #b4372e;
  --accent-hover: #9c2f27;
  --focus-ring: #b4372e;
  --success: #2f7d4f;
  --warning: #a8620a;
  --danger: #b4372e;
  --info: #2b6cb0;

  /* Shadows (popovers, menus, modals) */
  --shadow-popover: 0 0 0 1px rgba(15, 15, 15, 0.05), 0 3px 6px rgba(15, 15, 15, 0.10), 0 9px 24px rgba(15, 15, 15, 0.16);
  --shadow-modal: 0 0 0 1px rgba(15, 15, 15, 0.06), 0 12px 32px rgba(15, 15, 15, 0.22);

  /* Radius */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Block and highlight colors (Light) */
  --hl-yellow-bg: #fbf1c7;
  --hl-yellow-text: #826304;
  --hl-green-bg: #e3f2e8;
  --hl-green-text: #2f6b47;
  --hl-blue-bg: #e1edf8;
  --hl-blue-text: #2b5f94;
  --hl-orange-bg: #fbebdb;
  --hl-orange-text: #a2520c;
  --hl-purple-bg: #ebe5f6;
  --hl-purple-text: #5f4a8f;
  --hl-gray-bg: #efeeeb;
  --hl-gray-text: #5f5e5a;
  --hl-red-bg: #f9e2df;
  --hl-red-text: #a33a33;

  /* Typography */
  --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #191918;
    --bg-sidebar: #202020;
    --bg-elevated: #252525;
    --bg-hover: rgba(255, 255, 255, 0.07);
    --bg-active: rgba(255, 255, 255, 0.11);
    --bg-selected: rgba(224, 98, 88, 0.16);
    --bg-header: rgba(25, 25, 24, 0.85);

    --text-primary: #e8e6e1;
    --text-secondary: #b4b2ab;
    --text-tertiary: #98958e;

    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.17);

    --accent: #e4685e;
    --accent-hover: #ea776d;
    --focus-ring: #e4685e;
    --success: #5cc189;
    --warning: #e0a14b;
    --danger: #e4685e;
    --info: #6aa8e8;

    --shadow-popover: 0 0 0 1px rgba(0, 0, 0, 0.40), 0 3px 6px rgba(0, 0, 0, 0.40), 0 9px 24px rgba(0, 0, 0, 0.50);
    --shadow-modal: 0 0 0 1px rgba(0, 0, 0, 0.50), 0 12px 32px rgba(0, 0, 0, 0.60);

    /* Block and highlight colors (Dark) */
    --hl-yellow-bg: #3d3416;
    --hl-yellow-text: #e5c962;
    --hl-green-bg: #1e382b;
    --hl-green-text: #5cc189;
    --hl-blue-bg: #1e324a;
    --hl-blue-text: #6aa8e8;
    --hl-orange-bg: #3d2b16;
    --hl-orange-text: #e0a14b;
    --hl-purple-bg: #312347;
    --hl-purple-text: #b49feb;
    --hl-gray-bg: #2c2c2b;
    --hl-gray-text: #b4b2ab;
    --hl-red-bg: #3d1c1a;
    --hl-red-text: #e66a60;
  }
}

:root[data-theme="dark"] {
  --bg-page: #191918;
  --bg-sidebar: #202020;
  --bg-elevated: #252525;
  --bg-hover: rgba(255, 255, 255, 0.07);
  --bg-active: rgba(255, 255, 255, 0.11);
  --bg-selected: rgba(224, 98, 88, 0.16);
  --bg-header: rgba(25, 25, 24, 0.85);

  --text-primary: #e8e6e1;
  --text-secondary: #b4b2ab;
  --text-tertiary: #98958e;

  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.17);

  --accent: #e4685e;
  --accent-hover: #ea776d;
  --focus-ring: #e4685e;
  --success: #5cc189;
  --warning: #e0a14b;
  --danger: #e4685e;
  --info: #6aa8e8;

  --shadow-popover: 0 0 0 1px rgba(0, 0, 0, 0.40), 0 3px 6px rgba(0, 0, 0, 0.40), 0 9px 24px rgba(0, 0, 0, 0.50);
  --shadow-modal: 0 0 0 1px rgba(0, 0, 0, 0.50), 0 12px 32px rgba(0, 0, 0, 0.60);

  /* Block and highlight colors (Dark) */
  --hl-yellow-bg: #3d3416;
  --hl-yellow-text: #e5c962;
  --hl-green-bg: #1e382b;
  --hl-green-text: #5cc189;
  --hl-blue-bg: #1e324a;
  --hl-blue-text: #6aa8e8;
  --hl-orange-bg: #3d2b16;
  --hl-orange-text: #e0a14b;
  --hl-purple-bg: #312347;
  --hl-purple-text: #b49feb;
  --hl-gray-bg: #2c2c2b;
  --hl-gray-text: #b4b2ab;
  --hl-red-bg: #3d1c1a;
  --hl-red-text: #e66a60;
}

:root[data-theme="light"] {
  --bg-page: #ffffff;
  --bg-sidebar: #f7f6f3;
  --bg-elevated: #ffffff;
  --bg-hover: rgba(43, 42, 39, 0.06);
  --bg-active: rgba(43, 42, 39, 0.10);
  --bg-selected: rgba(180, 55, 46, 0.08);
  --bg-header: rgba(255, 255, 255, 0.85);

  --text-primary: #2b2a27;
  --text-secondary: #595853;
  --text-tertiary: #6e6c67;
  --text-on-accent: #ffffff;

  --border: rgba(43, 42, 39, 0.09);
  --border-strong: rgba(43, 42, 39, 0.16);

  --accent: #b4372e;
  --accent-hover: #9c2f27;
  --focus-ring: #b4372e;
  --success: #2f7d4f;
  --warning: #a8620a;
  --danger: #b4372e;
  --info: #2b6cb0;

  --shadow-popover: 0 0 0 1px rgba(15, 15, 15, 0.05), 0 3px 6px rgba(15, 15, 15, 0.10), 0 9px 24px rgba(15, 15, 15, 0.16);
  --shadow-modal: 0 0 0 1px rgba(15, 15, 15, 0.06), 0 12px 32px rgba(15, 15, 15, 0.22);

  /* Block and highlight colors (Light) */
  --hl-yellow-bg: #fbf1c7;
  --hl-yellow-text: #826304;
  --hl-green-bg: #e3f2e8;
  --hl-green-text: #2f6b47;
  --hl-blue-bg: #e1edf8;
  --hl-blue-text: #2b5f94;
  --hl-orange-bg: #fbebdb;
  --hl-orange-text: #a2520c;
  --hl-purple-bg: #ebe5f6;
  --hl-purple-text: #5f4a8f;
  --hl-gray-bg: #efeeeb;
  --hl-gray-text: #5f5e5a;
  --hl-red-bg: #f9e2df;
  --hl-red-text: #a33a33;
}