/* GENERATED by hodo/design/tokens/build.mjs from tokens.json — edit there, then sync. */
/* The house layer: paper and ink neutrals, the three app hues, house gold, space, easing, type.
   An app picks its hue (e.g. --accent: var(--notes)) and adds its components on top. */

:root {
  color-scheme: light;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --panel-pad-min: 20px;
  --margin-col: 80px;
  --target-touch: 44px;
  --target-pointer: 24px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-settle: cubic-bezier(0.34, 1.4, 0.64, 1);

  --surface: oklch(0.962 0.001 17.2);
  --surface-raised: oklch(0.97 0.004 17.2);
  --surface-sunken: oklch(0.935 0.001 17.2);
  --text: oklch(0.24 0.004 84.6);
  --text-secondary: oklch(0.378 0.004 17.3);
  --text-muted: oklch(0.481 0.004 17.3);
  --text-faint: oklch(0.68 0.005 17.3);
  --border: oklch(0.858 0.001 17.2);
  --border-strong: oklch(0.78 0.005 17.3);
  --error: oklch(0.5 0.17 15);
  --gold-tint: oklch(0.97 0.024 73.6);
  --gold: oklch(0.644 0.112 73.8);
  --gold-text: oklch(0.4795 0.0946 73.6);
  --clip-tint: oklch(0.95 0.025 38);
  --clip: oklch(0.6 0.13 38);
  --clip-text: oklch(0.48 0.12 38);
  --clip-deep: oklch(0.42 0.11 38);
  --notes-tint: oklch(0.95 0.015 252);
  --notes: oklch(0.55 0.08 252);
  --notes-text: oklch(0.44 0.08 252);
  --notes-deep: oklch(0.38 0.08 252);
  --tasks-tint: oklch(0.95 0.025 130);
  --tasks: oklch(0.6 0.09 130);
  --tasks-text: oklch(0.46 0.08 130);
  --tasks-deep: oklch(0.4 0.08 130);
  --shadow-color: oklch(0.3 0.01 60 / 0.12);
  --wash: 5%;
  --wash-hover: 8%;

  --hover-bg: color-mix(in oklch, var(--text) 6%, transparent);
  --pressed-bg: color-mix(in oklch, var(--text) 10%, transparent);

  --font-sans: "Manrope", -apple-system, "Segoe UI", system-ui, sans-serif;
  --weight-body: 430;
  --weight-label: 500;
  --weight-control: 600;
  --weight-heading: 700;
}

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

  --surface: oklch(0.24 0.004 84.6);
  --surface-raised: oklch(0.291 0.003 17.3);
  --surface-sunken: oklch(0.205 0.003 67.7);
  --text: oklch(0.962 0.001 17.2);
  --text-secondary: oklch(0.87 0.004 17.2);
  --text-muted: oklch(0.68 0.005 17.3);
  --text-faint: oklch(0.481 0.004 17.3);
  --border: oklch(0.36 0.004 84.6);
  --border-strong: oklch(0.441 0.004 17.3);
  --error: oklch(0.72 0.15 15);
  --gold-tint: oklch(0.31 0.045 75);
  --gold: oklch(0.781 0.108 73.7);
  --gold-text: oklch(0.781 0.108 73.7);
  --clip-tint: oklch(0.31 0.04 38);
  --clip: oklch(0.72 0.12 38);
  --clip-text: oklch(0.8 0.09 38);
  --clip-deep: oklch(0.86 0.07 38);
  --notes-tint: oklch(0.31 0.03 252);
  --notes: oklch(0.72 0.08 252);
  --notes-text: oklch(0.8 0.07 252);
  --notes-deep: oklch(0.86 0.05 252);
  --tasks-tint: oklch(0.31 0.035 130);
  --tasks: oklch(0.74 0.09 130);
  --tasks-text: oklch(0.8 0.08 130);
  --tasks-deep: oklch(0.86 0.06 130);
  --shadow-color: oklch(0 0 0 / 0.45);
  --wash: 7%;
  --wash-hover: 11%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --surface: oklch(0.24 0.004 84.6);
    --surface-raised: oklch(0.291 0.003 17.3);
    --surface-sunken: oklch(0.205 0.003 67.7);
    --text: oklch(0.962 0.001 17.2);
    --text-secondary: oklch(0.87 0.004 17.2);
    --text-muted: oklch(0.68 0.005 17.3);
    --text-faint: oklch(0.481 0.004 17.3);
    --border: oklch(0.36 0.004 84.6);
    --border-strong: oklch(0.441 0.004 17.3);
    --error: oklch(0.72 0.15 15);
    --gold-tint: oklch(0.31 0.045 75);
    --gold: oklch(0.781 0.108 73.7);
    --gold-text: oklch(0.781 0.108 73.7);
    --clip-tint: oklch(0.31 0.04 38);
    --clip: oklch(0.72 0.12 38);
    --clip-text: oklch(0.8 0.09 38);
    --clip-deep: oklch(0.86 0.07 38);
    --notes-tint: oklch(0.31 0.03 252);
    --notes: oklch(0.72 0.08 252);
    --notes-text: oklch(0.8 0.07 252);
    --notes-deep: oklch(0.86 0.05 252);
    --tasks-tint: oklch(0.31 0.035 130);
    --tasks: oklch(0.74 0.09 130);
    --tasks-text: oklch(0.8 0.08 130);
    --tasks-deep: oklch(0.86 0.06 130);
    --shadow-color: oklch(0 0 0 / 0.45);
    --wash: 7%;
    --wash-hover: 11%;
  }
}

/* Density: one system, three spacings. Set data-density on a view's root. */
[data-density="compact"] {
  --pad-x: 24px;
  --gap-in: 8px;
  --gap-group: 24px;
  --gap-section: 48px;
}
[data-density="reading"] {
  --pad-x: 32px;
  --gap-in: 12px;
  --gap-group: 48px;
  --gap-section: 64px;
}
[data-density="spacious"] {
  --pad-x: 48px;
  --gap-in: 16px;
  --gap-group: 48px;
  --gap-section: 96px;
}