/* ==========================================================================
   Tea Master — Foundations
   Color + Type tokens lifted from the iOS app source (TeaTimer 1.0.6).
   The app pairs a vivid emerald→teal gradient backdrop with frosted glass
   surfaces. Text on the gradient is white; text on glass surfaces is a deep
   emerald-900. SF Pro is the system font.
   ========================================================================== */

:root {
  /* ---------- Brand emerald scale ----------------------------------------
     The app's signature backdrop is a 3-stop gradient: green-400 → emerald-500
     → teal-600. These individual stops + their tints/shades are the core
     palette. Tailwind names retained for traceability back to the codebase. */
  --tm-green-200:   #BBF7D0;
  --tm-green-300:   #86EFAC;
  --tm-green-400:   #4ADE80;   /* gradient top */
  --tm-green-500:   #22C55E;
  --tm-emerald-300: #6EE7B7;
  --tm-emerald-400: #34D399;
  --tm-emerald-500: #10B981;   /* gradient mid + progress ring top */
  --tm-emerald-600: #059669;
  --tm-emerald-700: #047857;
  --tm-emerald-800: #065F46;   /* progress ring bottom */
  --tm-emerald-900: #064E3B;   /* primary text on glass surfaces */
  --tm-teal-300:    #5EEAD4;
  --tm-teal-500:    #14B8A6;
  --tm-teal-600:    #0D9488;   /* gradient bottom */
  --tm-zinc-900:    #18181B;

  /* ---------- Signature gradient ----------------------------------------- */
  --tm-bg-gradient: linear-gradient(135deg, var(--tm-green-400) 0%, var(--tm-emerald-500) 50%, var(--tm-teal-600) 100%);
  --tm-bg-gradient-overlay-1: linear-gradient(45deg, rgba(134,239,172,0.30) 0%, transparent 50%, rgba(52,211,153,0.20) 100%);
  --tm-bg-gradient-overlay-2: linear-gradient(225deg, transparent 0%, rgba(20,184,166,0.15) 50%, rgba(34,197,94,0.25) 100%);
  --tm-progress-gradient: linear-gradient(180deg, var(--tm-emerald-500) 0%, var(--tm-emerald-800) 100%);

  /* ---------- Glass surfaces (against emerald gradient) ------------------ */
  --tm-glass-bg-strong:  rgba(255,255,255,0.80); /* active chip / primary button on glass */
  --tm-glass-bg:         rgba(255,255,255,0.25); /* default card / panel */
  --tm-glass-bg-soft:    rgba(255,255,255,0.20); /* tea card, inner row */
  --tm-glass-bg-subtle:  rgba(255,255,255,0.15); /* secondary surface */
  --tm-glass-bg-faint:   rgba(255,255,255,0.30); /* default chip */
  --tm-glass-border:     rgba(255,255,255,0.40);
  --tm-glass-border-soft: rgba(255,255,255,0.30);
  --tm-glass-border-strong: rgba(255,255,255,0.80);
  --tm-glass-blur: 20px;
  --tm-glass-blur-xl: 24px;

  /* ---------- Foreground / semantic --------------------------------------
     fg1 = primary copy on glass (emerald-900); fg2 = secondary on glass.
     fg-on-grad-* = text sitting directly on the green backdrop (white). */
  --tm-fg1: var(--tm-emerald-900);
  --tm-fg2: rgba(6,78,59,0.80);
  --tm-fg3: rgba(6,78,59,0.60);
  --tm-fg-on-grad:        #FFFFFF;
  --tm-fg-on-grad-soft:   rgba(255,255,255,0.80);
  --tm-fg-on-grad-muted:  rgba(255,255,255,0.60);
  --tm-fg-on-grad-faint:  rgba(255,255,255,0.40);

  /* ---------- Tea-icon tile gradients ------------------------------------
     Each preset tea has a colored tile behind its emoji. These are the
     gradients shipped in tea-storage.ts (Tailwind from-X via-Y to-Z form). */
  --tm-tea-shu-puer:    linear-gradient(135deg, #3F3F46 0%, #18181B 50%, #000000 100%);   /* zinc-700 → black */
  --tm-tea-sheng-puer:  linear-gradient(135deg, #FB923C 0%, #F97316 50%, #EA580C 100%);   /* orange-400→600 */
  --tm-tea-gaba:        linear-gradient(135deg, #34D399 0%, #10B981 50%, #047857 100%);   /* emerald */
  --tm-tea-tieguanyin:  linear-gradient(135deg, #2DD4BF 0%, #14B8A6 50%, #0F766E 100%);   /* teal */
  --tm-tea-da-hong-pao: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 50%, #6D28D9 100%);   /* violet */
  --tm-tea-black:       linear-gradient(135deg, #F87171 0%, #EF4444 50%, #B91C1C 100%);   /* red */
  --tm-tea-green:       linear-gradient(135deg, #86EFAC 0%, #22C55E 50%, #15803D 100%);   /* green */
  --tm-tea-red:         linear-gradient(135deg, #FB923C 0%, #F97316 50%, #C2410C 100%);   /* orange-red */
  --tm-tea-white:       linear-gradient(135deg, #F9FAFB 0%, #E5E7EB 50%, #D1D5DB 100%);   /* gray */
  --tm-tea-rooibos:     linear-gradient(135deg, #FB923C 0%, #EA580C 50%, #9A3412 100%);   /* deep orange */
  --tm-tea-jasmine:     linear-gradient(135deg, #FBCFE8 0%, #F472B6 50%, #BE185D 100%);   /* pink */
  --tm-tea-yellow:      linear-gradient(135deg, #FDE68A 0%, #F59E0B 50%, #B45309 100%);   /* amber */
  --tm-tea-blue:        linear-gradient(135deg, #93C5FD 0%, #3B82F6 50%, #1D4ED8 100%);   /* blue */

  /* ---------- Status / accent tints used inside glass cards -------------- */
  --tm-accent-warm-bg:   rgba(249,115,22,0.30);   /* temperature row icon */
  --tm-accent-warm-fg:   #FB923C;
  --tm-accent-cool-bg:   rgba(59,130,246,0.30);   /* ratio row icon */
  --tm-accent-cool-fg:   #60A5FA;
  --tm-accent-favorite:  #FACC15;                 /* yellow-400 star */
  --tm-accent-danger:    #EF4444;                 /* delete trash */

  /* ---------- Shadows (iOS-style) ---------------------------------------- */
  --tm-shadow-sm:  0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --tm-shadow-md:  0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -2px rgba(0,0,0,0.05);
  --tm-shadow-lg:  0 25px 45px rgba(0,0,0,0.10);
  --tm-shadow-xl:  0 25px 50px -12px rgba(0,0,0,0.25);
  --tm-shadow-glow: 0 0 20px rgba(255,255,255,0.40);

  /* ---------- Radius scale (heavy rounding) ------------------------------ */
  --tm-radius-sm:  8px;
  --tm-radius-md:  12px;
  --tm-radius-lg:  16px;   /* chip, pill secondary */
  --tm-radius-xl:  20px;   /* small icon button */
  --tm-radius-2xl: 16px;   /* card inner — rounded-2xl */
  --tm-radius-3xl: 24px;   /* primary card / panel — rounded-3xl */
  --tm-radius-pill: 9999px;

  /* ---------- Spacing (4-pt) --------------------------------------------- */
  --tm-space-1:  4px;
  --tm-space-2:  8px;
  --tm-space-3:  12px;
  --tm-space-4:  16px;
  --tm-space-5:  20px;
  --tm-space-6:  24px;
  --tm-space-8:  32px;
  --tm-space-10: 40px;
  --tm-space-12: 48px;

  /* ---------- Motion ----------------------------------------------------- */
  --tm-ease-ios: cubic-bezier(0.4, 0, 0.2, 1);
  --tm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tm-dur-fast: 150ms;
  --tm-dur-base: 300ms;
  --tm-dur-slow: 600ms;

  /* ---------- Type ------------------------------------------------------- */
  --tm-font-sans: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --tm-font-mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Type scale (mobile). Keep these consistent with tea-timer.tsx. */
  --tm-text-xs:    11px;     /* temperature subtitle, thin captions */
  --tm-text-sm:    14px;     /* secondary body, ratio value */
  --tm-text-base:  16px;     /* default body */
  --tm-text-lg:    18px;     /* section header, info row title */
  --tm-text-xl:    20px;     /* H1 in app = "Tea Master" header */
  --tm-text-2xl:   24px;
  --tm-text-3xl:   30px;
  --tm-text-5xl:   48px;
  --tm-text-6xl:   60px;     /* timer display (mobile) */
  --tm-text-7xl:   72px;     /* timer display (large iPhones) */

  --tm-fw-regular: 400;
  --tm-fw-medium:  500;
  --tm-fw-semibold:600;
  --tm-fw-bold:    700;

  --tm-lh-tight: 1.1;
  --tm-lh-snug:  1.25;
  --tm-lh-base:  1.5;

  --tm-tracking-wide:  0.04em;
  --tm-tracking-wider: 0.08em;  /* timer numerals */
}

/* ==========================================================================
   Semantic typography classes — apply directly or reference inside components
   ========================================================================== */

.tm-text     { font-family: var(--tm-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.tm-display-timer {
  font-family: 'SF Pro Rounded', 'SF Pro Display', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: var(--tm-text-6xl);
  font-weight: 700;            /* heavy/bold rounded — the timer is the visual hero */
  letter-spacing: -0.02em;
  color: var(--tm-fg-on-grad);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tm-h1 {
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-2xl);
  font-weight: var(--tm-fw-bold);
  color: var(--tm-fg-on-grad);
  line-height: var(--tm-lh-tight);
}

.tm-h2 {
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-lg);
  font-weight: var(--tm-fw-semibold);
  color: rgba(255,255,255,0.90);
  line-height: var(--tm-lh-snug);
}

.tm-h3 {
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-base);
  font-weight: var(--tm-fw-semibold);
  color: var(--tm-fg-on-grad);
}

.tm-body {
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-base);
  font-weight: var(--tm-fw-medium);
  color: var(--tm-fg1);
  line-height: var(--tm-lh-base);
}

.tm-body-on-grad {
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-sm);
  font-weight: var(--tm-fw-medium);
  color: var(--tm-fg-on-grad-soft);
}

.tm-caption {
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-xs);
  font-weight: var(--tm-fw-medium);
  color: var(--tm-fg-on-grad-muted);
}

.tm-mono {
  font-family: var(--tm-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Surface helpers
   ========================================================================== */

.tm-bg-app {
  background: var(--tm-bg-gradient);
  position: relative;
  min-height: 100%;
}
.tm-bg-app::before,
.tm-bg-app::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tm-bg-app::before { background: var(--tm-bg-gradient-overlay-1); }
.tm-bg-app::after  { background: var(--tm-bg-gradient-overlay-2); }

.tm-glass {
  background: var(--tm-glass-bg);
  backdrop-filter: blur(var(--tm-glass-blur-xl));
  -webkit-backdrop-filter: blur(var(--tm-glass-blur-xl));
  border: 1px solid var(--tm-glass-border);
  border-radius: var(--tm-radius-3xl);
  box-shadow: var(--tm-shadow-xl);
}

.tm-glass-soft {
  background: var(--tm-glass-bg-soft);
  backdrop-filter: blur(var(--tm-glass-blur));
  -webkit-backdrop-filter: blur(var(--tm-glass-blur));
  border: 1px solid var(--tm-glass-border-soft);
  border-radius: var(--tm-radius-3xl);
  box-shadow: var(--tm-shadow-md);
}

.tm-chip {
  background: var(--tm-glass-bg-faint);
  backdrop-filter: blur(var(--tm-glass-blur));
  -webkit-backdrop-filter: blur(var(--tm-glass-blur));
  border: 1px solid var(--tm-glass-border-soft);
  border-radius: var(--tm-radius-2xl);
  color: var(--tm-fg1);
  padding: 12px 24px;
  font-weight: var(--tm-fw-medium);
  transition: transform var(--tm-dur-base) var(--tm-ease-ios), background-color var(--tm-dur-base) var(--tm-ease-ios);
}
.tm-chip[data-active="true"] {
  background: var(--tm-glass-bg-strong);
  border-color: var(--tm-glass-border-strong);
  box-shadow: var(--tm-shadow-md);
  transform: scale(1.05);
}