/*
 * Juo design tokens.
 *
 * CSS custom properties for the customer-facing design system. Every value
 * derives from the mode-driven --theme-* inputs (set via the data-* theme
 * attributes in theme-modes.css), falling back to the defaults declared here.
 */
:root, :host {
  /* Base units (mode-driven) */
  --space-base: var(--theme-spacing, 8px);
  --font-size-base: var(--theme-font-size, 16px);
  --radius-base: var(--theme-radius, 4px);

  /* Base Colors */
  --white: var(--theme-white, oklch(100% 0 0));
  --black: var(--theme-black, oklch(0% 0 0));

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

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

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

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

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

  /* Accent Colors */
  --accent-white: var(--theme-accent-white, oklch(100% 0 0));
  --accent-black: var(--theme-accent-black, oklch(0% 0 0));
  --accent-25: var(--theme-accent-25, oklch(98.5% 0 0));
  --accent-50: var(--theme-accent-50, oklch(97% 0 0));
  --accent-100: var(--theme-accent-100, oklch(95% 0 0));
  --accent-200: var(--theme-accent-200, oklch(90% 0 0));
  --accent-300: var(--theme-accent-300, oklch(82% 0 0));
  --accent-400: var(--theme-accent-400, oklch(70% 0 0));
  --accent-500: var(--theme-accent-500, oklch(62% 0 0));
  --accent-600: var(--theme-accent-600, oklch(55% 0 0));
  --accent-700: var(--theme-accent-700, oklch(45% 0 0));
  --accent-800: var(--theme-accent-800, oklch(32% 0 0));
  --accent-900: var(--theme-accent-900, oklch(18% 0 0));
  --accent-contrast: oklch(from var(--accent-700) round(1.21 - l) 0.02 h);

  /* Secondary Colors (falls back to accent when not explicitly set) */
  --secondary-white: var(--theme-secondary-white, var(--accent-white));
  --secondary-black: var(--theme-secondary-black, var(--accent-black));
  --secondary-25: var(--theme-secondary-25, var(--accent-25));
  --secondary-50: var(--theme-secondary-50, var(--accent-50));
  --secondary-100: var(--theme-secondary-100, var(--accent-100));
  --secondary-200: var(--theme-secondary-200, var(--accent-200));
  --secondary-300: var(--theme-secondary-300, var(--accent-300));
  --secondary-400: var(--theme-secondary-400, var(--accent-400));
  --secondary-500: var(--theme-secondary-500, var(--accent-500));
  --secondary-600: var(--theme-secondary-600, var(--accent-600));
  --secondary-700: var(--theme-secondary-700, var(--accent-700));
  --secondary-800: var(--theme-secondary-800, var(--accent-800));
  --secondary-900: var(--theme-secondary-900, var(--accent-900));

  /* Tint Colors */
  --tint-25: var(--theme-tint-25, oklch(98.5% 0 0));
  --tint-50: var(--theme-tint-50, oklch(97% 0 0));
  --tint-75: var(--theme-tint-75, oklch(96% 0 0));
  --tint-100: var(--theme-tint-100, oklch(95% 0 0));
  --tint-200: var(--theme-tint-200, oklch(90% 0 0));
  --tint-300: var(--theme-tint-300, oklch(82% 0 0));
  --tint-400: var(--theme-tint-400, oklch(70% 0 0));
  --tint-500: var(--theme-tint-500, oklch(62% 0 0));
  --tint-600: var(--theme-tint-600, oklch(55% 0 0));
  --tint-700: var(--theme-tint-700, oklch(45% 0 0));
  --tint-800: var(--theme-tint-800, oklch(32% 0 0));
  --tint-900: var(--theme-tint-900, oklch(18% 0 0));

  /* Neutral Colors — numeric aliases of the tint scale, so they inherit
     warm/cold/custom tint behavior driven by data-tint for free. */
  --color-neutral-0: var(--white);
  --color-neutral-25: var(--tint-25);
  --color-neutral-50: var(--tint-50);
  --color-neutral-100: var(--tint-100);
  --color-neutral-200: var(--tint-200);
  --color-neutral-300: var(--tint-300);
  --color-neutral-400: var(--tint-400);
  --color-neutral-500: var(--tint-500);
  --color-neutral-600: var(--tint-600);
  --color-neutral-700: var(--tint-700);
  --color-neutral-800: var(--tint-800);
  --color-neutral-900: var(--tint-900);
  --color-neutral-950: oklch(10% 0 0);
  --color-neutral-1000: var(--black);

  /* Component rounding (mode-driven) */
  --thumbnail-rounding: var(--theme-thumbnail-rounding, 50%);
  --buttons-rounding: var(--theme-buttons-rounding, 4px);
}

/* Font Size Scale */
:root, :host {
  --font-size-12: calc(var(--font-size-base) * 0.75);
  --font-size-14: calc(var(--font-size-base) * 0.875);
  --font-size-16: calc(var(--font-size-base) * 1);
  --font-size-20: calc(var(--font-size-base) * 1.25);
  --font-size-24: calc(var(--font-size-base) * 1.5);
  --font-size-32: calc(var(--font-size-base) * 2);
}

/* Radius Scale */
:root, :host {
  --radius-0: 0;
  --radius-1: calc(var(--radius-base) * 1);
  --radius-2: calc(var(--radius-base) * 2);
  --radius-3: calc(var(--radius-base) * 3);
  --radius-4: calc(var(--radius-base) * 3.5);
  --radius-5: calc(var(--radius-base) * 4.5);
  --radius-full: calc(var(--radius-base) * 100);
}

/* Space Scale — use via var(--space-16) or p-[var(--space-16)] */
:root, :host {
  --space-0: 0;
  --space-2: calc(var(--space-base) * 0.25);
  --space-4: calc(var(--space-base) * 0.5);
  --space-6: calc(var(--space-base) * 0.75);
  --space-8: calc(var(--space-base) * 1);
  --space-12: calc(var(--space-base) * 1.5);
  --space-16: calc(var(--space-base) * 2);
  --space-24: calc(var(--space-base) * 3);
  --space-32: calc(var(--space-base) * 4);
  --space-36: calc(var(--space-base) * 4.5);
  --space-48: calc(var(--space-base) * 6);
}

/* Component Tokens - Card Radius */
:root, :host {
  --card-radius-1: var(--radius-3);
  --card-radius-2: var(--radius-2);
  --card-radius-3: var(--radius-1);
}

/* Surface Tokens */
:root, :host {
  --surface-1: var(--theme-surface-1, transparent);
  --surface-1-border: var(--theme-surface-1-border, transparent);
  --surface-2: var(--theme-surface-2, var(--white));
  --surface-2-border: var(--theme-surface-2-border, var(--tint-300));
  --surface-3: var(--theme-surface-3, transparent);
  --surface-3-border: var(--theme-surface-3-border, transparent);
}

/* Card Divider Tokens */
:root, :host {
  --card-divider-margin: var(--theme-card-divider-margin, var(--space-8));
  --card-divider-height: var(--theme-card-divider-height, 0);
  --card-divider-background: var(--theme-card-divider-background, transparent);
}

/* Card Tokens - Map surface tokens to card-specific names */
:root, :host {
  --card-1-background: var(--surface-1);
  --card-1-border: var(--surface-1-border);
  --card-2-background: var(--surface-2);
  --card-2-border: var(--surface-2-border);
  --card-3-background: var(--surface-3);
  --card-3-border: var(--surface-3-border);
}

/* Card Level Detection - Default to level 1 */
:root, :host {
  --card-background: var(--card-1-background);
  --card-border: var(--card-1-border);
  --card-radius: var(--card-radius-1);
}