@layer base {
  :root {
    /* Brand primitives */
    --color-plaina-night: #10211D;
    --color-plaina-lime: #C8E64E;
    --color-plaina-ivory: #F4F0E8;
    --color-plaina-sage: #8FB8A8;
    --color-plaina-mist: #D7E0DB;
    --color-plaina-slate: #52635E;

    /* Functional UI colors */
    /* Functional UI color — not part of the Plaina recognition palette. */
    --color-success: #8FD8A7;
    --color-success-soft: color-mix(in srgb, var(--color-success) 12%, transparent);
    /* Functional UI color — not part of the Plaina recognition palette. */
    --color-warm: #E8C58F;
    --color-warm-soft: color-mix(in srgb, var(--color-warm) 12%, transparent);

    /* Derived colors */
    --color-accent-soft: color-mix(in srgb, var(--color-plaina-lime) 14%, transparent);
    --color-accent-faint: color-mix(in srgb, var(--color-plaina-lime) 7%, transparent);
    --color-ivory-soft: color-mix(in srgb, var(--color-plaina-ivory) 66%, transparent);
    --color-ivory-faint: color-mix(in srgb, var(--color-plaina-ivory) 4%, transparent);
    --color-overlay: color-mix(in srgb, var(--color-plaina-night) 84%, transparent);
    --color-overlay-strong: color-mix(in srgb, var(--color-plaina-night) 94%, transparent);
    --color-shadow: color-mix(in srgb, var(--color-plaina-night) 24%, transparent);

    /* Effects */
    --shadow-soft: 0 12px 36px var(--color-shadow);
    --shadow-accent: 0 10px 24px color-mix(in srgb, var(--color-plaina-lime) 10%, transparent);
    --gradient-dark: var(--color-plaina-night);
    --gradient-grid: linear-gradient(var(--color-border-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--color-border-soft) 1px, transparent 1px);
  }

  :root,
  [data-theme="light"] {
    /* Light semantic mapping */
    --color-background: var(--color-plaina-ivory);
    --color-surface: var(--color-plaina-ivory);
    --color-surface-soft: var(--color-plaina-mist);

    --color-text-primary: var(--color-plaina-night);
    --color-text-secondary: var(--color-plaina-slate);
    --color-text-muted: color-mix(
      in srgb,
      var(--color-plaina-slate) 92%,
      var(--color-plaina-ivory)
    );

    --color-accent: var(--color-plaina-lime);
    --color-on-accent: var(--color-plaina-night);

    --color-border: color-mix(in srgb, var(--color-plaina-night) 14%, transparent);
    --color-border-soft: color-mix(in srgb, var(--color-plaina-night) 8%, transparent);
    --color-border-strong: color-mix(in srgb, var(--color-plaina-slate) 45%, transparent);
  }

  [data-theme="dark"],
  .theme-dark {
    /* Dark semantic mapping */
    --color-background: var(--color-plaina-night);
    --color-surface: color-mix(
      in srgb,
      var(--color-plaina-night) 94%,
      var(--color-plaina-mist)
    );
    --color-surface-soft: color-mix(
      in srgb,
      var(--color-plaina-night) 88%,
      var(--color-plaina-mist)
    );

    --color-text-primary: var(--color-plaina-ivory);
    --color-text-secondary: var(--color-plaina-mist);
    --color-text-muted: color-mix(
      in srgb,
      var(--color-plaina-sage) 75%,
      var(--color-plaina-night)
    );

    --color-accent: var(--color-plaina-lime);
    --color-on-accent: var(--color-plaina-night);

    --color-border: color-mix(in srgb, var(--color-plaina-ivory) 14%, transparent);
    --color-border-soft: color-mix(in srgb, var(--color-plaina-ivory) 8%, transparent);
    --color-border-strong: color-mix(in srgb, var(--color-plaina-sage) 45%, transparent);
  }
}