/* =================================================================
   Kimochi.fun — Colors & Type
   "The Ethereal Playroom" — Soft as a cloud, precise as a boutique.
   ----------------------------------------------------------------
   Brand palette is anchored on the Kimochi logo:
     - Soft mint outline (primary green)
     - Pale yellow-green → mint gradient background
     - Soft pink blush/tongue accent (secondary)
     - Pure white character body
   ================================================================= */

/* --- Webfonts (Google Fonts, identical to the production stack) --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ===========================================================
     PRIMITIVE COLOR TOKENS
     Raw values. Don't reference these directly in components;
     use the semantic tokens below.
     =========================================================== */

  /* Mint — derived from the Kimochi logo outline */
  --mint-50:  #f3f8f6;
  --mint-100: #e0efe8;
  --mint-200: #c8f0e0;   /* primary-container — pillow mint */
  --mint-300: #9fdcc1;
  --mint-400: #58b894;
  --mint-500: #2da76a;   /* fresh mint accent */
  --mint-600: #04684c;   /* PRIMARY — brand mint, logo outline */
  --mint-700: #034c38;
  --mint-800: #023224;
  --mint-900: #011a13;

  /* Blush — derived from the logo's tongue/cheek blush */
  --blush-50:  #fdf6f7;
  --blush-100: #fbeaee;
  --blush-200: #f8e0e5;   /* secondary-container */
  --blush-300: #f2d0d8;
  --blush-400: #e2a6b3;
  --blush-500: #c47587;
  --blush-600: #854a57;   /* SECONDARY — soft pink, soulful */
  --blush-700: #5e333d;
  --blush-800: #3d1f25;

  /* Buttercream — the logo's yellow-green halo */
  --cream-50:  #fafbf2;
  --cream-100: #f5f7e5;
  --cream-200: #ecf0d0;
  --cream-300: #dde2a8;

  /* Neutrals (mint-tinted, never pure gray) */
  --neutral-0:   #ffffff;
  --neutral-50:  #f3f8f6;   /* base surface */
  --neutral-100: #ecf2f0;   /* surface-container-low */
  --neutral-200: #dde6e3;
  --neutral-300: #c3cdc9;
  --neutral-400: #8a8f8d;   /* on-surface-dim */
  --neutral-500: #575d5b;   /* on-surface-variant */
  --neutral-600: #383d3c;
  --neutral-700: #2a302f;
  --neutral-800: #1a1f1e;
  --neutral-900: #0d1110;
  --neutral-950: #060807;

  /* Functional */
  --success: #2da76a;
  --warning: #e6a817;
  --danger:  #c0392b;
  --gold:    #f0c040;   /* token / coin gradient */
  --gold-deep: #e6a817;

  /* ===========================================================
     SEMANTIC COLOR TOKENS — LIGHT THEME (default)
     Reference these in components.
     =========================================================== */

  /* Surfaces — tonal layering (no borders!) */
  --surface:                  var(--neutral-0);     /* highest "lift" — cards, sheets */
  --surface-low:              var(--neutral-100);   /* container behind a surface */
  --surface-bg:               var(--neutral-50);    /* page background */
  --surface-overlay:          rgba(255, 255, 255, 0.7);  /* glassmorphism */

  /* Primary (mint) */
  --primary:                  var(--mint-600);
  --on-primary:               var(--neutral-0);
  --primary-container:        var(--mint-200);
  --on-primary-container:     var(--mint-700);
  --primary-light:            var(--mint-100);      /* nav active background */

  /* Secondary (blush) */
  --secondary:                var(--blush-600);
  --on-secondary:             var(--neutral-0);
  --secondary-container:      var(--blush-200);
  --on-secondary-container:   var(--blush-700);
  --secondary-light:          var(--blush-100);

  /* Text */
  --on-surface:               #1a1a1a;              /* primary text */
  --on-surface-variant:       var(--neutral-500);   /* secondary text */
  --on-surface-dim:           var(--neutral-400);   /* tertiary / labels */
  --on-surface-disabled:      var(--neutral-300);

  /* Outlines — used at low opacity only ("ghost border") */
  --outline:                  rgba(42, 48, 47, 0.12);
  --outline-variant:          rgba(42, 48, 47, 0.06);

  /* Shadow — tinted, never pure black */
  --shadow-color:             42, 48, 47;           /* on-surface, rgb */
  --shadow-xs:                0 2px 6px  rgba(var(--shadow-color), 0.04);
  --shadow-sm:                0 4px 12px rgba(var(--shadow-color), 0.06);
  --shadow-md:                0 8px 24px rgba(var(--shadow-color), 0.08);
  --shadow-lg:                0 12px 32px rgba(var(--shadow-color), 0.10);
  --shadow-xl:                0 16px 48px rgba(var(--shadow-color), 0.14);
  --shadow-primary:           0 8px 24px rgba(4, 104, 76, 0.25);
  --shadow-secondary:         0 8px 24px rgba(133, 74, 87, 0.20);

  /* Brand gradients */
  --gradient-primary:         linear-gradient(135deg, var(--mint-600), var(--mint-500));
  --gradient-secondary:       linear-gradient(135deg, var(--blush-600), var(--blush-500));
  --gradient-logo:            linear-gradient(135deg, var(--cream-200) 0%, var(--mint-200) 100%);
  --gradient-mood:            linear-gradient(135deg, var(--blush-200), var(--mint-200));
  --gradient-coin:            linear-gradient(135deg, var(--gold), var(--gold-deep));

  /* ===========================================================
     SHAPE — corner radii
     "Touchable and soft" — never sharp.
     =========================================================== */
  --radius-xs:   8px;     /* tiny chips, badges */
  --radius-sm:   12px;    /* small cards, inputs */
  --radius-md:   16px;    /* default card */
  --radius-lg:   22px;    /* hero card, containers */
  --radius-xl:   28px;    /* bottom sheet, modal */
  --radius-2xl:  36px;
  --radius-full: 999px;   /* pills, buttons, avatars */

  /* ===========================================================
     SPACING — 4px grid, with named "breathing room"
     =========================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;    /* default section gap */
  --space-7:  32px;
  --space-8:  44px;    /* "kawaii breathing room" */
  --space-9:  60px;
  --space-10: 80px;

  /* ===========================================================
     LAYOUT
     =========================================================== */
  --app-max-width: 430px;     /* mobile-first, per PRD */
  --nav-height:    72px;      /* bottom nav */
  --topbar-height: 60px;
  --safe-bottom:   env(safe-area-inset-bottom, 0px);

  /* ===========================================================
     MOTION — soft, ethereal
     =========================================================== */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-soft:  cubic-bezier(0.34, 1.56, 0.64, 1);  /* gentle overshoot for chips */
  --dur-1:      150ms;
  --dur-2:      250ms;
  --dur-3:      350ms;
  --dur-4:      500ms;

  /* ===========================================================
     TYPOGRAPHY — primitives
     =========================================================== */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type scale — Material-ish with editorial flair */
  --display-lg:   3.5rem;     /* 56px — hero moments */
  --display-md:   2.75rem;    /* 44px */
  --display-sm:   2.25rem;    /* 36px */
  --headline-lg:  2rem;       /* 32px — onboarding H1 */
  --headline-md:  1.75rem;    /* 28px — section titles */
  --headline-sm:  1.5rem;     /* 24px */
  --title-lg:     1.25rem;    /* 20px — card title */
  --title-md:     1.0625rem;  /* 17px — chat header */
  --title-sm:     0.9375rem;  /* 15px */
  --body-lg:      1rem;       /* 16px — chat bubbles, body copy */
  --body-md:      0.9375rem;  /* 15px — default */
  --body-sm:      0.875rem;   /* 14px */
  --label-lg:     0.8125rem;  /* 13px */
  --label-md:     0.75rem;    /* 12px */
  --label-sm:     0.6875rem;  /* 11px — eyebrow labels, uppercase */

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.08em;     /* uppercase labels */

  --leading-tight:    1.15;
  --leading-snug:     1.35;
  --leading-normal:   1.55;
  --leading-relaxed:  1.7;
}

/* ===========================================================
   DARK THEME
   Mint-tinted dark surfaces, not pure black. The mint primary
   shifts lighter so it reads against dark; pink stays warm.
   =========================================================== */
[data-theme="dark"],
.kimochi-dark {
  --surface:                  #1a201e;              /* warm mint-tinted dark */
  --surface-low:              #131816;              /* container behind */
  --surface-bg:               #0d1110;              /* page bg */
  --surface-overlay:          rgba(26, 32, 30, 0.72);

  --primary:                  var(--mint-400);      /* lighter for contrast */
  --on-primary:               var(--mint-900);
  --primary-container:        #1f3d31;              /* deep mint */
  --on-primary-container:     var(--mint-200);
  --primary-light:            #243430;              /* nav active subtle */

  --secondary:                #e2a6b3;              /* soft blush, brighter on dark */
  --on-secondary:             var(--blush-800);
  --secondary-container:      #3d2730;
  --on-secondary-container:   var(--blush-200);
  --secondary-light:          #2a1d22;

  --on-surface:               #f3f8f6;
  --on-surface-variant:       #a8b5b1;
  --on-surface-dim:           #6f7a77;
  --on-surface-disabled:      #3d4543;

  --outline:                  rgba(243, 248, 246, 0.12);
  --outline-variant:          rgba(243, 248, 246, 0.06);

  --shadow-color:             0, 0, 0;
  --shadow-xs:                0 2px 6px  rgba(0, 0, 0, 0.30);
  --shadow-sm:                0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-md:                0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:                0 12px 32px rgba(0, 0, 0, 0.55);
  --shadow-xl:                0 16px 48px rgba(0, 0, 0, 0.65);
  --shadow-primary:           0 8px 24px rgba(45, 167, 106, 0.30);
  --shadow-secondary:         0 8px 24px rgba(226, 166, 179, 0.20);

  --gradient-primary:         linear-gradient(135deg, var(--mint-500), var(--mint-400));
  --gradient-secondary:       linear-gradient(135deg, var(--blush-400), var(--blush-500));
  --gradient-logo:            linear-gradient(135deg, #1a3d32 0%, #2a1d22 100%);
  --gradient-mood:            linear-gradient(135deg, #2a1d22, #1f3d31);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

/* ===========================================================
   SEMANTIC TYPOGRAPHY CLASSES
   Use these directly: <h1 class="k-display-lg">...
   Or set them on the element: <h1>...</h1> (defaults via tag).
   =========================================================== */

.k-display-lg, .k-display-md, .k-display-sm,
.k-headline-lg, .k-headline-md, .k-headline-sm,
.k-title-lg, .k-title-md, .k-title-sm {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--on-surface);
  text-wrap: balance;
}

.k-display-lg  { font-size: var(--display-lg); }
.k-display-md  { font-size: var(--display-md); }
.k-display-sm  { font-size: var(--display-sm); }
.k-headline-lg { font-size: var(--headline-lg); }
.k-headline-md { font-size: var(--headline-md); font-weight: var(--weight-bold); }
.k-headline-sm { font-size: var(--headline-sm); font-weight: var(--weight-bold); }
.k-title-lg    { font-size: var(--title-lg);    font-weight: var(--weight-bold); }
.k-title-md    { font-size: var(--title-md);    font-weight: var(--weight-bold); letter-spacing: var(--tracking-normal); }
.k-title-sm    { font-size: var(--title-sm);    font-weight: var(--weight-semibold); letter-spacing: var(--tracking-normal); }

.k-body-lg, .k-body-md, .k-body-sm,
.k-label-lg, .k-label-md, .k-label-sm {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  color: var(--on-surface);
}

.k-body-lg { font-size: var(--body-lg); line-height: var(--leading-normal); }
.k-body-md { font-size: var(--body-md); line-height: var(--leading-normal); }
.k-body-sm { font-size: var(--body-sm); line-height: var(--leading-normal); color: var(--on-surface-variant); }

.k-label-lg { font-size: var(--label-lg); font-weight: var(--weight-semibold); color: var(--on-surface-variant); }
.k-label-md { font-size: var(--label-md); font-weight: var(--weight-semibold); color: var(--on-surface-variant); }
.k-label-sm { font-size: var(--label-sm); font-weight: var(--weight-bold); color: var(--on-surface-dim);
              letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }

/* Default tag mapping — apply Kimochi vibe everywhere */
body { font-family: var(--font-body); color: var(--on-surface); background: var(--surface-bg); -webkit-font-smoothing: antialiased; }
h1   { font-family: var(--font-display); font-weight: var(--weight-extrabold); font-size: var(--headline-lg); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h2   { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--headline-md); line-height: var(--leading-tight); }
h3   { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--headline-sm); line-height: var(--leading-snug); }
h4   { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--title-lg); }
p    { font-family: var(--font-body); font-size: var(--body-md); line-height: var(--leading-normal); color: var(--on-surface); }

code, kbd, pre, samp {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  font-size: 0.875em;
}