/**
 * .theme-studio — design-tool / creative workshop
 *
 * Warm off-white parchment, electric-violet primary, lime-shock accent.
 * The voice is "Linear", "Vercel", "v0", "Figma", "Framer" — the design
 * tool that makes you feel like the work is going to be good. Confident,
 * modern, playful but not toy.
 *
 * Beyond the color/type swap, this theme reshapes component surfaces so
 * the application feels designed-for-creators: chips with violet hover,
 * composer with a violet focus glow, workbench tabs with a pill pressed
 * state, user bubbles with a soft brand tint. The intent is that you can
 * apply theme-studio to a stock Graffiti app and instantly feel the
 * vendor-tool aesthetic without any markup changes.
 *
 * Tested on the D · Workshop variation of the AI chat template.
 *
 * Stress-tests: vivid violet primary, lime accent, dual-tinted hover
 * shadows (neutral, never tinted), warm-paper bg in light mode.
 */

:root.theme-studio,
.theme-studio {
  --font-sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  --font-ratio-min: 1.2;
  --font-ratio-max: 1.25;
  --lh: 1.55;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Palette — warm parchment + electric violet + lime accent */
  --bg-light: #fbfaf9;
  --bg-dark: #161318;
  --fg-light: #171314;
  --fg-dark: #f1eef0;
  --primary: oklch(0.55 0.22 305);  /* electric violet */
  --accent: oklch(0.82 0.18 130);   /* lime shock */
  --error: oklch(0.55 0.22 25);
  --warning: oklch(0.78 0.16 80);
  --success: oklch(0.65 0.16 155);

  /* Moderate, modern radii — between system flatness and consumer pillow */
  --br-xs: 4px;
  --br-s: 8px;
  --br-m: 12px;
  --br-l: 16px;
  --br-xl: 20px;
  --br-xxl: 28px;

  /* Neutral shadows — soft, layered. No violet tint; brand color stays
     in surfaces/accents, not in elevation. */
  --shadow-1:
    0 1px 2px rgb(23 19 20 / 0.04),
    0 1px 3px rgb(23 19 20 / 0.06);
  --shadow-2:
    0 2px 4px rgb(23 19 20 / 0.05),
    0 4px 8px rgb(23 19 20 / 0.07);
  --shadow-3:
    0 3px 6px rgb(23 19 20 / 0.06),
    0 6px 14px rgb(23 19 20 / 0.08);
  --shadow-4:
    0 6px 12px rgb(23 19 20 / 0.07),
    0 12px 24px rgb(23 19 20 / 0.10);
  --shadow-5:
    0 10px 20px rgb(23 19 20 / 0.09),
    0 20px 40px rgb(23 19 20 / 0.12);
  --shadow-6:
    0 16px 32px rgb(23 19 20 / 0.11),
    0 32px 64px rgb(23 19 20 / 0.14);

  --d-base: 0.22s;
  --d-slow: 0.32s;
}

@layer themes {
  .theme-studio :is(h1, h2, h3) {
    font-weight: 600;
    letter-spacing: -0.015em;
  }
  .theme-studio :is(h1, h2) {
    letter-spacing: -0.025em;
  }

  /* Active rail / sidebar items get a soft violet tint */
  .theme-studio .sidebar-nav > a[aria-current="page"],
  .theme-studio .sidebar-nav > a.active {
    color: var(--primary);
  }

  /* Primary buttons — flat brand, no gradient overlay */
  .theme-studio button.primary,
  .theme-studio .button.primary {
    background: var(--primary);
    color: #fff;
    border: 0;
    font-weight: 600;
    box-shadow: var(--shadow-1);
  }
  .theme-studio button.primary:hover,
  .theme-studio .button.primary:hover {
    background: color-mix(in oklab, var(--primary) 88%, black);
  }

  /* Chips — outlined hairline with brand-tinted hover, brand-filled selected */
  .theme-studio .chip {
    border-color: color-mix(in oklab, var(--fg) 14%, transparent);
    transition:
      background var(--d-fast),
      border-color var(--d-fast),
      color var(--d-fast);
  }
  .theme-studio .chip:hover {
    border-color: color-mix(in oklab, var(--primary) 40%, transparent);
    color: var(--primary);
    background: color-mix(in oklab, var(--primary) 6%, var(--bg));
  }
  .theme-studio .chip[aria-pressed="true"],
  .theme-studio .chip.selected {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
  }

  /* Composer — violet focus ring with a soft glow. The defining surface
     of a design-tool aesthetic. */
  .theme-studio .composer {
    border-color: color-mix(in oklab, var(--fg) 14%, transparent);
    box-shadow: var(--shadow-1);
    transition:
      border-color var(--d-fast),
      box-shadow var(--d-base);
  }
  .theme-studio .composer:focus-within {
    border-color: var(--primary);
    box-shadow:
      0 0 0 4px color-mix(in oklab, var(--primary) 18%, transparent),
      var(--shadow-2);
  }

  /* Self-bubble — soft brand tint by default. Authors can still override
     via --bubble-bg / --bubble-border per-message if they want. */
  .theme-studio .chat-row.self .bubble {
    --bubble-bg: color-mix(in oklab, var(--primary) 6%, var(--bg));
    --bubble-border: color-mix(in oklab, var(--primary) 22%, transparent);
  }

  /* Cards — slightly lifted to feel like canvas objects */
  .theme-studio .card {
    box-shadow: var(--shadow-2);
  }
  .theme-studio .card.featured {
    border-color: var(--primary);
    box-shadow:
      0 8px 28px color-mix(in oklab, var(--primary) 18%, transparent),
      var(--shadow-2);
  }

  /* Workbench tabs — brand-filled pressed state */
  .theme-studio .workbench-panel > header > .tabs > button[aria-pressed="true"] {
    background: var(--bg);
    color: var(--primary);
    box-shadow: var(--shadow-1);
  }

  /* Brand-mark in the icon rail — flat violet, no glow needed in light */
  .theme-studio .icon-rail > .brand {
    background: var(--primary);
    color: #fff;
  }

  /* Code / mono pickups */
  .theme-studio code,
  .theme-studio pre,
  .theme-studio .code,
  .theme-studio .mono {
    font-family: var(--font-mono);
  }
  .theme-studio code:not(pre code) {
    background: color-mix(in oklab, var(--primary) 8%, var(--bg));
    color: color-mix(in oklab, var(--primary) 80%, var(--fg));
    padding: 1px 6px;
    border-radius: var(--br-s);
  }

  .theme-studio ::selection {
    background: color-mix(in oklab, var(--primary) 30%, transparent);
    color: var(--fg);
  }

  /* Focus ring picks up the brand */
  .theme-studio :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
}