:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Theme palette - Light Ground */
  --paper: #FFFFFF;
  --paper-translucent: rgba(255, 255, 255, 0.82);
  --panel: #F6F6F4;
  --panel-elevated: #FFFFFF;
  --panel-hover: #ECECE9;
  --panel-active: #E1E1DC;
  
  --ink: #181816;
  --ink-secondary: #575752;
  --ink-inverse: #FFFFFF;
  --muted: #787870;
  --muted-light: #A0A096;
  
  --hairline: #E6E6E1;
  --hairline-subtle: #F0F0EB;
  --hairline-strong: #CDCDC6;
  --ink-disabled: #C2C2BA;

  /* Primary Action Highlight */
  --accent-blue: #0071E3;
  --accent-blue-hover: #0077ED;
  --accent-blue-light: #EBF5FF;
  --primary-chip-bg: #181816;
  --primary-chip-text: #FFFFFF;
  --primary-chip-hover: #2E2E2A;

  --pill-bg: #EAEAE4;
  --pill-text: #181816;
  --pill-border: #DCDCD4;

  --badge-bg: #F0F0EC;
  --badge-text: #454540;
  --badge-border: #E2E2DC;

  --tag-red-bg: #FFF0F0;
  --tag-red-text: #D93838;
  --tag-red-border: #FFD6D6;

  --tag-green-bg: #EDF9F0;
  --tag-green-text: #248A3D;
  --tag-green-border: #C8EED2;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.07), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 24px 60px -12px rgba(0, 0, 0, 0.14);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --max-w-page: 1160px;
  --max-w-editor: 940px;
  --max-w-reading: 740px;
}

[data-theme="dark"] {
  --paper: #121211;
  --paper-translucent: rgba(18, 18, 17, 0.82);
  --panel: #1A1A18;
  --panel-elevated: #222220;
  --panel-hover: #262623;
  --panel-active: #30302C;

  --ink: #F4F4F0;
  --ink-secondary: #AAAAA2;
  --ink-inverse: #121211;
  --muted: #8E8E85;
  --muted-light: #66665E;

  --hairline: #2A2A26;
  --hairline-subtle: #20201D;
  --hairline-strong: #3E3E38;
  --ink-disabled: #4A4A44;

  --accent-blue: #2997FF;
  --accent-blue-hover: #47A7FF;
  --accent-blue-light: #102844;
  --primary-chip-bg: #F4F4F0;
  --primary-chip-text: #121211;
  --primary-chip-hover: #FFFFFF;

  --pill-bg: #272723;
  --pill-text: #F4F4F0;
  --pill-border: #3A3A34;

  --badge-bg: #242420;
  --badge-text: #B4B4AA;
  --badge-border: #363630;

  --tag-red-bg: #2A1616;
  --tag-red-text: #FF6B6B;
  --tag-red-border: #4D2424;

  --tag-green-bg: #14281A;
  --tag-green-text: #4ADE80;
  --tag-green-border: #1F472B;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 60px -12px rgba(0, 0, 0, 0.75);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121211;
    --paper-translucent: rgba(18, 18, 17, 0.82);
    --panel: #1A1A18;
    --panel-elevated: #222220;
    --panel-hover: #262623;
    --panel-active: #30302C;

    --ink: #F4F4F0;
    --ink-secondary: #AAAAA2;
    --ink-inverse: #121211;
    --muted: #8E8E85;
    --muted-light: #66665E;

    --hairline: #2A2A26;
    --hairline-subtle: #20201D;
    --hairline-strong: #3E3E38;
    --ink-disabled: #4A4A44;

    --accent-blue: #2997FF;
    --accent-blue-hover: #47A7FF;
    --accent-blue-light: #102844;
    --primary-chip-bg: #F4F4F0;
    --primary-chip-text: #121211;
    --primary-chip-hover: #FFFFFF;

    --pill-bg: #272723;
    --pill-text: #F4F4F0;
    --pill-border: #3A3A34;

    --badge-bg: #242420;
    --badge-text: #B4B4AA;
    --badge-border: #363630;

    --tag-red-bg: #2A1616;
    --tag-red-text: #FF6B6B;
    --tag-red-border: #4D2424;

    --tag-green-bg: #14281A;
    --tag-green-text: #4ADE80;
    --tag-green-border: #1F472B;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px -4px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 24px 60px -12px rgba(0, 0, 0, 0.75);
  }
}