/* Bearing design tokens — uit Penpot "Bearing 1" (sets: semantic + modes/light), 2026-10-25.
   Naamgeving volgt Penpot: color.text.default → --color-text-default. Niet met de hand afwijken. */

:root {
  /* Font families */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-data: "JetBrains Mono", ui-monospace, monospace;

  /* Spacing */
  --spacing-inset-sm: 8px;  --spacing-inset-md: 16px; --spacing-inset-lg: 24px;
  --spacing-stack-xs: 4px;  --spacing-stack-sm: 8px;  --spacing-stack-md: 16px; --spacing-stack-lg: 24px; --spacing-stack-xl: 40px;
  --spacing-inline-xs: 4px; --spacing-inline-sm: 8px; --spacing-inline-md: 12px;

  /* Radius */
  --radius-checkbox: 4px; --radius-control: 8px; --radius-card: 12px; --radius-chip: 9999px;

  /* Backgrounds */
  --color-bg-page: #FFFFFF; --color-bg-surface: #FFFFFF; --color-bg-subtle: #FBFAF9;
  --color-bg-muted: #F5F4F2; --color-bg-inverse: #1B1916;

  /* Text */
  --color-text-default: #1B1916; --color-text-muted: #57534F; --color-text-subtle: #76726D;
  --color-text-disabled: #A6A39F; --color-text-inverse: #FFFFFF;

  /* Borders */
  --color-border-default: #E7E5E3; --color-border-strong: #D6D4D1;
  --color-border-control: #76726D; --color-border-focus: #1B1916;

  /* Actions */
  --color-action-primary-bg: #1B1916; --color-action-primary-bg-hover: #2B2824; --color-action-primary-text: #FFFFFF;
  --color-action-secondary-bg: #FFFFFF; --color-action-secondary-bg-hover: #FBFAF9;
  --color-action-secondary-border: #D6D4D1; --color-action-secondary-text: #1B1916;

  /* Status families */
  --color-status-planned-solid: #46598A; --color-status-planned-on-solid: #FFFFFF;
  --color-status-active-solid: #0F6E68;  --color-status-active-on-solid: #FFFFFF;
  --color-status-paused-solid: #94600A;  --color-status-paused-on-solid: #FFFFFF;
  --color-status-blocked-solid: #B8151A; --color-status-blocked-on-solid: #FFFFFF;
  --color-status-blocked-wash: #FEF0EE;  --color-status-blocked-text: #B8151A; --color-status-blocked-icon: #ED1521;
  --color-status-waiting-solid: #8A2D63; --color-status-waiting-on-solid: #FFFFFF;
  --color-status-done-solid: #57534F;    --color-status-done-on-solid: #FFFFFF;
  --color-status-stopped-solid: #E7E5E3; --color-status-stopped-on-solid: #57534F;
  --color-status-achieved-text: #7A6331; --color-status-achieved-border: #B49B68;

  /* Areas of life: fill · line · text · wash · on-wash · glow */
  --color-area-physical-fill: #BA3525; --color-area-physical-line: #BA3525; --color-area-physical-text: #941509; --color-area-physical-wash: #FEF0ED; --color-area-physical-on-wash: #520F08; --shadow-area-physical-glow: 0 0 40px 0 #F9A496;
  --color-area-love-fill: #F65D66;     --color-area-love-line: #F65D66;     --color-area-love-text: #DF1B3F;     --color-area-love-wash: #FEF0EF;     --color-area-love-on-wash: #520D15;     --shadow-area-love-glow: 0 0 40px 0 #F9A3A2;
  --color-area-work-fill: #FA7D1A;     --color-area-work-line: #B65A13;     --color-area-work-text: #B65A13;     --color-area-work-wash: #FEF0E9;     --color-area-work-on-wash: #452006;     --shadow-area-work-glow: 0 0 40px 0 #F9A878;
  --color-area-money-fill: #FEDF4A;    --color-area-money-line: #877413;    --color-area-money-text: #877413;    --color-area-money-wash: #FCF4D2;    --color-area-money-on-wash: #332B06;    --shadow-area-money-glow: 0 0 40px 0 #D5BE51;
  --color-area-health-fill: #60A119;   --color-area-health-line: #60A119;   --color-area-health-text: #4B7F12;   --color-area-health-wash: #E8FBDC;   --color-area-health-on-wash: #1C3306;   --shadow-area-health-glow: 0 0 40px 0 #9CD076;
  --color-area-friends-fill: #168659;  --color-area-friends-line: #168659;  --color-area-friends-text: #0E6542;  --color-area-friends-wash: #DBFDE9;  --color-area-friends-on-wash: #083421;  --shadow-area-friends-glow: 0 0 40px 0 #68D7A1;
  --color-area-fun-fill: #1680A4;      --color-area-fun-line: #1680A4;      --color-area-fun-text: #0E617D;      --color-area-fun-wash: #E7F6FE;      --color-area-fun-on-wash: #07303F;      --shadow-area-fun-glow: 0 0 40px 0 #61CCF9;
  --color-area-growth-fill: #1938D6;   --color-area-growth-line: #1938D6;   --color-area-growth-text: #0C0FAD;   --color-area-growth-wash: #EFF3FE;   --color-area-growth-on-wash: #14265C;   --shadow-area-growth-glow: 0 0 40px 0 #A3BDF9;
  --color-area-spirit-fill: #6810A6;   --color-area-spirit-line: #6810A6;   --color-area-spirit-text: #460772;   --color-area-spirit-wash: #F6F1FE;   --color-area-spirit-on-wash: #371A53;   --shadow-area-spirit-glow: 0 0 40px 0 #CDACF9;
}

/* Typography tokens */
.t-display    { font: 600 40px/1.1 var(--font-display); }
.t-heading-lg { font: 600 28px/1.2 var(--font-display); }
.t-heading-md { font: 600 23px/1.2 var(--font-display); }
.t-heading-sm { font: 600 16px/1.2 var(--font-display); letter-spacing: -0.2px; }
.t-body-md    { font: 400 16px/1.5 var(--font-body); }
.t-body-sm    { font: 400 13px/1.5 var(--font-body); }
.t-label-md   { font: 600 13px/1.3 var(--font-body); }
.t-label-sm   { font: 600 11px/1.3 var(--font-body); }
.t-data       { font: 400 11px/1.4 var(--font-data); }
.t-number     { font: 600 33px/1.1 var(--font-body); }