/**
 * Extreme Theme: Art Deco
 * Gold + black, geometric shapes, luxury
 * 
 * Character: 1920s luxury meets modern web
 * - Geometric serif (DM Serif Display or system serif)
 * - Sharp corners (0px radius) with selective geometric treatment
 * - Hard directional shadows, gold-tinted
 * - Thin gold separator lines, stepped border patterns
 * - Uppercase letterspacing on headings
 * - Elegant, measured motion
 * 
 * Light: Cream + gold + near-black, deep teal accent
 * Dark: Near-black + bright gold + cream, teal accent
 */

@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap");

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

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

  /* ===== COLORS ===== */
  --color-background: oklch(97% 0.01 80);        /* Cream #FAF7F0 */
  --color-surface: oklch(99% 0.005 80);           /* Warm white */
  --color-surface-alt: oklch(95% 0.012 80);
  --color-surface-raised: oklch(100% 0 0);
  --color-surface-sunken: oklch(93% 0.015 80);

  --color-text: oklch(18% 0.01 80);              /* Near black */
  --color-text-muted: oklch(35% 0.01 80);
  --color-text-subtle: oklch(50% 0.01 80);

  --color-primary: oklch(62% 0.12 85);            /* Gold #C9A84C */
  --color-primary-hover: oklch(57% 0.13 85);
  --color-primary-subtle: oklch(95% 0.03 85);

  --color-accent: oklch(40% 0.08 185);            /* Deep teal #1A5C5C */
  --color-accent-hover: oklch(45% 0.09 185);

  --color-border: oklch(62% 0.12 85 / 0.3);      /* Gold border */
  --color-border-muted: oklch(85% 0.015 80);
  --color-border-strong: oklch(62% 0.12 85);      /* Full gold */

  --color-success: oklch(55% 0.12 150);
  --color-warning: oklch(62% 0.12 85);
  --color-error: oklch(50% 0.16 20);
  --color-info: oklch(40% 0.08 185);

  /* ===== TYPOGRAPHY ===== */
  --font-sans: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-mono: "Courier New", Courier, monospace;

  --line-height-normal: 1.6;
  --line-height-tight: 1.1;

  --letter-spacing-tight: 0;
  --letter-spacing-normal: 0.02em;
  --letter-spacing-wide: 0.15em;

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

  /* ===== SHADOWS ===== */
  --shadow-xs: 2px 2px 0 oklch(62% 0.12 85 / 0.1);
  --shadow-sm: 3px 3px 0 oklch(62% 0.12 85 / 0.12);
  --shadow-md: 4px 4px 0 oklch(62% 0.12 85 / 0.15);
  --shadow-lg: 6px 6px 0 oklch(62% 0.12 85 / 0.15);
  --shadow-xl: 8px 8px 0 oklch(62% 0.12 85 / 0.18);
  --shadow-2xl: 12px 12px 0 oklch(62% 0.12 85 / 0.2);

  /* ===== MOTION ===== */
  --duration-instant: 50ms;
  --duration-fast: 100ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== FORM CONTROLS ===== */
  --control-border: oklch(62% 0.12 85);
  --control-checked-bg: oklch(62% 0.12 85);
  --control-checked-border: oklch(62% 0.12 85);
  --input-border: oklch(62% 0.12 85 / 0.5);
  --input-border-focus: oklch(62% 0.12 85);
  --range-track-fill: oklch(62% 0.12 85);
  --range-thumb-border: oklch(62% 0.12 85);
  --progress-fill: oklch(62% 0.12 85);
}

/* Art Deco component overrides */
:root[data-theme~="art-deco"],
[data-theme~="art-deco"] {
  & :is(main, article) {
    /* Gold HR with stepped pattern */
    & hr:not([data-ornament]) {
      border: none;
      border-block-start: 1px solid oklch(62% 0.12 85);
      margin-block: 2.5rem;
      position: relative;

      &::after {
        content: "◆";
        position: absolute;
        top: -0.6em;
        left: 50%;
        transform: translateX(-50%);
        background: var(--color-background);
        padding-inline: 0.75rem;
        color: oklch(62% 0.12 85);
        font-size: 0.75rem;
      }
    }

    /* Uppercase headings with wide letterspacing */
    & h1, & h2 {
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-weight: 400;
      color: oklch(18% 0.01 80);
      border-block-end: 2px solid oklch(62% 0.12 85);
      padding-block-end: 0.5rem;
    }

    & h3, & h4 {
      letter-spacing: 0.05em;
    }

    /* Gold-accented links */
    & a:not([class]) {
      color: oklch(62% 0.12 85);
      text-decoration: none;
      border-block-end: 1px solid oklch(62% 0.12 85 / 0.3);

      &:hover {
        border-block-end-color: oklch(62% 0.12 85);
      }
    }

    /* Blockquote with gold accent */
    & blockquote {
      border-inline-start: 3px solid oklch(62% 0.12 85);
      padding-inline-start: 1.5rem;
      font-style: italic;
    }

    /* Angular buttons with gold borders */
    & button,
    & .button {
      text-transform: uppercase;
      letter-spacing: 0.1em;
      font-size: 0.875rem;
      border: 2px solid oklch(62% 0.12 85);
      font-family: system-ui, sans-serif;
    }

    /* Cards with gold-tinted borders */
    & .card {
      border: 1px solid oklch(62% 0.12 85 / 0.3);
      border-block-start: 3px solid oklch(62% 0.12 85);
    }
  }

  & :is(main, article) code-block {
    --cb-header-bg: var(--color-surface);
    --cb-keyword: oklch(62% 0.12 85);
    --cb-string: oklch(40% 0.08 185);
    --cb-function: oklch(40% 0.1 280);
    --cb-number: oklch(50% 0.16 20);
    --cb-button-bg: var(--color-surface);
  }

  & ::selection {
    background: oklch(62% 0.12 85 / 0.2);
    color: oklch(18% 0.01 80);
  }
}

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

  --color-background: oklch(12% 0.005 80);       /* Near black #1A1A1A */
  --color-surface: oklch(18% 0.005 80);           /* Dark gray #2A2A2A */
  --color-surface-alt: oklch(15% 0.005 80);
  --color-surface-raised: oklch(22% 0.005 80);
  --color-surface-sunken: oklch(8% 0.005 80);

  --color-text: oklch(97% 0.01 80);              /* Cream */
  --color-text-muted: oklch(75% 0.01 80);
  --color-text-subtle: oklch(55% 0.01 80);

  --color-primary: oklch(72% 0.14 85);            /* Bright gold */
  --color-primary-hover: oklch(77% 0.15 85);
  --color-primary-subtle: oklch(22% 0.04 85);

  --color-accent: oklch(55% 0.08 185);            /* Teal #2D8B8B */
  --color-accent-hover: oklch(60% 0.09 185);

  --color-border: oklch(72% 0.14 85 / 0.25);
  --color-border-muted: oklch(30% 0.005 80);
  --color-border-strong: oklch(72% 0.14 85);

  --color-success: oklch(68% 0.14 150);
  --color-warning: oklch(72% 0.14 85);
  --color-error: oklch(65% 0.18 20);
  --color-info: oklch(55% 0.08 185);

  /* Form controls: dark surface with gold border */
  --input-bg: oklch(18% 0.005 80);
  --input-border: oklch(72% 0.14 85 / 0.4);
  --input-border-focus: oklch(72% 0.14 85);
  --control-border: oklch(72% 0.14 85);
  --control-checked-bg: oklch(72% 0.14 85);
  --control-checked-border: oklch(72% 0.14 85);
  --range-track-fill: oklch(72% 0.14 85);
  --range-thumb-border: oklch(72% 0.14 85);
  --progress-fill: oklch(72% 0.14 85);

  --shadow-xs: 2px 2px 0 oklch(72% 0.14 85 / 0.08);
  --shadow-sm: 3px 3px 0 oklch(72% 0.14 85 / 0.1);
  --shadow-md: 4px 4px 0 oklch(72% 0.14 85 / 0.12);
  --shadow-lg: 6px 6px 0 oklch(72% 0.14 85 / 0.12);
  --shadow-xl: 8px 8px 0 oklch(72% 0.14 85 / 0.15);
  --shadow-2xl: 12px 12px 0 oklch(72% 0.14 85 / 0.18);

  & :is(main, article) {
    & hr:not([data-ornament]) {
      border-color: oklch(72% 0.14 85);

      &::after {
        color: oklch(72% 0.14 85);
        background: var(--color-background);
      }
    }

    & h1, & h2 {
      color: oklch(97% 0.01 80);
      border-block-end-color: oklch(72% 0.14 85);
    }

    & a:not([class]) {
      color: oklch(72% 0.14 85);
      border-block-end-color: oklch(72% 0.14 85 / 0.3);

      &:hover {
        border-block-end-color: oklch(72% 0.14 85);
      }
    }

    & blockquote {
      border-inline-start-color: oklch(72% 0.14 85);
      color: oklch(75% 0.01 80);
    }

    & button,
    & .button {
      border-color: oklch(72% 0.14 85);
    }

    & .card {
      border-color: oklch(72% 0.14 85 / 0.25);
      border-block-start-color: oklch(72% 0.14 85);
    }
  }

  & :is(main, article) code-block {
    --cb-header-bg: var(--color-surface);
    --cb-keyword: oklch(72% 0.14 85);
    --cb-string: oklch(55% 0.08 185);
    --cb-function: oklch(62% 0.1 280);
    --cb-number: oklch(65% 0.14 20);
  }

  & ::selection {
    background: oklch(72% 0.14 85 / 0.25);
    color: oklch(97% 0.01 80);
  }
}