/* ==========================================================================
   June Design System Tokens
   Aesthetics: Apple Liquid Glass (visionOS / macOS Sequoia) & Editorial Precision
   ========================================================================== */

:root {
  /* Font Families from Lovable */
  --font-apple: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", sans-serif;
  --font-apple-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  --font-ui: var(--font-apple);
  --font-mono: "SF Mono", Monaco, "Menlo", monospace;

  /* Spring Animations */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-normal: 300ms;
  --duration-slow: 450ms;

  /* Light Theme — Apple Liquid Glass & Studio Frosted Atmosphere */
  --bg-app: #F5F5F7;
  --bg-app-rgb: 245, 245, 247;
  --bg-primary: #F5F5F7;
  --bg-secondary: #EBEBED;
  
  --foreground: #1D1D1F;
  --text-primary: #1D1D1F;
  --text-secondary: #6E6E73;
  --text-tertiary: #86868B;
  --text-code: #1D1D1F;

  --card: rgba(255, 255, 255, 0.74);
  --card-foreground: #1D1D1F;
  --popover: rgba(255, 255, 255, 0.88);
  --popover-foreground: #1D1D1F;

  /* Primary Brand Action (Apple Keynote Blue) */
  --primary: #0A84FF;
  --primary-foreground: #FFFFFF;
  --primary-hover: #0071E3;
  --accent-apple: #0A84FF;
  --accent-apple-hover: #0071E3;
  --accent-apple-soft: rgba(10, 132, 255, 0.12);

  --secondary: rgba(240, 242, 248, 0.75);
  --secondary-foreground: #2A2C34;
  --muted: rgba(235, 237, 244, 0.70);
  --muted-foreground: #6E6E73;
  --accent: rgba(230, 240, 255, 0.72);
  --accent-foreground: #0066CC;

  /* Specular Rim & Liquid Glass Borders */
  --border: rgba(255, 255, 255, 0.65);
  --border-glass: rgba(255, 255, 255, 0.75);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-medium: rgba(0, 0, 0, 0.10);
  --border-focus: #0A84FF;
  --input: rgba(0, 0, 0, 0.05);
  --rim-highlight: rgba(255, 255, 255, 0.85);

  /* Liquid Glass Surfaces */
  --glass-surface: rgba(255, 255, 255, 0.74);
  --glass-surface-elevated: rgba(255, 255, 255, 0.88);
  --glass-surface-translucent: rgba(245, 245, 247, 0.72);
  --glass-sidebar: rgba(245, 245, 247, 0.82);
  --glass-card: rgba(255, 255, 255, 0.74);
  --glass-composer: rgba(255, 255, 255, 0.82);
  --glass-input: rgba(0, 0, 0, 0.04);
  --glass-code: rgba(0, 0, 0, 0.04);
  --glass-hover: rgba(0, 0, 0, 0.05);
  --glass-active: rgba(0, 0, 0, 0.09);

  /* Intelligence Tiers */
  --tier-lite-color: #34C759;
  --tier-lite-bg: rgba(52, 199, 89, 0.12);
  --tier-flash-color: #FF9500;
  --tier-flash-bg: rgba(255, 149, 0, 0.12);
  --tier-pro-color: #AF52DE;
  --tier-pro-bg: rgba(175, 82, 222, 0.12);

  --status-success: #34C759;
  --status-warning: #FF9500;
  --status-error: #FF3B30;

  /* Liquid Glass Blur & Shadows from Lovable */
  --blur-ultra: blur(44px) saturate(180%);
  --blur-card: blur(36px) saturate(180%);
  --blur-subtle: blur(20px) saturate(160%);

  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.04), 0 20px 48px -20px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
  --shadow-glass: 0 1px 1px rgba(0, 0, 0, 0.04), 0 24px 60px -24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
  --shadow-composer: 0 1px 1px rgba(0, 0, 0, 0.04), 0 24px 60px -24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 0 0 0.5px rgba(255, 255, 255, 0.25);
  --shadow-modal: 0 32px 80px -16px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.65);

  /* Apple Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-2xl: 28px;
  --radius-pill: 9999px;

  --max-content-width: 760px;
  --composer-width: 760px;
  --composer-spacing: 110px;
}

[data-theme="dark"] {
  /* Dark Theme — Apple Space Obsidian & visionOS Liquid Glass */
  --bg-app: #0D0E12;
  --bg-app-rgb: 13, 14, 18;
  --bg-primary: #0D0E12;
  --bg-secondary: #14151B;

  --foreground: #F5F5F7;
  --text-primary: #F5F5F7;
  --text-secondary: #98989D;
  --text-tertiary: #6E6E73;
  --text-code: #F5F5F7;

  --card: rgba(30, 32, 40, 0.72);
  --card-foreground: #F5F5F7;
  --popover: rgba(30, 32, 40, 0.92);
  --popover-foreground: #F5F5F7;

  --primary: #2997FF;
  --primary-foreground: #FFFFFF;
  --primary-hover: #47A7FF;
  --accent-apple: #2997FF;
  --accent-apple-hover: #47A7FF;
  --accent-apple-soft: rgba(41, 151, 255, 0.16);

  --secondary: rgba(45, 48, 60, 0.75);
  --secondary-foreground: #F5F5F7;
  --muted: rgba(40, 42, 52, 0.70);
  --muted-foreground: #98989D;
  --accent: rgba(41, 151, 255, 0.20);
  --accent-foreground: #60A5FA;

  /* Specular Rim & Liquid Borders */
  --border: rgba(255, 255, 255, 0.14);
  --border-glass: rgba(255, 255, 255, 0.14);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.15);
  --border-focus: #2997FF;
  --input: rgba(255, 255, 255, 0.12);
  --rim-highlight: rgba(255, 255, 255, 0.16);

  /* Liquid Glass Surfaces */
  --glass-surface: rgba(26, 28, 36, 0.74);
  --glass-surface-elevated: rgba(32, 34, 44, 0.86);
  --glass-surface-translucent: rgba(13, 14, 18, 0.75);
  --glass-sidebar: rgba(16, 17, 23, 0.82);
  --glass-card: rgba(28, 30, 38, 0.72);
  --glass-composer: rgba(30, 32, 42, 0.82);
  --glass-input: rgba(255, 255, 255, 0.08);
  --glass-code: rgba(0, 0, 0, 0.40);
  --glass-hover: rgba(255, 255, 255, 0.08);
  --glass-active: rgba(255, 255, 255, 0.12);

  /* Intelligence Tiers */
  --tier-lite-color: #30D158;
  --tier-lite-bg: rgba(48, 209, 88, 0.16);
  --tier-flash-color: #FF9F0A;
  --tier-flash-bg: rgba(255, 159, 10, 0.16);
  --tier-pro-color: #BF5AF2;
  --tier-pro-bg: rgba(191, 90, 242, 0.16);

  --status-success: #30D158;
  --status-warning: #FF9F0A;
  --status-error: #FF453A;

  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.4), 0 20px 48px -20px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  --shadow-glass: 0 1px 1px rgba(0, 0, 0, 0.4), 0 24px 60px -24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  --shadow-composer: 0 1px 1px rgba(0, 0, 0, 0.4), 0 24px 60px -24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  --shadow-modal: 0 40px 100px -20px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}