/**
 * Extreme Theme: Bauhaus
 * Geometric precision — primary colors, stark contrast, functional beauty
 *
 * Character: Geometric, rational, bold
 * - Primary Bauhaus triad: Red, Blue, Yellow
 * - Zero border-radius (except full) — binary sharp/pill
 * - Zero shadows — form follows function
 * - Fast linear motion
 * - Color-block headings, bold black borders
 *
 * Palette DNA: Red #E63946, Blue #1D3557, Yellow #F4D35E,
 *              Background #F1FAEE (soft green-white)
 *
 * Light: Stark white surfaces, primary color accents
 * Dark: Black base, vivid primary colors preserved
 */

/* ===== FONT: DM Sans ===== */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400..700&display=swap");

:root[data-theme~="bauhaus"],
[data-theme~="bauhaus"] {
  color-scheme: light;

  /* Theme hints for ThemeManager */
  --theme-border-style: sharp;
  --theme-icon-set: lucide;

  /* ===== COLORS ===== */
  --color-background: oklch(97% 0.01 110);              /* #F1FAEE soft green-white */
  --color-surface: oklch(100% 0 0);                      /* White */
  --color-surface-alt: oklch(95% 0.012 110);
  --color-surface-raised: oklch(100% 0 0);
  --color-surface-sunken: oklch(93% 0.01 110);

  --color-text: oklch(15% 0.02 250);                     /* Near-black with blue tint */
  --color-text-muted: oklch(35% 0.02 250);
  --color-text-subtle: oklch(50% 0.015 250);

  --color-primary: oklch(50% 0.22 25);                   /* Red #E63946 */
    --caret-color: var(--color-primary);
  --color-primary-hover: oklch(45% 0.24 25);
  --color-primary-subtle: oklch(92% 0.04 25);

  --color-accent: oklch(25% 0.08 250);                   /* Blue #1D3557 */
  --color-accent-hover: oklch(30% 0.09 250);
  --color-accent-subtle: oklch(90% 0.02 250);

  /* Bauhaus yellow */
  --_bauhaus-color-yellow: oklch(85% 0.15 85);            /* #F4D35E */

  --color-border: oklch(20% 0.01 0);                     /* Strong black */
  --color-border-muted: oklch(70% 0.005 0);
  --color-border-strong: oklch(10% 0.005 0);

  --color-success: oklch(55% 0.15 145);
  --color-warning: oklch(85% 0.15 85);
  --color-error: oklch(50% 0.22 25);
  --color-info: oklch(35% 0.1 250);

  /* ===== TYPOGRAPHY ===== */
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;

  --line-height-normal: 1.5;
  --line-height-tight: 1.2;

  /* ===== SHAPE ===== */
  /* Binary: ZERO or FULL only — geometric precision */
  --radius-xs: 0;
  --radius-s: 0;
  --radius-m: 0;
  --radius-l: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  /* Zero shadows — pure Bauhaus, form follows function */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-2xl: none;

  /* ===== MOTION ===== */
  --duration-instant: 40ms;
  --duration-fast: 80ms;
  --duration-normal: 160ms;
  --duration-slow: 240ms;

  --ease-default: linear;
  --ease-out: linear;

  /* ===== FORM CONTROLS ===== */
  --control-border: oklch(20% 0.01 0);
  --control-checked-bg: oklch(50% 0.22 25);
  --control-checked-border: oklch(20% 0.01 0);
  --input-bg: oklch(100% 0 0);
  --input-border: oklch(20% 0.01 0);
  --input-border-focus: oklch(50% 0.22 25);
  --range-track-bg: oklch(80% 0.005 0);
  --range-track-fill: oklch(50% 0.22 25);
  --range-thumb-bg: oklch(100% 0 0);
  --range-thumb-border: oklch(20% 0.01 0);
  --progress-track-bg: oklch(85% 0.005 0);
  --progress-fill: oklch(50% 0.22 25);
}

/* Bauhaus component overrides */
:root[data-theme~="bauhaus"],
[data-theme~="bauhaus"] {
  & :is(main, article) {
    /* Color-block headings */
    & h1 {
      background: var(--color-primary);
      color: var(--color-surface);
      padding: 0.5rem 1rem;
      display: inline-block;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    & h2 {
      background: var(--color-accent);
      color: var(--color-surface);
      padding: 0.4rem 0.8rem;
      display: inline-block;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    & h3 {
      color: var(--color-accent);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      border-block-end: 2px solid var(--color-border);
      padding-block-end: 0.25rem;
    }

    /* Thick colored stripe HR */
    & hr:not([data-ornament]) {
      height: 4px;
      background: var(--color-primary);
      border: none;
      margin-block: 2rem;
    }

    /* Geometric blockquote with Bauhaus yellow circle */
    & blockquote {
      border-inline-start: 4px solid var(--color-accent);
      padding: 1.25rem 1.5rem 1.25rem 2rem;
      position: relative;
      background: var(--color-background);

      &::before {
        content: "";
        position: absolute;
        top: -8px;
        left: -12px;
        width: 20px;
        height: 20px;
        border-radius: 9999px;
        background: var(--_bauhaus-color-yellow);
      }
    }

    /* Stark geometric links */
    & a:not([class]) {
      color: var(--color-primary);
      text-decoration: none;
      border-block-end: 2px solid var(--color-primary);
      transition: color var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default);

      &:hover {
        color: var(--color-accent);
        border-color: var(--color-accent);
      }
    }

    /* Bauhaus buttons — outlined, geometric */
    & button,
    & .button {
      border: 2px solid var(--color-text);
      background: transparent;
      color: var(--color-text);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      transition: all var(--duration-normal) var(--ease-default);

      &:hover {
        background: var(--color-text);
        color: var(--color-surface);
      }

      &:active {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-surface);
      }
    }

    /* Geometric cards */
    & .card {
      border: 2px solid var(--color-border);
      background: var(--color-surface);
      transition: border-color var(--duration-normal) var(--ease-default);

      &:hover {
        border-color: var(--color-primary);
      }
    }

    /* Stark inputs */
    & input,
    & textarea,
    & select {
      border: 2px solid var(--color-border);
      background: var(--color-surface);
      transition: border-color var(--duration-normal) var(--ease-default);

      &:focus {
        border-color: var(--color-primary);
        outline: none;
      }

      &::placeholder {
        color: var(--color-text-subtle);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-size: 0.875em;
      }
    }

    /* Geometric code blocks */
    & pre {
      border: 2px solid var(--color-border);
      background: var(--color-background);
    }

    & code {
      background: var(--color-surface-alt);
      color: var(--color-accent);
      padding: 0.125rem 0.375rem;
    }
  }

  & :is(main, article) code-block {
    --cb-header-bg: var(--color-surface);
    --cb-border-color: var(--color-border-strong);
    --cb-function: var(--_bauhaus-color-yellow);
    --cb-number: var(--color-primary);
    --cb-button-bg: var(--color-surface);
  }

  & :is(main, article) browser-window {
    --browser-window-border-color: var(--color-border-strong);
  }

  /* Selection — Bauhaus red */
  & ::selection {
    background: var(--color-primary);
    color: var(--color-surface);
  }
}

/* Dark variant — Dark Bauhaus */
:root[data-theme~="bauhaus"][data-mode="dark"],
[data-theme~="bauhaus"][data-mode="dark"] {
  color-scheme: dark;

  --color-background: oklch(10% 0.01 250);              /* Near-black with blue */
  --color-surface: oklch(14% 0.01 250);
  --color-surface-alt: oklch(18% 0.012 250);
  --color-surface-raised: oklch(20% 0.01 250);
  --color-surface-sunken: oklch(8% 0.01 250);

  --color-text: oklch(95% 0.005 0);                      /* Near-white */
  --color-text-muted: oklch(75% 0.005 0);
  --color-text-subtle: oklch(55% 0.005 0);

  /* Colors stay vivid in dark */
  --color-primary: oklch(58% 0.22 25);
  --color-primary-hover: oklch(63% 0.24 25);
  --color-primary-subtle: oklch(20% 0.06 25);

  --color-accent: oklch(55% 0.1 250);
  --color-accent-hover: oklch(60% 0.11 250);
  --color-accent-subtle: oklch(20% 0.04 250);

  --_bauhaus-color-yellow: oklch(85% 0.15 85);

  --color-border: oklch(80% 0.005 0);
  --color-border-muted: oklch(40% 0.005 0);
  --color-border-strong: oklch(90% 0.005 0);

  --color-success: oklch(62% 0.15 145);
  --color-warning: oklch(85% 0.15 85);
  --color-error: oklch(58% 0.22 25);
  --color-info: oklch(55% 0.1 250);

  /* Form controls: dark mode with white borders */
  --input-bg: oklch(14% 0.01 250);
  --input-border: oklch(80% 0.005 0);
  --input-border-focus: oklch(58% 0.22 25);
  --control-border: oklch(80% 0.005 0);
  --control-checked-bg: oklch(58% 0.22 25);
  --control-checked-border: oklch(80% 0.005 0);
  --range-track-bg: oklch(30% 0.005 0);
  --range-track-fill: oklch(58% 0.22 25);
  --range-thumb-bg: oklch(14% 0.01 250);
  --range-thumb-border: oklch(80% 0.005 0);
  --progress-track-bg: oklch(25% 0.005 0);
  --progress-fill: oklch(58% 0.22 25);

  & :is(main, article) {
    & h1 {
      background: var(--color-primary);
      color: var(--color-surface);
    }

    & h2 {
      background: var(--color-accent);
      color: var(--color-surface);
    }

    & h3 {
      color: var(--_bauhaus-color-yellow);
      border-color: var(--color-border);
    }

    & hr:not([data-ornament]) {
      background: var(--color-primary);
    }

    & blockquote {
      border-color: var(--color-accent);
      background: var(--color-surface);

      &::before {
        background: var(--_bauhaus-color-yellow);
      }
    }

    & a:not([class]) {
      color: var(--color-primary);
      border-color: var(--color-primary);

      &:hover {
        color: var(--_bauhaus-color-yellow);
        border-color: var(--_bauhaus-color-yellow);
      }
    }

    & button,
    & .button {
      border-color: var(--color-border);
      color: var(--color-text);

      &:hover {
        background: var(--color-text);
        color: var(--color-background);
      }

      &:active {
        background: var(--color-primary);
        border-color: var(--color-primary);
        color: var(--color-surface);
      }
    }

    & .card {
      border-color: var(--color-border);
      background: var(--color-surface);

      &:hover {
        border-color: var(--color-primary);
      }
    }

    & input,
    & textarea,
    & select {
      border-color: var(--color-border);
      background: var(--color-surface);
      color: var(--color-text);

      &:focus {
        border-color: var(--color-primary);
      }
    }
  }

  & :is(main, article) code-block {
    --cb-header-bg: var(--color-surface);
    --cb-function: var(--_bauhaus-color-yellow);
    --cb-number: var(--color-primary);
    --cb-button-bg: var(--color-surface);
  }

  & ::selection {
    background: oklch(58% 0.22 25 / 0.4);
    color: var(--color-text);
  }
}