/**
 * Kawaii Bundle — Theme Tokens
 * Vanilla Breeze · Kawaii / Cute
 *
 * Pastel pink/mint/lavender palette, pill shapes, bouncy motion.
 * Cherry Bomb One for display, Coiny for accents, Nunito for body.
 */

/* ===== FONTS ===== */
@font-face {
  font-family: "Cherry Bomb One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/CherryBombOne-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Coiny";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/Coiny-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/nunito/v32/XRXV3I6Li01BKofINeaBTMnFcQ.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~="kawaii"] {
    color-scheme: light;
    --theme-border-style: kawaii;

    /* Colors */
    --color-surface: oklch(98% 0.02 350);
    --color-surface-alt: oklch(95% 0.04 350);
    --color-surface-raised: oklch(100% 0 0);
    --color-surface-sunken: oklch(92% 0.05 350);
    --color-background: oklch(97% 0.03 350);

    --color-text: oklch(25% 0.08 330);
    --color-text-muted: oklch(40% 0.06 330);
    --color-text-subtle: oklch(50% 0.04 330);

    --color-primary: oklch(55% 0.18 350);
    --color-primary-hover: oklch(50% 0.2 350);
    --color-primary-subtle: oklch(95% 0.05 350);

    --color-accent: oklch(45% 0.12 180);
    --color-accent-hover: oklch(40% 0.14 180);
    --color-accent-subtle: oklch(95% 0.04 180);

    --color-lavender: oklch(55% 0.12 290);
    --color-peach: oklch(55% 0.12 60);
    --color-sky: oklch(50% 0.12 220);

    --color-border: oklch(90% 0.05 350);
    --color-border-muted: oklch(94% 0.03 350);
    --color-border-strong: oklch(75% 0.15 350);

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

    /* Typography */
    --font-sans: "Nunito", "Quicksand", "Varela Round", system-ui, sans-serif;
    --font-display: "Cherry Bomb One", "Nunito", cursive;
    --font-accent: "Coiny", "Nunito", cursive;
    --font-mono: "Fira Code", monospace;

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

    --weight-normal: 400;
    --weight-bold: 700;
    --line-height-normal: 1.6;
    --line-height-tight: 1.3;

    /* Shape — pill-like */
    --radius-xs: 0.5rem;
    --radius-s: 0.75rem;
    --radius-m: 1rem;
    --radius-l: 1.5rem;
    --radius-xl: 2rem;
    --radius-2xl: 3rem;
    --radius-full: 9999px;

    /* Shadows — soft, colorful */
    --shadow-xs: 0 2px 4px oklch(75% 0.15 350 / 0.15);
    --shadow-sm: 0 4px 8px oklch(75% 0.15 350 / 0.2);
    --shadow-md: 0 6px 16px oklch(75% 0.15 350 / 0.25);
    --shadow-lg: 0 10px 24px oklch(75% 0.15 350 / 0.3);
    --shadow-xl: 0 16px 32px oklch(75% 0.15 350 / 0.35);
    --shadow-2xl: 0 24px 48px oklch(75% 0.15 350 / 0.4);

    /* Motion — bouncy */
    --duration-instant: 50ms;
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;

    --ease-default: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Shape overrides */
    --shape-depth: 8%;
    --shape-bevel: 16px;
  }

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

    --color-surface: oklch(18% 0.04 290);
    --color-surface-alt: oklch(22% 0.05 290);
    --color-surface-raised: oklch(25% 0.04 290);
    --color-background: oklch(12% 0.04 290);

    --color-text: oklch(92% 0.03 350);
    --color-text-muted: oklch(75% 0.04 350);

    --color-primary: oklch(75% 0.18 350);
    --color-accent: oklch(75% 0.15 180);
    --color-lavender: oklch(75% 0.12 290);
    --color-peach: oklch(75% 0.12 60);
    --color-sky: oklch(70% 0.12 220);

    --color-border: oklch(35% 0.05 290);
  }
}