/**
 * Memphis Bundle — Theme Tokens
 * Vanilla Breeze · Memphis Group (1981–88)
 *
 * Bold flat colour, geometric surface patterns on every face,
 * hard drop shadows, zigzag borders, anti-functionalist ornament.
 * The PATTERN SYSTEM is the heart of this theme.
 */

/* ===== FONTS ===== */
@font-face {
  font-family: "Boogaloo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/boogaloo-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/outfit-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/outfit-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("./fonts/outfit-900.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/space-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./fonts/space-mono-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer bundle-theme {

  /* ===== LIGHT MODE ===== */
  [data-theme~="memphis"] {
    color-scheme: light;
    --theme-border-style: sharp;
    --theme-icon-set: lucide;

    /* ── Memphis palette ── */
    --m-cream:     oklch(96%  0.018  88);
    --m-yellow:    oklch(86%  0.185  96);
    --m-red:       oklch(58%  0.240  26);
    --m-blue:      oklch(48%  0.220 258);
    --m-teal:      oklch(72%  0.160 195);
    --m-pink:      oklch(64%  0.240  10);
    --m-mint:      oklch(80%  0.135 165);
    --m-black:     oklch(12%  0.010  80);
    --m-white:     oklch(99%  0.005  90);

    /* Pastel tints */
    --m-yellow-lt: oklch(94% 0.08   96);
    --m-blue-lt:   oklch(88% 0.07  258);
    --m-pink-lt:   oklch(92% 0.07   10);
    --m-teal-lt:   oklch(92% 0.06  195);
    --m-mint-lt:   oklch(94% 0.05  165);

    /* ── VB semantic colors ── */
    --color-background: var(--m-cream);
    --color-surface: var(--m-white);
    --color-surface-alt: oklch(96% 0.015 88);
    --color-surface-raised: var(--m-white);
    --color-surface-sunken: oklch(94% 0.012 88);

    --color-text: var(--m-black);
    --color-text-muted: oklch(38% 0.015 0);
    --color-text-subtle: oklch(52% 0.01 0);

    --color-primary: var(--m-red);
    --color-primary-hover: oklch(52% 0.260 26);
    --color-primary-subtle: oklch(94% 0.04 26);

    --color-accent: var(--m-teal);
    --color-accent-hover: oklch(66% 0.170 195);
    --color-accent-subtle: var(--m-teal-lt);

    --color-border: var(--m-black);
    --color-border-muted: oklch(60% 0.01 0);
    --color-border-strong: var(--m-black);

    --color-interactive: var(--color-primary);
    --color-interactive-hover: var(--color-primary-hover);

    --color-success: oklch(65% 0.14 175);
    --color-warning: var(--m-yellow);
    --color-danger: var(--m-red);
    --color-info: var(--m-blue);

    /* ── Typography ── */
    --font-display: "Boogaloo", "Futura", "Century Gothic", sans-serif;
    --font-sans: "Outfit", "Century Gothic", sans-serif;
    --font-mono: "Space Mono", "Courier New", monospace;

    --text-heading-1: 2.75rem;
    --text-heading-2: 2rem;
    --text-heading-3: 1.5rem;
    --text-heading-4: 1.25rem;
    --text-body: 1rem;

    --weight-normal: 500;
    --weight-bold: 700;
    --line-height-normal: 1.6;
    --line-height-tight: 1.1;

    /* ── Shape — Memphis is square ── */
    --radius-xs: 0;
    --radius-s: 0;
    --radius-m: 0;
    --radius-l: 0;
    --radius-xl: 0;
    --radius-2xl: 0;
    --radius-full: 9999px;

    /* ── Shadows — hard offset, no blur ── */
    --shadow-xs: 2px 2px 0 var(--m-black);
    --shadow-sm: 2px 2px 0 var(--m-black);
    --shadow-md: 4px 4px 0 var(--m-black);
    --shadow-lg: 6px 6px 0 var(--m-black);
    --shadow-xl: 8px 8px 0 var(--m-black);
    --shadow-2xl: 10px 10px 0 var(--m-black);

    /* ── Motion — bouncy overshoot ── */
    --duration-instant: 50ms;
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --duration-slow: 400ms;

    --ease-default: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.22, 1.2, 0.36, 1);

    /* ── Form control tokens ── */
    --control-border: var(--m-black);
    --control-checked-bg: var(--m-red);
    --input-border: var(--m-black);
    --input-bg: var(--m-white);
    --range-track-fill: var(--m-red);
    --progress-fill: var(--m-teal);

    /* ════════════════════════════════════════════════════
       PATTERN SYSTEM — the DNA of Memphis Design
       Every surface can carry a pattern. Pure CSS gradients + inline SVG.
    ════════════════════════════════════════════════════ */

    /* 1 · Diagonal stripes */
    --m-pat-stripe-y: repeating-linear-gradient(
      45deg,
      var(--m-black) 0px, var(--m-black) 1.5px,
      transparent 1.5px, transparent 10px
    );
    --m-pat-stripe-p: repeating-linear-gradient(
      45deg,
      var(--m-pink) 0px, var(--m-pink) 1.5px,
      var(--m-cream) 1.5px, var(--m-cream) 10px
    );
    --m-pat-stripe-b: repeating-linear-gradient(
      45deg,
      var(--m-blue) 0px, var(--m-blue) 1.5px,
      var(--m-cream) 1.5px, var(--m-cream) 10px
    );
    --m-pat-stripe-t: repeating-linear-gradient(
      45deg,
      var(--m-teal) 0px, var(--m-teal) 1.5px,
      var(--m-cream) 1.5px, var(--m-cream) 10px
    );
    --m-pat-stripe-vert: repeating-linear-gradient(
      90deg,
      var(--m-black) 0px, var(--m-black) 1.5px,
      transparent 1.5px, transparent 8px
    );

    /* 2 · Polka dots */
    --m-pat-dots-y: radial-gradient(circle, var(--m-yellow) 4px, transparent 4px) 0 0 / 16px 16px;
    --m-pat-dots-r: radial-gradient(circle, var(--m-red) 4px, transparent 4px) 0 0 / 16px 16px;
    --m-pat-dots-b: radial-gradient(circle, var(--m-blue) 4px, transparent 4px) 0 0 / 16px 16px;
    --m-pat-dots-p: radial-gradient(circle, var(--m-pink) 4px, transparent 4px) 0 0 / 16px 16px;
    --m-pat-dots-sm: radial-gradient(circle, var(--m-black) 2px, transparent 2px) 0 0 / 10px 10px;
    --m-pat-dots-lg: radial-gradient(circle, var(--m-black) 6px, transparent 6px) 0 0 / 22px 22px;

    /* 3 · Checkerboard */
    --m-pat-check-sm: conic-gradient(var(--m-black) 90deg, transparent 90deg) 0 0 / 10px 10px;
    --m-pat-check-md: conic-gradient(var(--m-black) 90deg, transparent 90deg) 0 0 / 16px 16px;
    --m-pat-check-y: conic-gradient(var(--m-yellow) 90deg, var(--m-cream) 90deg) 0 0 / 14px 14px;
    --m-pat-check-p: conic-gradient(var(--m-pink) 90deg, var(--m-cream) 90deg) 0 0 / 14px 14px;

    /* 4 · Crosshatch */
    --m-pat-cross:
      repeating-linear-gradient(0deg, var(--m-black) 0px, var(--m-black) 1px, transparent 1px, transparent 12px),
      repeating-linear-gradient(90deg, var(--m-black) 0px, var(--m-black) 1px, transparent 1px, transparent 12px);

    /* 5 · Zigzag */
    --m-pat-zigzag-y:
      repeating-linear-gradient(135deg, var(--m-yellow) 0 8px, transparent 0 16px),
      repeating-linear-gradient(45deg, var(--m-yellow) 0 8px, transparent 0 16px);
    --m-pat-zigzag-b:
      repeating-linear-gradient(135deg, var(--m-blue) 0 8px, transparent 0 16px),
      repeating-linear-gradient(45deg, var(--m-blue) 0 8px, transparent 0 16px);

    /* 6 · Squiggle (inline SVG) */
    --m-pat-squiggle-r: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 C5 0, 15 0, 20 10 C25 20, 35 20, 40 10' stroke='%23d03040' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") repeat;
    --m-pat-squiggle-b: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 C5 0, 15 0, 20 10 C25 20, 35 20, 40 10' stroke='%231a3a9e' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") repeat;
    --m-pat-squiggle-p: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 C5 0, 15 0, 20 10 C25 20, 35 20, 40 10' stroke='%23c02070' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") repeat;
    --m-pat-squiggle-bk: url("data:image/svg+xml,%3Csvg width='40' height='20' viewBox='0 0 40 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 C5 0, 15 0, 20 10 C25 20, 35 20, 40 10' stroke='%231a1a14' stroke-width='2' fill='none'/%3E%3C/svg%3E") repeat;

    /* 7 · Confetti */
    --m-pat-confetti:
      radial-gradient(circle, var(--m-red)    3px, transparent 3px) 0    0   / 28px 28px,
      radial-gradient(circle, var(--m-blue)   3px, transparent 3px) 14px 7px / 28px 28px,
      radial-gradient(circle, var(--m-yellow) 3px, transparent 3px) 7px  14px / 28px 28px,
      radial-gradient(circle, var(--m-teal)   3px, transparent 3px) 21px 3px / 28px 28px,
      radial-gradient(circle, var(--m-pink)   3px, transparent 3px) 3px  21px / 28px 28px;
  }


  /* ===== COMPONENT OVERRIDES ===== */

  /* Headings — Boogaloo display, decorators */
  [data-theme~="memphis"] :is(main, article) h1 {
    font-family: var(--font-display, var(--font-sans));
    color: var(--m-red);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  [data-theme~="memphis"] :is(main, article) h1::after {
    content: " \2726";
    color: var(--m-yellow);
  }

  [data-theme~="memphis"] :is(main, article) h2 {
    font-family: var(--font-display, var(--font-sans));
    color: var(--m-black);
    text-transform: uppercase;
  }

  [data-theme~="memphis"] :is(main, article) h2::before {
    content: "\25C6 ";
    color: var(--m-teal);
  }

  [data-theme~="memphis"] :is(main, article) h3 {
    font-family: var(--font-display, var(--font-sans));
    color: var(--m-blue);
    text-transform: uppercase;
  }

  /* HR — zigzag band divider */
  [data-theme~="memphis"] :is(main, article) hr:not([data-ornament]) {
    border: none;
    height: 16px;
    background: var(--m-pat-zigzag-b);
    background-size: 32px 16px;
    border-block: 2.5px solid var(--m-black);
    margin-block: 2rem;
  }

  /* Blockquote — bold black border, yellow tint, pink quotation mark */
  [data-theme~="memphis"] :is(main, article) blockquote:not([data-callout]) {
    border: 2.5px solid var(--m-black);
    border-inline-start: 2.5px solid var(--m-black);
    padding: 1.5rem;
    background: oklch(from var(--m-yellow) l c h / 0.15);
    position: relative;
  }

  [data-theme~="memphis"] :is(main, article) blockquote:not([data-callout])::before {
    content: "\275D";
    position: absolute;
    top: -0.75rem;
    left: 1rem;
    background: var(--m-pink);
    color: white;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
  }

  /* Links — bold underline */
  [data-theme~="memphis"] :is(main, article) a:not([class]) {
    color: var(--m-red);
    text-decoration: none;
    border-block-end: 3px solid var(--m-teal);
    font-weight: 600;
    transition: all 200ms var(--ease-default);
  }

  [data-theme~="memphis"] :is(main, article) a:not([class]):hover {
    color: var(--m-teal);
    border-color: var(--m-red);
  }

  /* Buttons — bold border, offset shadow, interactive press */
  [data-theme~="memphis"] :is(main, article) button,
  [data-theme~="memphis"] :is(main, article) .button {
    border: 2.5px solid var(--m-black);
    background: var(--m-red);
    color: white;
    font-family: var(--font-display, var(--font-sans));
    font-weight: 400;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 var(--m-black);
    transition: transform 0.06s, box-shadow 0.06s;
  }

  [data-theme~="memphis"] :is(main, article) button:hover,
  [data-theme~="memphis"] :is(main, article) .button:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--m-black);
  }

  [data-theme~="memphis"] :is(main, article) button:active,
  [data-theme~="memphis"] :is(main, article) .button:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--m-black);
  }

  /* Cards — bold border + offset shadow */
  [data-theme~="memphis"] :is(main, article) .card {
    border: 2.5px solid var(--m-black);
    background: var(--m-cream);
    box-shadow: 6px 6px 0 var(--m-black);
    transition: transform 0.15s, box-shadow 0.15s;
  }

  [data-theme~="memphis"] :is(main, article) .card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--m-black);
  }

  /* Inputs — bold black borders, focus with coloured offset shadow */
  [data-theme~="memphis"] :is(main, article) input,
  [data-theme~="memphis"] :is(main, article) textarea,
  [data-theme~="memphis"] :is(main, article) select {
    border: 2.5px solid var(--m-black);
    background: var(--m-white);
    font-weight: 500;
    box-shadow: 2px 2px 0 var(--m-black);
    transition: box-shadow 0.1s;
  }

  [data-theme~="memphis"] :is(main, article) input:focus,
  [data-theme~="memphis"] :is(main, article) textarea:focus,
  [data-theme~="memphis"] :is(main, article) select:focus {
    border-color: var(--m-blue);
    box-shadow: 4px 4px 0 var(--m-blue);
    outline: none;
  }

  /* Customizable select: Memphis geometric picker */
  @supports (appearance: base-select) {
    [data-theme~="memphis"] :is(main, article) select:not([multiple]) {
      padding-inline-end: var(--size-m);
    }

    [data-theme~="memphis"] :is(main, article) select:not([multiple])::picker-icon {
      color: var(--m-black);
      margin-inline-start: var(--size-xs);
    }

    [data-theme~="memphis"] :is(main, article) select:not([multiple]):open {
      border-color: var(--m-blue);
      box-shadow: 4px 4px 0 var(--m-blue);
    }

    [data-theme~="memphis"] :is(main, article) select:not([multiple])::picker(select) {
      background: var(--m-white);
      border: 2.5px solid var(--m-black);
      box-shadow: 4px 4px 0 var(--m-black);
      padding-block: var(--size-s);
    }

    [data-theme~="memphis"] :is(main, article) select:not([multiple]) option {
      padding: var(--size-xs) var(--size-m);
      margin-inline: var(--size-xs);
    }

    [data-theme~="memphis"] :is(main, article) select:not([multiple]) option:hover {
      background: var(--m-yellow-lt);
    }

    [data-theme~="memphis"] :is(main, article) select:not([multiple]) option:checked {
      color: var(--m-red);
      font-weight: 700;
    }

    [data-theme~="memphis"] :is(main, article) select:not([multiple]) option::checkmark {
      color: var(--m-red);
    }

    [data-theme~="memphis"] :is(main, article) select:not([multiple]) optgroup > legend {
      font-family: var(--font-display);
      font-weight: 900;
      color: var(--m-teal);
      padding-inline: var(--size-m);
    }

    [data-theme~="memphis"] :is(main, article) select:not([multiple]) optgroup:not(:first-of-type) {
      border-color: var(--m-black);
      border-width: 2.5px;
    }
  }

  /* Code — yellow background, bold borders */
  [data-theme~="memphis"] :is(main, article) code {
    background: var(--m-yellow-lt);
    color: var(--m-black);
    padding: 0.1em 0.4em;
    border: 1.5px solid var(--m-black);
    font-weight: 600;
  }

  [data-theme~="memphis"] :is(main, article) pre {
    border: 2.5px solid var(--m-black);
    box-shadow: 4px 4px 0 var(--m-black);
    background: var(--m-cream);
  }

  /* code-block component */
  [data-theme~="memphis"] :is(main, article) code-block {
    --cb-bg: var(--color-surface);
    --cb-code-bg: var(--color-surface);
    --cb-header-bg: var(--color-surface);
    --cb-text-color: var(--color-text);
    --cb-border-color: var(--m-black);
    --cb-comment: var(--color-text-muted);
    --cb-keyword: var(--m-red);
    --cb-string: var(--m-teal);
    --cb-function: var(--m-blue);
    --cb-number: var(--m-yellow);
    --cb-tag: var(--m-teal);
    --cb-attribute: var(--m-red);
    --cb-button-bg: var(--color-surface);
    --cb-button-color: var(--color-text-muted);
    --cb-scrollbar-track: var(--color-surface);
    --cb-scrollbar-thumb: var(--color-border);
  }

  /* browser-window component */
  [data-theme~="memphis"] :is(main, article) browser-window {
    --browser-window-bg: var(--color-surface);
    --browser-window-header-bg: var(--color-surface-raised);
    --browser-window-content-bg: var(--color-surface);
    --browser-window-border-color: var(--m-black);
    --browser-window-text-color: var(--color-text);
    --browser-window-text-muted: var(--color-text-muted);
    --browser-window-url-bg: var(--color-surface-sunken);
  }

  /* Selection */
  [data-theme~="memphis"] ::selection {
    background: var(--m-teal);
    color: white;
  }


  /* ===== DARK MODE ===== */
  [data-theme~="memphis"][data-mode="dark"] {
    color-scheme: dark;

    --m-cream: oklch(15% 0.01 80);
    --m-white: oklch(18% 0.01 80);
    --m-black: oklch(90% 0.005 0);

    --color-background: oklch(10% 0.01 0);
    --color-surface: oklch(15% 0.01 0);
    --color-surface-alt: oklch(18% 0.012 0);
    --color-surface-raised: oklch(20% 0.01 0);
    --color-surface-sunken: oklch(8% 0.01 0);

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

    /* Colours stay vivid */
    --m-red:    oklch(64% 0.240 26);
    --m-blue:   oklch(55% 0.220 258);
    --m-teal:   oklch(78% 0.160 195);
    --m-pink:   oklch(70% 0.240 10);
    --m-mint:   oklch(85% 0.135 165);
    --m-yellow: oklch(88% 0.185 96);

    --color-primary: var(--m-red);
    --color-primary-hover: oklch(58% 0.260 26);
    --color-primary-subtle: oklch(20% 0.06 26);

    --color-accent: var(--m-teal);
    --color-accent-hover: oklch(72% 0.170 195);

    --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(70% 0.14 175);
    --color-warning: var(--m-yellow);
    --color-danger: var(--m-red);
    --color-info: var(--m-blue);

    /* Form controls: match dark palette */
    --input-bg: var(--m-white);
    --input-border: var(--m-black);

    /* Tint tokens: darken for dark backgrounds */
    --m-yellow-lt: oklch(30% 0.06 96);
    --m-blue-lt:   oklch(25% 0.05 258);
    --m-pink-lt:   oklch(28% 0.05 10);
    --m-teal-lt:   oklch(25% 0.04 195);
    --m-mint-lt:   oklch(25% 0.04 165);

    /* Offset shadows in lighter shade for dark mode */
    --shadow-xs: 2px 2px 0 oklch(50% 0.005 0);
    --shadow-sm: 2px 2px 0 oklch(50% 0.005 0);
    --shadow-md: 4px 4px 0 oklch(50% 0.005 0);
    --shadow-lg: 6px 6px 0 oklch(50% 0.005 0);
    --shadow-xl: 8px 8px 0 oklch(50% 0.005 0);
    --shadow-2xl: 10px 10px 0 oklch(50% 0.005 0);
  }
}