/**
 * Extreme Theme: Brutalist
 * Raw, bold, honest, unpolished
 * Inspired by brutalist architecture and web design
 *
 * Character: Harsh, industrial, exposed structure
 * - Monospace typography throughout
 * - Zero border radii
 * - Hard offset shadows
 * - High contrast black/white
 */

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

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

  /* ===== COLORS ===== */
  --color-surface: oklch(95% 0 0);
  --color-surface-alt: oklch(100% 0 0);
  --color-surface-raised: oklch(100% 0 0);
  --color-surface-sunken: oklch(90% 0 0);
  --color-background: oklch(95% 0 0);

  --color-text: oklch(0% 0 0);
  --color-text-muted: oklch(30% 0 0);
  --color-text-subtle: oklch(50% 0 0);

  --color-primary: oklch(60% 0.3 145); /* Bright green */
    --caret-color: var(--color-primary);
  --color-primary-hover: oklch(55% 0.3 145);
  --color-primary-subtle: oklch(90% 0.1 145);

  --color-accent: oklch(65% 0.25 30); /* Warning orange */
  --color-accent-hover: oklch(55% 0.25 30);

  --color-border: oklch(0% 0 0);
  --color-border-muted: oklch(70% 0 0);
  --color-border-strong: oklch(0% 0 0);

  /* Status — bold, direct, high-contrast */
  --color-error:         oklch(55% 0.28 25);
  --color-error-subtle:  oklch(92% 0.06 25);
  --color-error-text:    oklch(35% 0.18 25);
  --color-warning:       oklch(70% 0.22 70);
  --color-warning-subtle: oklch(92% 0.08 70);
  --color-warning-text:  oklch(35% 0.14 70);
  --color-success:       oklch(55% 0.28 145);
  --color-success-subtle: oklch(92% 0.06 145);
  --color-success-text:  oklch(30% 0.16 145);
  --color-info:          oklch(45% 0.2 240);
  --color-info-subtle:   oklch(92% 0.06 240);
  --color-info-text:     oklch(30% 0.14 240);

  /* ===== TYPOGRAPHY ===== */
  --font-sans: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  --font-size-adjust: 0.48;

  --line-height-normal: 1.6;
  --line-height-tight: 1.1;
  --letter-spacing-normal: -0.01em;

  /* ===== SHAPE ===== */
  --radius-xs: 0;
  --radius-s: 0;
  --radius-m: 0;
  --radius-l: 0;
  --radius-xl: 0;
  --radius-2xl: 0;
  --radius-full: 0;

  /* ===== SHADOWS ===== */
  /* Harsh, offset shadows - no blur */
  --shadow-xs: 1px 1px 0 oklch(0% 0 0);
  --shadow-sm: 2px 2px 0 oklch(0% 0 0);
  --shadow-md: 4px 4px 0 oklch(0% 0 0);
  --shadow-lg: 6px 6px 0 oklch(0% 0 0);
  --shadow-xl: 8px 8px 0 oklch(0% 0 0);
  --shadow-2xl: 10px 10px 0 oklch(0% 0 0);

  /* ===== BORDERS ===== */
  --border-width: 2px;
  --border-width-thick: 4px;

  /* ===== MOTION ===== */
  --duration-instant: 0ms;
  --duration-fast: 100ms;
  --duration-normal: 100ms;
  --duration-slow: 150ms;

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

  /* ===== EXTENSION OVERRIDES ===== */
  /* Motion: Instant, no easing */
  --motion-hover-lift: none;
  --motion-hover-scale: scale(1.05);
  --motion-stagger-delay: 0ms;
  --motion-bounce: linear;
  --motion-snappy: linear;
  --motion-smooth: linear;
  --motion-elastic: linear;
  --motion-enter-duration: 0ms;
  --motion-exit-duration: 0ms;

  /* ===== FORM CONTROLS ===== */
  --control-size: 1.25rem;
  --control-border: oklch(0% 0 0);
  --input-border: oklch(0% 0 0);
  --input-bg: oklch(100% 0 0);
  --range-track-bg: oklch(0% 0 0);
  --range-thumb-bg: oklch(100% 0 0);
  --range-thumb-border: oklch(0% 0 0);
  --progress-track-bg: oklch(80% 0 0);
}

/* Brutalist component overrides */
:root[data-theme~="brutalist"],
[data-theme~="brutalist"] {
  & :is(main, article) {
  /* Raw dividers */
  & hr:not([data-ornament]) {
    border: none;
    height: 4px;
    background: repeating-linear-gradient(
      90deg,
      var(--color-border),
      var(--color-border) 10px,
      transparent 10px,
      transparent 20px
    );
    margin-block: 2rem;
  }

  /* Headings with harsh treatment — skip gradient-text hero headings */
  & h1:not([data-gradient-text]) {
    text-transform: uppercase;
    background: var(--color-text);
    color: var(--color-surface-raised);
    padding: 0.5rem 1rem;
    width: fit-content;
    margin-inline: auto;
    margin-block-end: 1.5rem;
    text-align: center;
  }

  & h2 {
    border-block-end: 4px solid var(--color-border);
    padding-block-end: 0.5rem;
  }

  & h3 {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  /* Links - raw and obvious (exclude nav to prevent hover shift) */
  & a:not([class]):not(nav a) {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;

    &:hover {
      background: var(--color-primary);
      color: var(--color-text);
      text-decoration: none;
      padding-inline: 0.25em;
      margin-inline: -0.25em;
    }
  }

  /* Buttons with harsh shadows */
  & button,
  & .button {
    border-width: 2px;
    box-shadow: var(--shadow-md);
    transition:
      transform 0.1s,
      box-shadow 0.1s;

    &:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 var(--color-border);
    }

    &:active {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0 var(--color-border);
    }
  }

  /* Cards with offset shadows */
  & .card {
    border-width: 2px;
    box-shadow: var(--shadow-md);

    &:hover {
      transform: translate(-2px, -2px);
      box-shadow: 6px 6px 0 var(--color-border);
    }
  }

  /* Inputs brutalist */
  & input,
  & textarea {
    border-width: 2px;

    &:focus {
      box-shadow: var(--shadow-sm);
      outline: none;
    }
  }

  /* Customizable select: raw brutalist picker */
  @supports (appearance: base-select) {
    & select:not([multiple])::picker-icon {
      color: var(--color-text);
    }

    & select:not([multiple]):open {
      box-shadow: var(--shadow-sm);
    }

    & select:not([multiple])::picker(select) {
      background: var(--color-surface);
      border: 2px solid var(--color-border);
      box-shadow: var(--shadow-md);
    }

    & select:not([multiple]) option:hover {
      background: var(--color-surface-raised);
    }

    & select:not([multiple]) option:checked {
      color: var(--color-primary);
      font-weight: 700;
    }

    & select:not([multiple]) option::checkmark {
      color: var(--color-primary);
    }

    & select:not([multiple]) optgroup > legend {
      font-family: var(--font-mono);
      font-weight: 700;
    }

    & select:not([multiple]) optgroup:not(:first-of-type) {
      border-color: var(--color-border);
      border-width: 2px;
    }
  }

  /* Blockquote with harsh styling */
  & blockquote {
    border: 2px solid var(--color-border);
    border-inline-start-width: 8px;
    padding: 1rem 1.5rem;
    background: var(--color-surface);
    font-style: normal;

    &::before {
      content: "\0022";
      font-size: 3rem;
      font-weight: 700;
      line-height: 1;
      display: block;
      margin-block-end: 0.5rem;
    }
  }

  /* Code blocks - terminal style */
  & pre {
    background: oklch(10% 0 0);
    color: var(--color-primary);
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-md);
  }

  & code {
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
  }
  }

  & :is(main, article) code-block {
    --cb-header-bg: var(--color-surface);
    --cb-text-color: var(--color-primary);
    --cb-border-color: var(--color-border-strong);
    --cb-label-color: oklch(60% 0 0);
    --cb-border-radius: 0;
    --cb-function: oklch(80% 0 0);
    --cb-button-bg: var(--color-surface);
    --cb-button-border: 1px solid oklch(40% 0 0);
    --cb-button-hover-bg: var(--color-primary);
  }

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

  /* Prevent border doubling on nested containers (details > form, etc.) */
  & :is(main, article) details :is(form, fieldset, table) {
    border: none;
    box-shadow: none;
    filter: none;
  }

  /* Selection */
  & ::selection {
    background: var(--color-primary);
    color: var(--color-text);
  }

  /* Scrollbar */
  --scrollbar-thumb: var(--color-border);
  --scrollbar-track: var(--color-surface-sunken);
}

/* Dark variant - inverted brutalism */
:root[data-theme~="brutalist"][data-mode="dark"],
[data-theme~="brutalist"][data-mode="dark"] {
  color-scheme: dark;

  --color-surface: oklch(10% 0 0);
  --color-surface-alt: oklch(5% 0 0);
  --color-surface-raised: oklch(15% 0 0);
  --color-surface-sunken: oklch(5% 0 0);
  --color-background: oklch(5% 0 0);

  --color-text: oklch(95% 0 0);
  --color-text-muted: oklch(70% 0 0);
  --color-text-subtle: oklch(62% 0 0);

  --color-primary: oklch(60% 0.3 145);
  --color-primary-subtle: oklch(20% 0.08 145);
  --color-primary-hover: oklch(65% 0.3 145);
  --color-accent: oklch(70% 0.25 30);
  --color-accent-hover: oklch(70% 0.25 30);
  --color-accent-subtle: oklch(20% 0.06 30);

  --color-border: oklch(95% 0 0);
  --color-border-muted: oklch(30% 0 0);
  --color-border-strong: oklch(95% 0 0);

  /* Status — inverted for dark mode */
  --color-error:         oklch(60% 0.28 25);
  --color-error-subtle:  oklch(18% 0.08 25);
  --color-error-text:    oklch(78% 0.18 25);
  --color-warning:       oklch(75% 0.22 70);
  --color-warning-subtle: oklch(18% 0.1 70);
  --color-warning-text:  oklch(82% 0.14 70);
  --color-success:       oklch(60% 0.28 145);
  --color-success-subtle: oklch(18% 0.08 145);
  --color-success-text:  oklch(78% 0.16 145);
  --color-info:          oklch(58% 0.2 240);
  --color-info-subtle:   oklch(18% 0.08 240);
  --color-info-text:     oklch(78% 0.14 240);

  --scrollbar-thumb: oklch(95% 0 0);
  --scrollbar-track: oklch(15% 0 0);

  /* Form controls: dark inputs with white borders (inverted) */
  --input-bg: oklch(10% 0 0);
  --input-border: oklch(95% 0 0);
  --input-border-focus: oklch(60% 0.3 145);
  --control-border: oklch(95% 0 0);
  --control-checked-bg: oklch(60% 0.3 145);
  --control-checked-border: oklch(95% 0 0);
  --range-track-bg: oklch(95% 0 0);
  --range-track-fill: oklch(60% 0.3 145);
  --range-thumb-bg: oklch(10% 0 0);
  --range-thumb-border: oklch(95% 0 0);
  --progress-track-bg: oklch(30% 0 0);
  --progress-fill: oklch(60% 0.3 145);

  --shadow-xs: 1px 1px 0 oklch(100% 0 0);
  --shadow-sm: 2px 2px 0 oklch(100% 0 0);
  --shadow-md: 4px 4px 0 oklch(100% 0 0);
  --shadow-lg: 6px 6px 0 oklch(100% 0 0);
  --shadow-xl: 8px 8px 0 oklch(100% 0 0);
  --shadow-2xl: 10px 10px 0 oklch(100% 0 0);

  & :is(main, article) h1:not([data-gradient-text]) {
    background: var(--color-text);
    color: var(--color-background);
  }

  & :is(main, article) h2 {
    border-block-end-color: var(--color-border);
  }

  & :is(main, article) hr:not([data-ornament]) {
    background: repeating-linear-gradient(
      90deg,
      var(--color-border),
      var(--color-border) 10px,
      transparent 10px,
      transparent 20px
    );
  }

  & :is(main, article) blockquote {
    border-color: var(--color-border);
    background: var(--color-surface-raised);
  }

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

  & :is(main, article) pre {
    background: var(--color-background);
    border-color: var(--color-border);
  }

  & :is(main, article) code-block {
    --cb-text-color: var(--color-primary);
    --cb-label-color: oklch(70% 0 0);
    --cb-function: oklch(80% 0 0);
    --cb-button-border: 1px solid oklch(70% 0 0);
  }
}