/*
 * Theme mode / preset layer for the Juo design system.
 *
 * The data-* attribute selectors below set the --theme-* inputs consumed by
 * design-tokens.css. Selectors are written in dual :host(...) + [data-*] form
 * so they apply in both light DOM and shadow DOM.
 */
@layer base {
  :host {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    --theme-white: oklch(100% 0 0);
    --theme-black: oklch(0% 0 0);

    --theme-success-25: oklch(98.5% 0.015 145);
    --theme-success-50: oklch(96.5% 0.025 145);
    --theme-success-100: oklch(94% 0.04 145);
    --theme-success-200: oklch(89% 0.06 145);
    --theme-success-300: oklch(80% 0.08 145);
    --theme-success-400: oklch(68% 0.10 145);
    --theme-success-500: oklch(60% 0.12 145);
    --theme-success-600: oklch(52% 0.13 145);
    --theme-success-700: oklch(42% 0.12 145);
    --theme-success-800: oklch(30% 0.10 145);
    --theme-success-900: oklch(18% 0.06 145);

    --theme-warning-25: oklch(98.5% 0.015 85);
    --theme-warning-50: oklch(96.5% 0.025 85);
    --theme-warning-100: oklch(94% 0.04 85);
    --theme-warning-200: oklch(89% 0.06 85);
    --theme-warning-300: oklch(80% 0.09 85);
    --theme-warning-400: oklch(68% 0.11 85);
    --theme-warning-500: oklch(60% 0.12 85);
    --theme-warning-600: oklch(52% 0.12 85);
    --theme-warning-700: oklch(42% 0.10 85);
    --theme-warning-800: oklch(30% 0.08 85);
    --theme-warning-900: oklch(18% 0.05 85);

    --theme-error-25: oklch(98.5% 0.015 25);
    --theme-error-50: oklch(96.5% 0.025 25);
    --theme-error-100: oklch(93% 0.04 25);
    --theme-error-200: oklch(88% 0.06 25);
    --theme-error-300: oklch(78% 0.10 25);
    --theme-error-400: oklch(66% 0.13 25);
    --theme-error-500: oklch(58% 0.15 25);
    --theme-error-600: oklch(52% 0.15 25);
    --theme-error-700: oklch(42% 0.13 25);
    --theme-error-800: oklch(30% 0.10 25);
    --theme-error-900: oklch(18% 0.06 25);

    --theme-info-25: oklch(98.5% 0.015 230);
    --theme-info-50: oklch(96.5% 0.02 230);
    --theme-info-100: oklch(94% 0.03 230);
    --theme-info-200: oklch(89% 0.05 230);
    --theme-info-300: oklch(80% 0.07 230);
    --theme-info-400: oklch(68% 0.09 230);
    --theme-info-500: oklch(58% 0.10 230);
    --theme-info-600: oklch(50% 0.10 230);
    --theme-info-700: oklch(42% 0.09 230);
    --theme-info-800: oklch(30% 0.07 230);
    --theme-info-900: oklch(18% 0.04 230);

    --theme-callout-25: oklch(98.5% 0 0);
    --theme-callout-50: oklch(97% 0 0);
    --theme-callout-100: oklch(95% 0 0);
    --theme-callout-200: oklch(90% 0 0);
    --theme-callout-300: oklch(82% 0 0);
    --theme-callout-400: oklch(70% 0 0);
    --theme-callout-500: oklch(62% 0 0);
    --theme-callout-600: oklch(55% 0 0);
    --theme-callout-700: oklch(45% 0 0);
    --theme-callout-800: oklch(32% 0 0);
    --theme-callout-900: oklch(18% 0 0);

    --theme-accent-white: oklch(100% 0 0);
    --theme-accent-black: oklch(0% 0 0);
    --theme-accent-25: oklch(98.5% 0 0);
    --theme-accent-50: oklch(97% 0 0);
    --theme-accent-100: oklch(95% 0 0);
    --theme-accent-200: oklch(90% 0 0);
    --theme-accent-300: oklch(82% 0 0);
    --theme-accent-400: oklch(70% 0 0);
    --theme-accent-500: oklch(62% 0 0);
    --theme-accent-600: oklch(55% 0 0);
    --theme-accent-700: oklch(45% 0 0);
    --theme-accent-800: oklch(32% 0 0);
    --theme-accent-900: oklch(18% 0 0);
  }

  /* Volume Variants */
  :host,
  :host([data-volume="comfort"]),
  [data-volume="comfort"] {
    --theme-spacing: 8px;
    --theme-padding: 8px;
    --theme-font-size: 16px;
  }

  :host([data-volume="compact"]),
  [data-volume="compact"] {
    --theme-spacing: 6px;
    --theme-padding: 6px;
    --theme-font-size: 14px;
  }

  :host([data-volume="spacious"]),
  [data-volume="spacious"] {
    --theme-spacing: 10px;
    --theme-padding: 8px;
    --theme-font-size: 18.66px;
  }

  /* Corners Variants */
  :host,
  :host([data-corners="round"]),
  [data-corners="round"] {
    --theme-radius: 4px;
  }

  :host([data-corners="sharp"]),
  [data-corners="sharp"] {
    --theme-radius: 0px;
  }

  :host([data-corners="soft"]),
  [data-corners="soft"] {
    --theme-radius: 2px;
  }

  :host([data-corners="pill"]),
  [data-corners="pill"] {
    --theme-radius: 6px;
  }

  /* Tint System - Neutral (Default) */
  :host,
  :host([data-tint="neutral"]),
  [data-tint="neutral"] {
    --theme-tint-25: oklch(98.5% 0 0);
    --theme-tint-50: oklch(97% 0 0);
    --theme-tint-100: oklch(95% 0 0);
    --theme-tint-200: oklch(90% 0 0);
    --theme-tint-300: oklch(82% 0 0);
    --theme-tint-400: oklch(70% 0 0);
    --theme-tint-500: oklch(62% 0 0);
    --theme-tint-600: oklch(55% 0 0);
    --theme-tint-700: oklch(45% 0 0);
    --theme-tint-800: oklch(32% 0 0);
    --theme-tint-900: oklch(18% 0 0);
  }

  /* Tint System - Warm */
  :host([data-tint="warm"]),
  [data-tint="warm"] {
    --theme-tint-25: oklch(98% 0.005 40);
    --theme-tint-50: oklch(96% 0.01 40);
    --theme-tint-100: oklch(94% 0.015 40);
    --theme-tint-200: oklch(88% 0.02 40);
    --theme-tint-300: oklch(80% 0.025 40);
    --theme-tint-400: oklch(65% 0.03 40);
    --theme-tint-500: oklch(50% 0.035 40);
    --theme-tint-600: oklch(40% 0.04 40);
    --theme-tint-700: oklch(30% 0.045 40);
    --theme-tint-800: oklch(20% 0.05 40);
    --theme-tint-900: oklch(10% 0.055 40);
  }

  /* Tint System - Cold */
  :host([data-tint="cold"]),
  [data-tint="cold"] {
    --theme-tint-25: oklch(98% 0.005 220);
    --theme-tint-50: oklch(96% 0.01 220);
    --theme-tint-100: oklch(94% 0.015 220);
    --theme-tint-200: oklch(88% 0.02 220);
    --theme-tint-300: oklch(80% 0.025 220);
    --theme-tint-400: oklch(65% 0.03 220);
    --theme-tint-500: oklch(50% 0.035 220);
    --theme-tint-600: oklch(40% 0.04 220);
    --theme-tint-700: oklch(30% 0.045 220);
    --theme-tint-800: oklch(20% 0.05 220);
    --theme-tint-900: oklch(10% 0.055 220);
  }

  /* Tint System - Custom (derived from --tint-l, --tint-hue and --tint-chroma)
    --tint-l is the picked color's OKLCH lightness (= grade 700).
    Lighter grades interpolate toward 99%, darker grades toward 5%. */
  :host([data-tint="custom"]),
  [data-tint="custom"] {
    --theme-tint-25: oklch(calc(var(--tint-l, 30%) + 0.986 * (99% - var(--tint-l, 30%))) calc(0.005 * var(--tint-chroma, 1)) var(--tint-hue, 0));
    --theme-tint-50: oklch(calc(var(--tint-l, 30%) + 0.957 * (99% - var(--tint-l, 30%))) calc(0.01 * var(--tint-chroma, 1)) var(--tint-hue, 0));
    --theme-tint-100: oklch(calc(var(--tint-l, 30%) + 0.928 * (99% - var(--tint-l, 30%))) calc(0.015 * var(--tint-chroma, 1)) var(--tint-hue, 0));
    --theme-tint-200: oklch(calc(var(--tint-l, 30%) + 0.841 * (99% - var(--tint-l, 30%))) calc(0.02 * var(--tint-chroma, 1)) var(--tint-hue, 0));
    --theme-tint-300: oklch(calc(var(--tint-l, 30%) + 0.725 * (99% - var(--tint-l, 30%))) calc(0.025 * var(--tint-chroma, 1)) var(--tint-hue, 0));
    --theme-tint-400: oklch(calc(var(--tint-l, 30%) + 0.507 * (99% - var(--tint-l, 30%))) calc(0.03 * var(--tint-chroma, 1)) var(--tint-hue, 0));
    --theme-tint-500: oklch(calc(var(--tint-l, 30%) + 0.290 * (99% - var(--tint-l, 30%))) calc(0.035 * var(--tint-chroma, 1)) var(--tint-hue, 0));
    --theme-tint-600: oklch(calc(var(--tint-l, 30%) + 0.145 * (99% - var(--tint-l, 30%))) calc(0.04 * var(--tint-chroma, 1)) var(--tint-hue, 0));
    --theme-tint-700: oklch(var(--tint-l, 30%) calc(0.045 * var(--tint-chroma, 1)) var(--tint-hue, 0));
    --theme-tint-800: oklch(calc(var(--tint-l, 30%) - 0.4 * (var(--tint-l, 30%) - 5%)) calc(0.05 * var(--tint-chroma, 1)) var(--tint-hue, 0));
    --theme-tint-900: oklch(calc(var(--tint-l, 30%) - 0.8 * (var(--tint-l, 30%) - 5%)) calc(0.055 * var(--tint-chroma, 1)) var(--tint-hue, 0));
  }

  /* Callout Colors - Custom (derived from --callout-l, --callout-hue and --callout-chroma) */
  :host([data-callout="custom"]),
  [data-callout="custom"] {
    --theme-callout-25: oklch(calc(var(--callout-l, 30%) + 0.986 * (99% - var(--callout-l, 30%))) calc(0.005 * var(--callout-chroma, 1)) var(--callout-hue, 0));
    --theme-callout-50: oklch(calc(var(--callout-l, 30%) + 0.957 * (99% - var(--callout-l, 30%))) calc(0.01 * var(--callout-chroma, 1)) var(--callout-hue, 0));
    --theme-callout-100: oklch(calc(var(--callout-l, 30%) + 0.928 * (99% - var(--callout-l, 30%))) calc(0.015 * var(--callout-chroma, 1)) var(--callout-hue, 0));
    --theme-callout-200: oklch(calc(var(--callout-l, 30%) + 0.841 * (99% - var(--callout-l, 30%))) calc(0.02 * var(--callout-chroma, 1)) var(--callout-hue, 0));
    --theme-callout-300: oklch(calc(var(--callout-l, 30%) + 0.725 * (99% - var(--callout-l, 30%))) calc(0.025 * var(--callout-chroma, 1)) var(--callout-hue, 0));
    --theme-callout-400: oklch(calc(var(--callout-l, 30%) + 0.507 * (99% - var(--callout-l, 30%))) calc(0.03 * var(--callout-chroma, 1)) var(--callout-hue, 0));
    --theme-callout-500: oklch(calc(var(--callout-l, 30%) + 0.290 * (99% - var(--callout-l, 30%))) calc(0.035 * var(--callout-chroma, 1)) var(--callout-hue, 0));
    --theme-callout-600: oklch(calc(var(--callout-l, 30%) + 0.145 * (99% - var(--callout-l, 30%))) calc(0.04 * var(--callout-chroma, 1)) var(--callout-hue, 0));
    --theme-callout-700: oklch(var(--callout-l, 30%) calc(0.045 * var(--callout-chroma, 1)) var(--callout-hue, 0));
    --theme-callout-800: oklch(calc(var(--callout-l, 30%) - 0.4 * (var(--callout-l, 30%) - 5%)) calc(0.05 * var(--callout-chroma, 1)) var(--callout-hue, 0));
    --theme-callout-900: oklch(calc(var(--callout-l, 30%) - 0.8 * (var(--callout-l, 30%) - 5%)) calc(0.055 * var(--callout-chroma, 1)) var(--callout-hue, 0));
  }

  /* Accent Colors - Custom (derived from --accent-l, --accent-hue and --accent-chroma) */
  :host([data-accent="custom"]),
  [data-accent="custom"] {
    --theme-accent-25: oklch(calc(var(--accent-l, 30%) + 0.986 * (99% - var(--accent-l, 30%))) calc(0.005 * var(--accent-chroma, 1)) var(--accent-hue, 0));
    --theme-accent-50: oklch(calc(var(--accent-l, 30%) + 0.957 * (99% - var(--accent-l, 30%))) calc(0.01 * var(--accent-chroma, 1)) var(--accent-hue, 0));
    --theme-accent-100: oklch(calc(var(--accent-l, 30%) + 0.928 * (99% - var(--accent-l, 30%))) calc(0.015 * var(--accent-chroma, 1)) var(--accent-hue, 0));
    --theme-accent-200: oklch(calc(var(--accent-l, 30%) + 0.841 * (99% - var(--accent-l, 30%))) calc(0.02 * var(--accent-chroma, 1)) var(--accent-hue, 0));
    --theme-accent-300: oklch(calc(var(--accent-l, 30%) + 0.725 * (99% - var(--accent-l, 30%))) calc(0.025 * var(--accent-chroma, 1)) var(--accent-hue, 0));
    --theme-accent-400: oklch(calc(var(--accent-l, 30%) + 0.507 * (99% - var(--accent-l, 30%))) calc(0.03 * var(--accent-chroma, 1)) var(--accent-hue, 0));
    --theme-accent-500: oklch(calc(var(--accent-l, 30%) + 0.290 * (99% - var(--accent-l, 30%))) calc(0.035 * var(--accent-chroma, 1)) var(--accent-hue, 0));
    --theme-accent-600: oklch(calc(var(--accent-l, 30%) + 0.145 * (99% - var(--accent-l, 30%))) calc(0.04 * var(--accent-chroma, 1)) var(--accent-hue, 0));
    --theme-accent-700: oklch(var(--accent-l, 30%) calc(0.045 * var(--accent-chroma, 1)) var(--accent-hue, 0));
    --theme-accent-800: oklch(calc(var(--accent-l, 30%) - 0.4 * (var(--accent-l, 30%) - 5%)) calc(0.05 * var(--accent-chroma, 1)) var(--accent-hue, 0));
    --theme-accent-900: oklch(calc(var(--accent-l, 30%) - 0.8 * (var(--accent-l, 30%) - 5%)) calc(0.055 * var(--accent-chroma, 1)) var(--accent-hue, 0));
  }

  /* Secondary Colors - Custom (derived from --secondary-l, --secondary-hue and --secondary-chroma) */
  :host([data-secondary="custom"]),
  [data-secondary="custom"] {
    --theme-secondary-25: oklch(calc(var(--secondary-l, 30%) + 0.986 * (99% - var(--secondary-l, 30%))) calc(0.005 * var(--secondary-chroma, 1)) var(--secondary-hue, 0));
    --theme-secondary-50: oklch(calc(var(--secondary-l, 30%) + 0.957 * (99% - var(--secondary-l, 30%))) calc(0.01 * var(--secondary-chroma, 1)) var(--secondary-hue, 0));
    --theme-secondary-100: oklch(calc(var(--secondary-l, 30%) + 0.928 * (99% - var(--secondary-l, 30%))) calc(0.015 * var(--secondary-chroma, 1)) var(--secondary-hue, 0));
    --theme-secondary-200: oklch(calc(var(--secondary-l, 30%) + 0.841 * (99% - var(--secondary-l, 30%))) calc(0.02 * var(--secondary-chroma, 1)) var(--secondary-hue, 0));
    --theme-secondary-300: oklch(calc(var(--secondary-l, 30%) + 0.725 * (99% - var(--secondary-l, 30%))) calc(0.025 * var(--secondary-chroma, 1)) var(--secondary-hue, 0));
    --theme-secondary-400: oklch(calc(var(--secondary-l, 30%) + 0.507 * (99% - var(--secondary-l, 30%))) calc(0.03 * var(--secondary-chroma, 1)) var(--secondary-hue, 0));
    --theme-secondary-500: oklch(calc(var(--secondary-l, 30%) + 0.290 * (99% - var(--secondary-l, 30%))) calc(0.035 * var(--secondary-chroma, 1)) var(--secondary-hue, 0));
    --theme-secondary-600: oklch(calc(var(--secondary-l, 30%) + 0.145 * (99% - var(--secondary-l, 30%))) calc(0.04 * var(--secondary-chroma, 1)) var(--secondary-hue, 0));
    --theme-secondary-700: oklch(var(--secondary-l, 30%) calc(0.045 * var(--secondary-chroma, 1)) var(--secondary-hue, 0));
    --theme-secondary-800: oklch(calc(var(--secondary-l, 30%) - 0.4 * (var(--secondary-l, 30%) - 5%)) calc(0.05 * var(--secondary-chroma, 1)) var(--secondary-hue, 0));
    --theme-secondary-900: oklch(calc(var(--secondary-l, 30%) - 0.8 * (var(--secondary-l, 30%) - 5%)) calc(0.055 * var(--secondary-chroma, 1)) var(--secondary-hue, 0));
  }

  /* Success Colors - Custom (derived from --success-l, --success-hue and --success-chroma) */
  :host([data-success="custom"]),
  [data-success="custom"] {
    --theme-success-25: oklch(calc(var(--success-l, 30%) + 0.986 * (99% - var(--success-l, 30%))) calc(0.005 * var(--success-chroma, 1)) var(--success-hue, 0));
    --theme-success-50: oklch(calc(var(--success-l, 30%) + 0.957 * (99% - var(--success-l, 30%))) calc(0.01 * var(--success-chroma, 1)) var(--success-hue, 0));
    --theme-success-100: oklch(calc(var(--success-l, 30%) + 0.928 * (99% - var(--success-l, 30%))) calc(0.015 * var(--success-chroma, 1)) var(--success-hue, 0));
    --theme-success-200: oklch(calc(var(--success-l, 30%) + 0.841 * (99% - var(--success-l, 30%))) calc(0.02 * var(--success-chroma, 1)) var(--success-hue, 0));
    --theme-success-300: oklch(calc(var(--success-l, 30%) + 0.725 * (99% - var(--success-l, 30%))) calc(0.025 * var(--success-chroma, 1)) var(--success-hue, 0));
    --theme-success-400: oklch(calc(var(--success-l, 30%) + 0.507 * (99% - var(--success-l, 30%))) calc(0.03 * var(--success-chroma, 1)) var(--success-hue, 0));
    --theme-success-500: oklch(calc(var(--success-l, 30%) + 0.290 * (99% - var(--success-l, 30%))) calc(0.035 * var(--success-chroma, 1)) var(--success-hue, 0));
    --theme-success-600: oklch(calc(var(--success-l, 30%) + 0.145 * (99% - var(--success-l, 30%))) calc(0.04 * var(--success-chroma, 1)) var(--success-hue, 0));
    --theme-success-700: oklch(var(--success-l, 30%) calc(0.045 * var(--success-chroma, 1)) var(--success-hue, 0));
    --theme-success-800: oklch(calc(var(--success-l, 30%) - 0.4 * (var(--success-l, 30%) - 5%)) calc(0.05 * var(--success-chroma, 1)) var(--success-hue, 0));
    --theme-success-900: oklch(calc(var(--success-l, 30%) - 0.8 * (var(--success-l, 30%) - 5%)) calc(0.055 * var(--success-chroma, 1)) var(--success-hue, 0));
  }

  /* Warning Colors - Custom (derived from --warning-l, --warning-hue and --warning-chroma) */
  :host([data-warning="custom"]),
  [data-warning="custom"] {
    --theme-warning-25: oklch(calc(var(--warning-l, 30%) + 0.986 * (99% - var(--warning-l, 30%))) calc(0.005 * var(--warning-chroma, 1)) var(--warning-hue, 0));
    --theme-warning-50: oklch(calc(var(--warning-l, 30%) + 0.957 * (99% - var(--warning-l, 30%))) calc(0.01 * var(--warning-chroma, 1)) var(--warning-hue, 0));
    --theme-warning-100: oklch(calc(var(--warning-l, 30%) + 0.928 * (99% - var(--warning-l, 30%))) calc(0.015 * var(--warning-chroma, 1)) var(--warning-hue, 0));
    --theme-warning-200: oklch(calc(var(--warning-l, 30%) + 0.841 * (99% - var(--warning-l, 30%))) calc(0.02 * var(--warning-chroma, 1)) var(--warning-hue, 0));
    --theme-warning-300: oklch(calc(var(--warning-l, 30%) + 0.725 * (99% - var(--warning-l, 30%))) calc(0.025 * var(--warning-chroma, 1)) var(--warning-hue, 0));
    --theme-warning-400: oklch(calc(var(--warning-l, 30%) + 0.507 * (99% - var(--warning-l, 30%))) calc(0.03 * var(--warning-chroma, 1)) var(--warning-hue, 0));
    --theme-warning-500: oklch(calc(var(--warning-l, 30%) + 0.290 * (99% - var(--warning-l, 30%))) calc(0.035 * var(--warning-chroma, 1)) var(--warning-hue, 0));
    --theme-warning-600: oklch(calc(var(--warning-l, 30%) + 0.145 * (99% - var(--warning-l, 30%))) calc(0.04 * var(--warning-chroma, 1)) var(--warning-hue, 0));
    --theme-warning-700: oklch(var(--warning-l, 30%) calc(0.045 * var(--warning-chroma, 1)) var(--warning-hue, 0));
    --theme-warning-800: oklch(calc(var(--warning-l, 30%) - 0.4 * (var(--warning-l, 30%) - 5%)) calc(0.05 * var(--warning-chroma, 1)) var(--warning-hue, 0));
    --theme-warning-900: oklch(calc(var(--warning-l, 30%) - 0.8 * (var(--warning-l, 30%) - 5%)) calc(0.055 * var(--warning-chroma, 1)) var(--warning-hue, 0));
  }

  /* Error Colors - Custom (derived from --error-l, --error-hue and --error-chroma) */
  :host([data-error="custom"]),
  [data-error="custom"] {
    --theme-error-25: oklch(calc(var(--error-l, 30%) + 0.986 * (99% - var(--error-l, 30%))) calc(0.005 * var(--error-chroma, 1)) var(--error-hue, 0));
    --theme-error-50: oklch(calc(var(--error-l, 30%) + 0.957 * (99% - var(--error-l, 30%))) calc(0.01 * var(--error-chroma, 1)) var(--error-hue, 0));
    --theme-error-100: oklch(calc(var(--error-l, 30%) + 0.928 * (99% - var(--error-l, 30%))) calc(0.015 * var(--error-chroma, 1)) var(--error-hue, 0));
    --theme-error-200: oklch(calc(var(--error-l, 30%) + 0.841 * (99% - var(--error-l, 30%))) calc(0.02 * var(--error-chroma, 1)) var(--error-hue, 0));
    --theme-error-300: oklch(calc(var(--error-l, 30%) + 0.725 * (99% - var(--error-l, 30%))) calc(0.025 * var(--error-chroma, 1)) var(--error-hue, 0));
    --theme-error-400: oklch(calc(var(--error-l, 30%) + 0.507 * (99% - var(--error-l, 30%))) calc(0.03 * var(--error-chroma, 1)) var(--error-hue, 0));
    --theme-error-500: oklch(calc(var(--error-l, 30%) + 0.290 * (99% - var(--error-l, 30%))) calc(0.035 * var(--error-chroma, 1)) var(--error-hue, 0));
    --theme-error-600: oklch(calc(var(--error-l, 30%) + 0.145 * (99% - var(--error-l, 30%))) calc(0.04 * var(--error-chroma, 1)) var(--error-hue, 0));
    --theme-error-700: oklch(var(--error-l, 30%) calc(0.045 * var(--error-chroma, 1)) var(--error-hue, 0));
    --theme-error-800: oklch(calc(var(--error-l, 30%) - 0.4 * (var(--error-l, 30%) - 5%)) calc(0.05 * var(--error-chroma, 1)) var(--error-hue, 0));
    --theme-error-900: oklch(calc(var(--error-l, 30%) - 0.8 * (var(--error-l, 30%) - 5%)) calc(0.055 * var(--error-chroma, 1)) var(--error-hue, 0));
  }

  /* Info Colors - Custom (derived from --info-l, --info-hue and --info-chroma) */
  :host([data-info="custom"]),
  [data-info="custom"] {
    --theme-info-25: oklch(calc(var(--info-l, 30%) + 0.986 * (99% - var(--info-l, 30%))) calc(0.005 * var(--info-chroma, 1)) var(--info-hue, 0));
    --theme-info-50: oklch(calc(var(--info-l, 30%) + 0.957 * (99% - var(--info-l, 30%))) calc(0.01 * var(--info-chroma, 1)) var(--info-hue, 0));
    --theme-info-100: oklch(calc(var(--info-l, 30%) + 0.928 * (99% - var(--info-l, 30%))) calc(0.015 * var(--info-chroma, 1)) var(--info-hue, 0));
    --theme-info-200: oklch(calc(var(--info-l, 30%) + 0.841 * (99% - var(--info-l, 30%))) calc(0.02 * var(--info-chroma, 1)) var(--info-hue, 0));
    --theme-info-300: oklch(calc(var(--info-l, 30%) + 0.725 * (99% - var(--info-l, 30%))) calc(0.025 * var(--info-chroma, 1)) var(--info-hue, 0));
    --theme-info-400: oklch(calc(var(--info-l, 30%) + 0.507 * (99% - var(--info-l, 30%))) calc(0.03 * var(--info-chroma, 1)) var(--info-hue, 0));
    --theme-info-500: oklch(calc(var(--info-l, 30%) + 0.290 * (99% - var(--info-l, 30%))) calc(0.035 * var(--info-chroma, 1)) var(--info-hue, 0));
    --theme-info-600: oklch(calc(var(--info-l, 30%) + 0.145 * (99% - var(--info-l, 30%))) calc(0.04 * var(--info-chroma, 1)) var(--info-hue, 0));
    --theme-info-700: oklch(var(--info-l, 30%) calc(0.045 * var(--info-chroma, 1)) var(--info-hue, 0));
    --theme-info-800: oklch(calc(var(--info-l, 30%) - 0.4 * (var(--info-l, 30%) - 5%)) calc(0.05 * var(--info-chroma, 1)) var(--info-hue, 0));
    --theme-info-900: oklch(calc(var(--info-l, 30%) - 0.8 * (var(--info-l, 30%) - 5%)) calc(0.055 * var(--info-chroma, 1)) var(--info-hue, 0));
  }

  /* Component Tokens - Thumbnail Corners */
  :host,
  :host([data-thumbnail-corners="circle"]),
  [data-thumbnail-corners="circle"] {
    --theme-thumbnail-rounding: 50%;
  }

  :host([data-thumbnail-corners="sharp"]),
  [data-thumbnail-corners="sharp"] {
    --theme-thumbnail-rounding: 0px;
  }

  :host([data-thumbnail-corners="round"]),
  [data-thumbnail-corners="round"] {
    --theme-thumbnail-rounding: clamp(7px, var(--radius-4), var(--radius-4));
  }

  /* Component Tokens - Button Corners */
  :host,
  :host([data-button-corners="round"]),
  [data-button-corners="round"] {
    --theme-buttons-rounding: clamp(4px, var(--radius-2), var(--radius-2));
  }

  :host([data-button-corners="sharp"]),
  [data-button-corners="sharp"] {
    --theme-buttons-rounding: 0px;
  }

  :host([data-button-corners="circle"]),
  [data-button-corners="circle"] {
    --theme-buttons-rounding: 9999px;
  }

  /* Style Presets - Ghost (Default) */
  :host,
  :host([data-style="ghost"]),
  [data-style="ghost"] {
    --theme-surface-1: transparent;
    --theme-surface-1-border: transparent;
    --theme-surface-2: var(--white);
    --theme-surface-2-border: var(--tint-200);
    --theme-surface-3: transparent;
    --theme-surface-3-border: transparent;
    --theme-card-divider-margin: var(--space-8);
    --theme-card-divider-height: 0;
    --theme-card-divider-background: transparent;
  }

  /* Style Presets - Bare */
  :host([data-style="bare"]),
  [data-style="bare"] {
    --theme-surface-1: transparent;
    --theme-surface-1-border: transparent;
    --theme-surface-2: transparent;
    --theme-surface-2-border: transparent;
    --theme-surface-3: transparent;
    --theme-surface-3-border: transparent;
    --theme-card-divider-margin: var(--space-16);
    --theme-card-divider-height: 1px;
    --theme-card-divider-background: var(--tint-200);
  }

  /* Style Presets - Tinted */
  :host([data-style="tinted"]),
  [data-style="tinted"] {
    --theme-surface-1: transparent;
    --theme-surface-1-border: transparent;
    --theme-surface-2: var(--tint-25);
    --theme-surface-2-border: transparent;
    --theme-surface-3: transparent;
    --theme-surface-3-border: transparent;
    --theme-card-divider-margin: var(--space-8);
    --theme-card-divider-height: 0;
    --theme-card-divider-background: transparent;
  }

  /* Style Presets - Solid */
  :host([data-style="solid"]),
  [data-style="solid"] {
    --theme-surface-1: var(--tint-25);
    --theme-surface-1-border: transparent;
    --theme-surface-2: transparent;
    --theme-surface-2-border: transparent;
    --theme-surface-3: transparent;
    --theme-surface-3-border: transparent;
    --theme-card-divider-margin: var(--space-8);
    --theme-card-divider-height: 0;
    --theme-card-divider-background: transparent;
  }

  /* Style Presets - Layered */
  :host([data-style="layered"]),
  [data-style="layered"] {
    --theme-surface-1: var(--tint-25);
    --theme-surface-1-border: var(--tint-200);
    --theme-surface-2: var(--white);
    --theme-surface-2-border: var(--tint-200);
    --theme-surface-3: var(--tint-50);
    --theme-surface-3-border: var(--tint-200);
    --theme-card-divider-margin: var(--space-8);
    --theme-card-divider-height: 0;
    --theme-card-divider-background: transparent;
  }

  /* Workardound for in-vue-component styles */
  .card {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
  }

  .card {
    --card-background: var(--card-1-background);
    --card-border: var(--card-1-border);
    --card-radius: var(--card-radius-1);
  }

  /* Level 2 - When nested inside a card */
  .card .card {
    border: 0.5px solid var(--card-border);
    --card-background: var(--card-2-background);
    --card-border: var(--card-2-border);
    --card-radius: var(--card-radius-2);
  }

  /* Level 3 - When nested inside a level 2 card */
  .card .card .card {
    --card-background: var(--card-3-background);
    --card-border: var(--card-3-border);
    --card-radius: var(--card-radius-3);
  }

  .card-divider {
    padding: var(--card-divider-margin) 0;
  }

  .card-divider-line {
    height: var(--card-divider-height);
    background-color: var(--card-divider-background);
  }

  /*
   * Page-level divider between sibling blocks of the subscription content
   * area. Replaces the per-page hardcoded <UiCardDivider/> separators —
   * blocks set data-empty automatically (see createVueRenderer in
   * @juo/blocks) and the general-sibling selector skips them.
   *
   * Non-bare presets (ghost, layered, …): one spacing band (margin-top
   * only), invisible line (--card-divider-height: 0).
   * Bare preset: margin-top + padding-top + 1px line — matches UiCardDivider.
   *
   * In editor mode the children of juo-extension-root are
   * <juo-editor-block-wrapper> elements that slot the actual block; the
   * `:has(> [data-empty])` clause treats those wrappers as empty when
   * their slotted child reports empty, matching view mode behaviour
   * without needing a runtime observer to mirror the attribute.
   */
  juo-extension-root[name="content"]> :not([data-empty]):not(:has(> [data-empty]))~ :not([data-empty]):not(:has(> [data-empty])) {
    border-top: var(--card-divider-height) solid var(--card-divider-background);
    margin-top: var(--card-divider-margin);
    padding-top: 0;
  }

  :host([data-style="bare"]) juo-extension-root[name="content"]> :not([data-empty]):not(:has(> [data-empty]))~ :not([data-empty]):not(:has(> [data-empty])),
  [data-style="bare"] juo-extension-root[name="content"]> :not([data-empty]):not(:has(> [data-empty]))~ :not([data-empty]):not(:has(> [data-empty])) {
    padding-top: var(--card-divider-margin);
  }
}