/* GEGENEREERD door tools/build_design_system.py — NIET HANDMATIG WIJZIGEN */
/* appearance-schema: 1.0.0 | artifact: v1 */
/* content-hash: sha256:f14595788c89745b4ef9a052014d874c630a3f620764fc9bc1afae1800f998b4 | tenant-overlay: excluded */

:root {
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-features: 'cv11', 'ss03';
  --font-display-size: clamp(2rem, 5vw, 3.5rem);
  --font-display-weight: 500;
  --font-display-line-height: 1.1;
  --font-display-letter-spacing: -0.01em;
  --font-headline-size: clamp(1.5rem, 3vw, 2rem);
  --font-headline-weight: 600;
  --font-headline-line-height: 1.2;
  --font-headline-letter-spacing: -0.015em;
  --font-title-size: 1.125rem;
  --font-title-weight: 600;
  --font-title-line-height: 1.4;
  --font-title-letter-spacing: -0.005em;
  --font-body-size: 0.9375rem;
  --font-body-weight: 400;
  --font-body-line-height: 1.55;
  --font-body-letter-spacing: normal;
  --font-body-strong-size: 0.9375rem;
  --font-body-strong-weight: 600;
  --font-body-strong-line-height: 1.55;
  --font-body-strong-letter-spacing: normal;
  --font-small-size: 0.8125rem;
  --font-small-weight: 400;
  --font-small-line-height: 1.5;
  --font-small-letter-spacing: normal;
  --font-label-size: 0.6875rem;
  --font-label-weight: 600;
  --font-label-line-height: 1.2;
  --font-label-letter-spacing: 0.08em;
  --font-mono-sm-size: 0.8125rem;
  --font-mono-sm-weight: 400;
  --font-mono-sm-line-height: 1.5;
  --font-mono-sm-letter-spacing: normal;
}

:root,
[data-theme='light'] {
  --c-surface-base: oklch(99% 0.003 80);
  --c-surface-raised: oklch(100% 0 0);
  --c-surface-sunken: oklch(96% 0.005 80);
  --c-surface-overlay: oklch(20% 0.014 285);
  --c-border-subtle: oklch(94% 0.005 80);
  --c-border-default: oklch(88% 0.008 80);
  --c-border-strong: oklch(80% 0.01 80);
  --c-fg-default: oklch(20% 0.01 285);
  --c-fg-muted: oklch(50% 0.01 285);
  --c-fg-subtle: oklch(65% 0.008 285);
  --c-fg-on-overlay: oklch(96% 0.005 80);
  --c-success: oklch(62% 0.16 145);
  --c-success-soft: oklch(94% 0.05 145);
  --c-success-fg: oklch(28% 0.10 145);
  --c-warning: oklch(72% 0.16 70);
  --c-warning-soft: oklch(96% 0.05 70);
  --c-warning-fg: oklch(40% 0.10 70);
  --c-danger: oklch(58% 0.20 25);
  --c-danger-soft: oklch(95% 0.04 25);
  --c-danger-fg: oklch(35% 0.14 25);
  --c-info: oklch(60% 0.16 245);
  --c-info-soft: oklch(95% 0.04 245);
  --c-info-fg: oklch(35% 0.12 245);
  --c-focus-ring: oklch(60% 0.08 162 / 0.40);
  --c-wash-1: oklch(92% 0.02 145 / 0.45);
  --c-wash-2: oklch(97% 0.01 80 / 0.55);
  --c-role-camarero-bg: oklch(92% 0.05 245);
  --c-role-camarero-border: oklch(55% 0.12 245);
  --c-role-cocinero-bg: oklch(92% 0.05 55);
  --c-role-cocinero-border: oklch(55% 0.12 55);
  --c-role-jefe_cocina-bg: oklch(92% 0.05 25);
  --c-role-jefe_cocina-border: oklch(55% 0.12 25);
  --c-role-bartender-bg: oklch(92% 0.05 300);
  --c-role-bartender-border: oklch(55% 0.12 300);
  --c-role-gerente-bg: oklch(92% 0.05 145);
  --c-role-gerente-border: oklch(55% 0.12 145);
  --c-role-inkoper-bg: oklch(92% 0.05 95);
  --c-role-inkoper-border: oklch(55% 0.12 95);
  --c-role-personal_limpieza-bg: oklch(92% 0.05 180);
  --c-role-personal_limpieza-border: oklch(55% 0.12 180);
  --c-role-administracion-bg: oklch(92% 0.05 265);
  --c-role-administracion-border: oklch(55% 0.12 265);
  --c-role-owner-bg: oklch(92% 0.05 70);
  --c-role-owner-border: oklch(55% 0.12 70);
  --c-role-fg: oklch(25% 0.01 80);
}

[data-theme='dark'] {
  --c-surface-base: oklch(13% 0.01 285);
  --c-surface-raised: oklch(17% 0.012 285);
  --c-surface-sunken: oklch(9% 0.008 285);
  --c-surface-overlay: oklch(22% 0.014 285);
  --c-border-subtle: oklch(20% 0.015 285);
  --c-border-default: oklch(28% 0.018 285);
  --c-border-strong: oklch(40% 0.02 285);
  --c-fg-default: oklch(96% 0.005 80);
  --c-fg-muted: oklch(70% 0.008 80);
  --c-fg-subtle: oklch(55% 0.008 80);
  --c-fg-on-overlay: oklch(96% 0.005 80);
  --c-success: oklch(68% 0.17 145);
  --c-success-soft: oklch(28% 0.08 145);
  --c-success-fg: oklch(85% 0.10 145);
  --c-warning: oklch(78% 0.16 70);
  --c-warning-soft: oklch(30% 0.08 70);
  --c-warning-fg: oklch(88% 0.10 70);
  --c-danger: oklch(66% 0.20 25);
  --c-danger-soft: oklch(28% 0.10 25);
  --c-danger-fg: oklch(88% 0.12 25);
  --c-info: oklch(68% 0.16 245);
  --c-info-soft: oklch(28% 0.08 245);
  --c-info-fg: oklch(88% 0.10 245);
  --c-focus-ring: oklch(62% 0.08 162 / 0.45);
  --c-wash-1: oklch(22% 0.02 145 / 0.35);
  --c-wash-2: oklch(16% 0.01 285 / 0.40);
  --c-role-camarero-bg: oklch(87% 0.06 245);
  --c-role-camarero-border: oklch(65% 0.12 245);
  --c-role-cocinero-bg: oklch(87% 0.06 55);
  --c-role-cocinero-border: oklch(65% 0.12 55);
  --c-role-jefe_cocina-bg: oklch(87% 0.06 25);
  --c-role-jefe_cocina-border: oklch(65% 0.12 25);
  --c-role-bartender-bg: oklch(87% 0.06 300);
  --c-role-bartender-border: oklch(65% 0.12 300);
  --c-role-gerente-bg: oklch(87% 0.06 145);
  --c-role-gerente-border: oklch(65% 0.12 145);
  --c-role-inkoper-bg: oklch(87% 0.06 95);
  --c-role-inkoper-border: oklch(65% 0.12 95);
  --c-role-personal_limpieza-bg: oklch(87% 0.06 180);
  --c-role-personal_limpieza-border: oklch(65% 0.12 180);
  --c-role-administracion-bg: oklch(87% 0.06 265);
  --c-role-administracion-border: oklch(65% 0.12 265);
  --c-role-owner-bg: oklch(87% 0.06 70);
  --c-role-owner-border: oklch(65% 0.12 70);
  --c-role-fg: oklch(25% 0.01 80);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --c-surface-base: oklch(13% 0.01 285);
    --c-surface-raised: oklch(17% 0.012 285);
    --c-surface-sunken: oklch(9% 0.008 285);
    --c-surface-overlay: oklch(22% 0.014 285);
    --c-border-subtle: oklch(20% 0.015 285);
    --c-border-default: oklch(28% 0.018 285);
    --c-border-strong: oklch(40% 0.02 285);
    --c-fg-default: oklch(96% 0.005 80);
    --c-fg-muted: oklch(70% 0.008 80);
    --c-fg-subtle: oklch(55% 0.008 80);
    --c-fg-on-overlay: oklch(96% 0.005 80);
    --c-success: oklch(68% 0.17 145);
    --c-success-soft: oklch(28% 0.08 145);
    --c-success-fg: oklch(85% 0.10 145);
    --c-warning: oklch(78% 0.16 70);
    --c-warning-soft: oklch(30% 0.08 70);
    --c-warning-fg: oklch(88% 0.10 70);
    --c-danger: oklch(66% 0.20 25);
    --c-danger-soft: oklch(28% 0.10 25);
    --c-danger-fg: oklch(88% 0.12 25);
    --c-info: oklch(68% 0.16 245);
    --c-info-soft: oklch(28% 0.08 245);
    --c-info-fg: oklch(88% 0.10 245);
    --c-focus-ring: oklch(62% 0.08 162 / 0.45);
    --c-wash-1: oklch(22% 0.02 145 / 0.35);
    --c-wash-2: oklch(16% 0.01 285 / 0.40);
    --c-role-camarero-bg: oklch(87% 0.06 245);
    --c-role-camarero-border: oklch(65% 0.12 245);
    --c-role-cocinero-bg: oklch(87% 0.06 55);
    --c-role-cocinero-border: oklch(65% 0.12 55);
    --c-role-jefe_cocina-bg: oklch(87% 0.06 25);
    --c-role-jefe_cocina-border: oklch(65% 0.12 25);
    --c-role-bartender-bg: oklch(87% 0.06 300);
    --c-role-bartender-border: oklch(65% 0.12 300);
    --c-role-gerente-bg: oklch(87% 0.06 145);
    --c-role-gerente-border: oklch(65% 0.12 145);
    --c-role-inkoper-bg: oklch(87% 0.06 95);
    --c-role-inkoper-border: oklch(65% 0.12 95);
    --c-role-personal_limpieza-bg: oklch(87% 0.06 180);
    --c-role-personal_limpieza-border: oklch(65% 0.12 180);
    --c-role-administracion-bg: oklch(87% 0.06 265);
    --c-role-administracion-border: oklch(65% 0.12 265);
    --c-role-owner-bg: oklch(87% 0.06 70);
    --c-role-owner-border: oklch(65% 0.12 70);
    --c-role-fg: oklch(25% 0.01 80);
  }
}

html[data-text-scale='small'] {
  --font-display-size: clamp(1.875rem, 4.6vw, 3.25rem);
  --font-headline-size: clamp(1.375rem, 2.8vw, 1.875rem);
  --font-title-size: 1.0625rem;
  --font-body-size: 0.875rem;
  --font-body-strong-size: 0.875rem;
  --font-small-size: 0.75rem;
  --font-label-size: 0.625rem;
  --font-mono-sm-size: 0.75rem;
}

html[data-text-scale='large'] {
  --font-display-size: clamp(2.125rem, 5.4vw, 3.75rem);
  --font-headline-size: clamp(1.625rem, 3.2vw, 2.25rem);
  --font-title-size: 1.25rem;
  --font-body-size: 1.0625rem;
  --font-body-strong-size: 1.0625rem;
  --font-small-size: 0.9375rem;
  --font-label-size: 0.75rem;
  --font-mono-sm-size: 0.9375rem;
}

/* THEME: porcelain */
[data-ui-theme='porcelain'] {
  --c-brand-accent: oklch(54% 0.046 162);
  --c-brand-accent-fg: oklch(98% 0.005 80);
  --c-brand-accent-soft: oklch(93% 0.025 162);
  --c-brand-accent-muted: oklch(46% 0.05 162);
  --c-wash-1: oklch(92% 0.02 145 / 0.45);
  --c-wash-2: oklch(97% 0.01 80 / 0.55);
  --c-hero-overlay: linear-gradient(180deg, oklch(25% 0.02 145 / 0.15) 0%, oklch(20% 0.02 145 / 0.85) 100%);
}
[data-ui-theme='porcelain'][data-theme='dark'] {
  --c-brand-accent: oklch(72% 0.06 162);
  --c-brand-accent-fg: oklch(15% 0.02 162);
  --c-brand-accent-soft: oklch(26% 0.03 162);
  --c-brand-accent-muted: oklch(80% 0.05 162);
  --c-wash-1: oklch(22% 0.02 145 / 0.35);
  --c-wash-2: oklch(16% 0.01 285 / 0.40);
  --c-hero-overlay: linear-gradient(180deg, oklch(20% 0.02 145 / 0.25) 0%, oklch(14% 0.02 145 / 0.88) 100%);
}
@media (prefers-color-scheme: dark) {
  :root[data-ui-theme='porcelain']:not([data-theme]) {
    --c-brand-accent: oklch(72% 0.06 162);
    --c-brand-accent-fg: oklch(15% 0.02 162);
    --c-brand-accent-soft: oklch(26% 0.03 162);
    --c-brand-accent-muted: oklch(80% 0.05 162);
    --c-wash-1: oklch(22% 0.02 145 / 0.35);
    --c-wash-2: oklch(16% 0.01 285 / 0.40);
    --c-hero-overlay: linear-gradient(180deg, oklch(20% 0.02 145 / 0.25) 0%, oklch(14% 0.02 145 / 0.88) 100%);
  }
}

/* THEME: olive */
[data-ui-theme='olive'] {
  --c-surface-base: oklch(96.5% 0.012 130);
  --c-surface-raised: oklch(99% 0.006 120);
  --c-surface-sunken: oklch(93.5% 0.015 130);
  --c-border-subtle: oklch(92% 0.012 130);
  --c-border-default: oklch(86% 0.015 130);
  --c-border-strong: oklch(78% 0.02 130);
  --c-fg-default: oklch(23% 0.015 130);
  --c-fg-muted: oklch(48% 0.02 130);
  --c-fg-subtle: oklch(62% 0.018 130);
  --c-brand-accent: oklch(45% 0.09 135);
  --c-brand-accent-fg: oklch(97% 0.01 120);
  --c-brand-accent-soft: oklch(90% 0.04 135);
  --c-brand-accent-muted: oklch(37% 0.08 135);
  --c-focus-ring: oklch(52% 0.09 135 / 0.40);
  --c-wash-1: oklch(90% 0.03 135 / 0.50);
  --c-wash-2: oklch(96% 0.015 110 / 0.50);
  --c-hero-overlay: linear-gradient(180deg, oklch(28% 0.05 135 / 0.18) 0%, oklch(19% 0.04 135 / 0.85) 100%);
}
[data-ui-theme='olive'][data-theme='dark'] {
  --c-surface-base: oklch(15% 0.02 135);
  --c-surface-raised: oklch(19% 0.022 135);
  --c-surface-sunken: oklch(11% 0.015 135);
  --c-surface-overlay: oklch(23% 0.022 135);
  --c-border-subtle: oklch(23% 0.02 135);
  --c-border-default: oklch(30% 0.025 135);
  --c-border-strong: oklch(42% 0.03 135);
  --c-fg-default: oklch(95% 0.01 120);
  --c-fg-muted: oklch(70% 0.02 130);
  --c-fg-subtle: oklch(56% 0.018 130);
  --c-brand-accent: oklch(70% 0.09 135);
  --c-brand-accent-fg: oklch(16% 0.03 135);
  --c-brand-accent-soft: oklch(28% 0.05 135);
  --c-brand-accent-muted: oklch(78% 0.08 135);
  --c-focus-ring: oklch(70% 0.09 135 / 0.45);
  --c-wash-1: oklch(23% 0.03 135 / 0.40);
  --c-wash-2: oklch(16% 0.015 135 / 0.40);
  --c-hero-overlay: linear-gradient(180deg, oklch(20% 0.04 135 / 0.28) 0%, oklch(13% 0.03 135 / 0.88) 100%);
}
@media (prefers-color-scheme: dark) {
  :root[data-ui-theme='olive']:not([data-theme]) {
    --c-surface-base: oklch(15% 0.02 135);
    --c-surface-raised: oklch(19% 0.022 135);
    --c-surface-sunken: oklch(11% 0.015 135);
    --c-surface-overlay: oklch(23% 0.022 135);
    --c-border-subtle: oklch(23% 0.02 135);
    --c-border-default: oklch(30% 0.025 135);
    --c-border-strong: oklch(42% 0.03 135);
    --c-fg-default: oklch(95% 0.01 120);
    --c-fg-muted: oklch(70% 0.02 130);
    --c-fg-subtle: oklch(56% 0.018 130);
    --c-brand-accent: oklch(70% 0.09 135);
    --c-brand-accent-fg: oklch(16% 0.03 135);
    --c-brand-accent-soft: oklch(28% 0.05 135);
    --c-brand-accent-muted: oklch(78% 0.08 135);
    --c-focus-ring: oklch(70% 0.09 135 / 0.45);
    --c-wash-1: oklch(23% 0.03 135 / 0.40);
    --c-wash-2: oklch(16% 0.015 135 / 0.40);
    --c-hero-overlay: linear-gradient(180deg, oklch(20% 0.04 135 / 0.28) 0%, oklch(13% 0.03 135 / 0.88) 100%);
  }
}

/* THEME: terracotta */
[data-ui-theme='terracotta'] {
  --c-surface-base: oklch(96.5% 0.012 55);
  --c-surface-raised: oklch(99% 0.005 60);
  --c-surface-sunken: oklch(93.5% 0.015 55);
  --c-border-subtle: oklch(92% 0.012 55);
  --c-border-default: oklch(86% 0.016 55);
  --c-border-strong: oklch(78% 0.02 55);
  --c-fg-default: oklch(24% 0.015 40);
  --c-fg-muted: oklch(48% 0.02 45);
  --c-fg-subtle: oklch(62% 0.018 48);
  --c-brand-accent: oklch(55% 0.11 40);
  --c-brand-accent-fg: oklch(98% 0.008 60);
  --c-brand-accent-soft: oklch(91% 0.045 45);
  --c-brand-accent-muted: oklch(46% 0.10 40);
  --c-focus-ring: oklch(58% 0.11 40 / 0.40);
  --c-wash-1: oklch(90% 0.035 50 / 0.50);
  --c-wash-2: oklch(96% 0.015 60 / 0.50);
  --c-hero-overlay: linear-gradient(180deg, oklch(30% 0.05 40 / 0.18) 0%, oklch(20% 0.04 40 / 0.85) 100%);
}
[data-ui-theme='terracotta'][data-theme='dark'] {
  --c-surface-base: oklch(16% 0.018 40);
  --c-surface-raised: oklch(20% 0.02 40);
  --c-surface-sunken: oklch(12% 0.014 40);
  --c-surface-overlay: oklch(24% 0.02 40);
  --c-border-subtle: oklch(24% 0.02 40);
  --c-border-default: oklch(31% 0.024 40);
  --c-border-strong: oklch(43% 0.03 42);
  --c-fg-default: oklch(95% 0.008 60);
  --c-fg-muted: oklch(71% 0.02 50);
  --c-fg-subtle: oklch(57% 0.018 48);
  --c-brand-accent: oklch(70% 0.10 45);
  --c-brand-accent-fg: oklch(18% 0.04 40);
  --c-brand-accent-soft: oklch(30% 0.05 40);
  --c-brand-accent-muted: oklch(78% 0.09 45);
  --c-focus-ring: oklch(70% 0.10 45 / 0.45);
  --c-wash-1: oklch(24% 0.03 42 / 0.40);
  --c-wash-2: oklch(17% 0.016 40 / 0.40);
  --c-hero-overlay: linear-gradient(180deg, oklch(21% 0.04 40 / 0.28) 0%, oklch(14% 0.03 40 / 0.88) 100%);
}
@media (prefers-color-scheme: dark) {
  :root[data-ui-theme='terracotta']:not([data-theme]) {
    --c-surface-base: oklch(16% 0.018 40);
    --c-surface-raised: oklch(20% 0.02 40);
    --c-surface-sunken: oklch(12% 0.014 40);
    --c-surface-overlay: oklch(24% 0.02 40);
    --c-border-subtle: oklch(24% 0.02 40);
    --c-border-default: oklch(31% 0.024 40);
    --c-border-strong: oklch(43% 0.03 42);
    --c-fg-default: oklch(95% 0.008 60);
    --c-fg-muted: oklch(71% 0.02 50);
    --c-fg-subtle: oklch(57% 0.018 48);
    --c-brand-accent: oklch(70% 0.10 45);
    --c-brand-accent-fg: oklch(18% 0.04 40);
    --c-brand-accent-soft: oklch(30% 0.05 40);
    --c-brand-accent-muted: oklch(78% 0.09 45);
    --c-focus-ring: oklch(70% 0.10 45 / 0.45);
    --c-wash-1: oklch(24% 0.03 42 / 0.40);
    --c-wash-2: oklch(17% 0.016 40 / 0.40);
    --c-hero-overlay: linear-gradient(180deg, oklch(21% 0.04 40 / 0.28) 0%, oklch(14% 0.03 40 / 0.88) 100%);
  }
}

/* THEME: slate */
[data-ui-theme='slate'] {
  --c-surface-base: oklch(96.5% 0.004 255);
  --c-surface-raised: oklch(99.5% 0.002 255);
  --c-surface-sunken: oklch(93.5% 0.006 255);
  --c-border-subtle: oklch(92% 0.006 255);
  --c-border-default: oklch(86% 0.008 255);
  --c-border-strong: oklch(78% 0.012 255);
  --c-fg-default: oklch(21% 0.012 265);
  --c-fg-muted: oklch(48% 0.015 260);
  --c-fg-subtle: oklch(62% 0.012 258);
  --c-brand-accent: oklch(45% 0.06 255);
  --c-brand-accent-fg: oklch(98% 0.003 255);
  --c-brand-accent-soft: oklch(91% 0.025 255);
  --c-brand-accent-muted: oklch(37% 0.05 255);
  --c-focus-ring: oklch(52% 0.06 255 / 0.40);
  --c-wash-1: oklch(91% 0.015 255 / 0.50);
  --c-wash-2: oklch(96% 0.006 255 / 0.50);
  --c-hero-overlay: linear-gradient(180deg, oklch(28% 0.03 260 / 0.18) 0%, oklch(18% 0.025 260 / 0.85) 100%);
}
[data-ui-theme='slate'][data-theme='dark'] {
  --c-surface-base: oklch(14% 0.012 260);
  --c-surface-raised: oklch(18% 0.014 260);
  --c-surface-sunken: oklch(10% 0.01 260);
  --c-surface-overlay: oklch(22% 0.014 260);
  --c-border-subtle: oklch(22% 0.014 260);
  --c-border-default: oklch(29% 0.018 260);
  --c-border-strong: oklch(41% 0.022 258);
  --c-fg-default: oklch(95% 0.005 255);
  --c-fg-muted: oklch(70% 0.012 258);
  --c-fg-subtle: oklch(56% 0.012 258);
  --c-brand-accent: oklch(72% 0.06 250);
  --c-brand-accent-fg: oklch(16% 0.02 260);
  --c-brand-accent-soft: oklch(28% 0.035 255);
  --c-brand-accent-muted: oklch(80% 0.05 250);
  --c-focus-ring: oklch(72% 0.06 250 / 0.45);
  --c-wash-1: oklch(23% 0.018 258 / 0.40);
  --c-wash-2: oklch(16% 0.01 260 / 0.40);
  --c-hero-overlay: linear-gradient(180deg, oklch(20% 0.02 260 / 0.28) 0%, oklch(13% 0.018 260 / 0.88) 100%);
}
@media (prefers-color-scheme: dark) {
  :root[data-ui-theme='slate']:not([data-theme]) {
    --c-surface-base: oklch(14% 0.012 260);
    --c-surface-raised: oklch(18% 0.014 260);
    --c-surface-sunken: oklch(10% 0.01 260);
    --c-surface-overlay: oklch(22% 0.014 260);
    --c-border-subtle: oklch(22% 0.014 260);
    --c-border-default: oklch(29% 0.018 260);
    --c-border-strong: oklch(41% 0.022 258);
    --c-fg-default: oklch(95% 0.005 255);
    --c-fg-muted: oklch(70% 0.012 258);
    --c-fg-subtle: oklch(56% 0.012 258);
    --c-brand-accent: oklch(72% 0.06 250);
    --c-brand-accent-fg: oklch(16% 0.02 260);
    --c-brand-accent-soft: oklch(28% 0.035 255);
    --c-brand-accent-muted: oklch(80% 0.05 250);
    --c-focus-ring: oklch(72% 0.06 250 / 0.45);
    --c-wash-1: oklch(23% 0.018 258 / 0.40);
    --c-wash-2: oklch(16% 0.01 260 / 0.40);
    --c-hero-overlay: linear-gradient(180deg, oklch(20% 0.02 260 / 0.28) 0%, oklch(13% 0.018 260 / 0.88) 100%);
  }
}

/* THEME: midnight */
[data-ui-theme='midnight'] {
  --c-surface-base: oklch(14% 0.012 285);
  --c-surface-raised: oklch(18% 0.014 285);
  --c-surface-sunken: oklch(10% 0.01 285);
  --c-surface-overlay: oklch(23% 0.015 285);
  --c-border-subtle: oklch(22% 0.015 285);
  --c-border-default: oklch(29% 0.018 285);
  --c-border-strong: oklch(41% 0.02 285);
  --c-fg-default: oklch(94% 0.01 85);
  --c-fg-muted: oklch(69% 0.015 85);
  --c-fg-subtle: oklch(55% 0.014 85);
  --c-brand-accent: oklch(75% 0.10 85);
  --c-brand-accent-fg: oklch(18% 0.04 85);
  --c-brand-accent-soft: oklch(28% 0.05 85);
  --c-brand-accent-muted: oklch(83% 0.09 88);
  --c-focus-ring: oklch(75% 0.10 85 / 0.45);
  --c-wash-1: oklch(24% 0.03 85 / 0.30);
  --c-wash-2: oklch(16% 0.012 285 / 0.45);
  --c-hero-overlay: linear-gradient(180deg, oklch(18% 0.02 285 / 0.30) 0%, oklch(11% 0.015 285 / 0.90) 100%);
  color-scheme: dark;
}

[data-ui-theme='porcelain'] {
  --appearance-photo-preview: url('/static/img/themes/preview/porcelain-v1.webp');
  --appearance-photo-home: url('/static/img/themes/home/porcelain-v1.webp');
  --appearance-photo-mobile: url('/static/img/themes/mobile/porcelain-v1.webp');
  --appearance-photo-focal-x: 52%;
  --appearance-photo-focal-y: 53%;
  --appearance-photo-overlay: var(--c-hero-overlay);
  --appearance-photo-fallback: var(--c-surface-sunken, #F8F5F2);
}

[data-ui-theme='olive'] {
  --appearance-photo-preview: url('/static/img/themes/preview/olive-v1.webp');
  --appearance-photo-home: url('/static/img/themes/home/olive-v1.webp');
  --appearance-photo-mobile: url('/static/img/themes/mobile/olive-v1.webp');
  --appearance-photo-focal-x: 73%;
  --appearance-photo-focal-y: 55%;
  --appearance-photo-overlay: var(--c-hero-overlay);
  --appearance-photo-fallback: var(--c-surface-sunken, #F2F3EC);
}

[data-ui-theme='terracotta'] {
  --appearance-photo-preview: url('/static/img/themes/preview/terracotta-v1.webp');
  --appearance-photo-home: url('/static/img/themes/home/terracotta-v1.webp');
  --appearance-photo-mobile: url('/static/img/themes/mobile/terracotta-v1.webp');
  --appearance-photo-focal-x: 51%;
  --appearance-photo-focal-y: 51%;
  --appearance-photo-overlay: var(--c-hero-overlay);
  --appearance-photo-fallback: var(--c-surface-sunken, #F7F1EC);
}

[data-ui-theme='slate'] {
  --appearance-photo-preview: url('/static/img/themes/preview/slate-v1.webp');
  --appearance-photo-home: url('/static/img/themes/home/slate-v1.webp');
  --appearance-photo-mobile: url('/static/img/themes/mobile/slate-v1.webp');
  --appearance-photo-focal-x: 52%;
  --appearance-photo-focal-y: 50%;
  --appearance-photo-overlay: var(--c-hero-overlay);
  --appearance-photo-fallback: var(--c-surface-sunken, #F2F3F5);
}

[data-ui-theme='midnight'] {
  --appearance-photo-preview: url('/static/img/themes/preview/midnight-v1.webp');
  --appearance-photo-home: url('/static/img/themes/home/midnight-v1.webp');
  --appearance-photo-mobile: url('/static/img/themes/mobile/midnight-v1.webp');
  --appearance-photo-focal-x: 57%;
  --appearance-photo-focal-y: 52%;
  --appearance-photo-overlay: var(--c-hero-overlay);
  --appearance-photo-fallback: var(--c-surface-sunken, #17171C);
}