:root {
  color-scheme: light;
  --white-color: #ffffff; 
  --ink: #ffffff;
  --ink-rgb: 255, 255, 255; 
  --ink-raised: #f1f1f1;
  --input-form: #ffffff;

  --paper: #0a0a0a;
  --grey: #262626;
  --grey-dim: #5c5c5c;

  --safelight: #c8391f;
  --safelight-rgb: 200, 57, 31;

  --line: #e0e0e0;
  --line-soft: rgba(10, 10, 10, 0.08);

  --text-soft: #3f3f3a;
  --danger-text: #b3261e;
  --success-text: #2f7d32;
  --warn-text: #9a6b00;

  --strength-weak: #ef4444; 
  --strength-fair: #f97316; 
  --strength-good: #eab308; 
  --strength-strong: #22c55e; 

  --radius: 6px;
  --radius-l: 12px;
  --max-w: 480px;
  --max-w-l: 600px;
  --wide-max-w: 1440px;
  --wide-xl-max-w: 100%;

  --box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);

  --sidenav-w: 76px;
  --sidenav-gap: 0px;
  --rail-w: 320px;
  --rail-gap: 150px;

  --filter: invert(0);
}

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

  --ink: #000000;
  --ink-rgb: 0, 0, 0;
  --ink-raised: #1a1a1a;
  --input-form: #111111;

  --paper: #ffffff;
  --grey: #b3b3b3;
  --grey-dim: #8f8f8f;

  --safelight: #e8432a;
  --safelight-rgb: 232, 67, 42;

  --line: #262626;
  --line-soft: rgba(255, 255, 255, 0.08);

  --text-soft: #dad8d1;
  --danger-text: #ff8b77;
  --success-text: #8fd08f;
  --warn-text: #e0b13f;

  --filter: invert(1);
}