:root {
  --family-inter: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --family-clash: "Clash Display", "Inter", system-ui, sans-serif;
  --family-anybody: "Anybody", "Inter", system-ui, sans-serif;
  --family-drawably: "Drawably Pen", "Inter", ui-sans-serif, system-ui, sans-serif;
  --family-geist-mono: "Geist Mono", ui-monospace, monospace;
  --color-black:      #000000;
  --color-grey-900:   #141414;
  --color-grey-700:   #4B4B4B;
  --color-grey-400:   #8A8A8A;
  --color-grey-600:   #6B6B6B;
  --color-grey-200:   #DCDCDC;
  --color-grey-100:   #EDEDED;
  --color-white:      #FFFFFF;
  --color-grape:        #9B6CCA;
  --color-grape-ink:    #1A0E24;
  --color-grape-ink-2:  #1E1029;
  --color-grape-deep:   #5C3E7A;
  --color-grape-surf:   #AE84D7;
  --color-lime:       #85AF00;
  --color-yellow:     #FFCC00;
  --color-pink:       #FB9CFD;
  --color-violet:     #A19BFF;
  --color-violet-deep: #6B4FDE;
  --color-orange:     #FF4C00;
  --color-drawably-ink: #2724D1;
  --accent-1: var(--color-lime);
  --accent-2: var(--color-yellow);
  --accent-3: var(--color-pink);
  --accent-4: var(--color-violet);
  --accent-5: var(--color-orange);

  /* Radius scale — shared UI shape language.
     --radius-circle / --radius-device are intentionally excluded
     from theme overrides: a perfect circle and the laptop bezel
     (coupled to the device background image) aren't part of the
     "rounded vs. angular" axis. */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;
}
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas:        var(--color-black);
  --bg-panel-from:    var(--color-grey-700);
  --bg-panel-to:      var(--color-black);
  --bg-surface:       var(--color-grey-900);
  --text-primary:     var(--color-white);
  --text-secondary:   var(--color-grey-200);
  --text-muted:       var(--color-grey-400);
  --border-subtle:    rgba(255, 255, 255, 0.16);
  --border-strong:    rgba(255, 255, 255, 0.32);
  --surface-hover:    rgba(255, 255, 255, 0.16);
  --chip-bg:          transparent;
  --chip-text:        var(--color-white);
  --chip-border:      var(--border-subtle);
  --accent-interactive: var(--color-violet);
  --font-display:          var(--family-inter);
  --font-display-weight:   500;
  --font-display-stretch:  100%;
  --font-display-tracking: -0.02em;

  --font-heading-weight:   600;
  --font-heading-stretch:  100%;
  --font-heading-tracking: 0.04em;
  --font-body: var(--family-inter);
  --font-data: var(--family-inter);

  --photo-noise-blend: overlay;
  --photo-noise-alpha: 0.25;
  --photo-grayscale:   1;
  --photo-src: url("../resources/luis-romero-dark.png");

  --diagram-sitemap-src: url("../resources/diagram-sitemap-dark.png");
  --diagram-flow-src:    url("../resources/diagram-flow-dark.png");
  --mockup-screens-src:  url("../resources/mockup-screens-dark.png");
  --laptop-front-src:    url("../resources/laptop-front-dark.png");
  --screen-behavior-src: url("../resources/Documentation-Button-dark.png");
  --watches-src: url("../resources/watches-dark.png");
  --recent-laptop-front-src: url("../resources/recent-laptop-front-dark.png");
}
[data-theme="dark"] {
  --radius-sm: 999px;
}
[data-theme="light"] {
  color-scheme: light;
  --bg-canvas:        var(--color-white);
  --bg-panel-from:    var(--color-grey-200);
  --bg-panel-to:      var(--color-white);
  --bg-surface:       var(--color-grey-100);
  --text-primary:     var(--color-black);
  --text-secondary:   var(--color-grey-700);
  --text-muted:       var(--color-grey-600);
  --border-subtle:    rgba(0, 0, 0, 0.16);
  --border-strong:    rgba(0, 0, 0, 0.32);
  --surface-hover:    rgba(0, 0, 0, 0.16);
  --chip-bg:          transparent;
  --chip-text:        var(--color-black);
  --chip-border:      var(--border-subtle);
  --accent-interactive: var(--color-violet-deep);
  --font-display:          var(--family-clash);
  --font-display-weight:   600;
  --font-display-stretch:  100%;
  --font-display-tracking: -0.005em;

  --font-heading-weight:   600;
  --font-heading-stretch:  100%;
  --font-heading-tracking: 0.07em;
  --font-body: var(--family-inter);
  --font-data: var(--family-inter);

  --photo-noise-blend: multiply;
  --photo-noise-alpha: 0.18;
  --photo-grayscale:   1;
  --photo-src: url("../resources/luis-romero-light.png");

  --diagram-sitemap-src: url("../resources/diagram-sitemap-light.png");
  --diagram-flow-src:    url("../resources/diagram-flow-light.png");
  --mockup-screens-src:  url("../resources/mockup-screens-light.png");
  --laptop-front-src:    url("../resources/laptop-front-light.png");
  --screen-behavior-src: url("../resources/Documentation-Button-light.png");
  --watches-src: url("../resources/watches-light.png");
  --recent-laptop-front-src: url("../resources/recent-laptop-front-light.png");
  --radius-sm: 999px;
}
[data-theme="grape"] {
  color-scheme: light;
  --bg-canvas:        var(--color-grape);
  --bg-panel-from:    var(--color-grape-deep);
  --bg-panel-to:      var(--color-grape);
  --bg-surface:       var(--color-grape-surf);
  --text-primary:     var(--color-grape-ink);
  --text-secondary:   var(--color-grape-ink-2);
  --text-muted:       var(--color-grape-ink);

  --border-subtle:    rgba(26, 14, 36, 0.35);
  --border-strong:    rgba(26, 14, 36, 0.55);
  --surface-hover:    rgba(26, 14, 36, 0.35);

  --chip-bg:          transparent;
  --chip-text:        var(--color-grape-ink);
  --chip-border:      var(--border-subtle);
  --accent-interactive: var(--color-white);
  --font-display:          var(--family-anybody);
  --font-display-weight:   700;
  --font-display-stretch:  90%;
  --font-display-tracking: 0em;

  --font-heading-weight:   700;
  --font-heading-stretch:  95%;
  --font-heading-tracking: 0.04em;
  --font-body: var(--family-inter);
  --font-data: var(--family-inter);

  --photo-noise-blend: multiply;
  --photo-noise-alpha: 0.20;
  --photo-grayscale:   1;
  --photo-src: url("../resources/luis-romero-light.png");

  --diagram-sitemap-src: url("../resources/diagram-sitemap-grape.png");
  --diagram-flow-src:    url("../resources/diagram-flow-grape.png");

  --mockup-screens-src:  url("../resources/mockup-screens-grape.png");
  --laptop-front-src:    url("../resources/laptop-front-grape.png");
  --screen-behavior-src: url("../resources/Documentation-Button-grape.png");
  --watches-src: url("../resources/watches-grape.png");
  --recent-laptop-front-src: url("../resources/recent-laptop-front-grape.png");

  --radius-xs:   2px;
  --radius-sm:   6px;
  --radius-md:   6px;
  --radius-lg:   6px;
  --radius-pill: 6px;
}
[data-theme="draft"] {
  color-scheme: light;
  --bg-canvas:        var(--color-grey-100);
  --bg-panel-from:    var(--color-grey-200);
  --bg-panel-to:      var(--color-grey-100);
  --bg-surface:       var(--color-white);
  --text-primary:     var(--color-grey-900);
  --text-secondary:   var(--color-grey-700);
  --text-muted:       var(--color-grey-600);
  --border-subtle:    rgba(0, 0, 0, 0.16);
  --border-strong:    rgba(0, 0, 0, 0.32);
  --surface-hover:    rgba(0, 0, 0, 0.08);
  --chip-bg:          var(--color-white);
  --chip-text:        var(--color-grey-900);
  --accent-interactive: var(--color-drawably-ink);
  --font-display:          var(--family-drawably);
  --font-display-weight:   400;
  --font-display-stretch:  100%;
  --font-display-tracking: 0em;

  --font-heading-weight:   400;
  --font-heading-stretch:  100%;
  --font-heading-tracking: 0em;
  --font-body: var(--family-drawably);
  --font-data: var(--family-geist-mono);
  --photo-noise-blend: multiply;
  --photo-noise-alpha: 0.12;
  --photo-grayscale:   1;
  --photo-src: url("../resources/luis-romero-draft.png");

  --diagram-sitemap-src: url("../resources/diagram-scale-draft.png");
  --diagram-flow-src:    url("../resources/diagram-flow-draft.png");
  --mockup-screens-src:  url("../resources/mockup-screens-draft.png");
  --laptop-front-src:    url("../resources/laptop-front-draft.png");
  --screen-behavior-src: url("../resources/Documentation-Button-draft.png");
  --watches-src: url("../resources/watches-draft.png");
  --recent-laptop-front-src: url("../resources/recent-laptop-front-draft.png");
}