/* ==========================================================================
   PHAlette Design Tokens & Theme Variables
   Apple.com Monochromatic Luxury, Precision Grays & Fluid Micro-Interactions
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. Brand & Monochromatic Palette (Apple Minimalist Luxury)
     ------------------------------------------------------------------------ */
  /* Primary Midnight Navy (PHAlette Signature & Deep Accents) */
  --color-brand-navy: #0A1D37;
  --color-brand-navy-deep: #05101E;
  --color-brand-navy-light: #16365C;
  --color-brand-navy-muted: rgba(10, 29, 55, 0.65);

  /* Precise Neutral Grays (neutral-50 to neutral-900) */
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F7;  /* Apple Signature Light Gray */
  --color-neutral-200: #E8E8ED;
  --color-neutral-300: #D2D2D7;
  --color-neutral-400: #AEAEB2;
  --color-neutral-500: #86868B;  /* Apple Tertiary Gray */
  --color-neutral-600: #6E6E73;  /* Apple Secondary Gray */
  --color-neutral-700: #48484A;
  --color-neutral-800: #2C2C2E;
  --color-neutral-900: #1D1D1F;  /* Apple Primary Dark Charcoal */
  --color-black: #000000;
  --color-white: #FFFFFF;

  /* Ceramic Oat & Organic Biomaterial Tones */
  --color-ceramic-oat-50: #FCFAF7;
  --color-ceramic-oat-100: #F7F3EC;
  --color-ceramic-oat-200: #EFE8DC;
  --color-ceramic-oat-300: #DFD4C3;

  /* Mist & Pastel Blue Tones (Sampled from Studio Hero Background: #B4C6E7 ~ #DAE0EF) */
  --color-mist-50: #F5F8FC;
  --color-mist-100: #E8EFF8;
  --color-mist-200: #DAE4F4;
  --color-mist-300: #B4C6E7;
  --color-mist-400: #8EA8D6;

  /* Interactive & Accent */
  --color-apple-blue: #0A1D37;
  --color-apple-blue-hover: #1B365D;
  --color-success: #1E8E3E;

  /* Text Typography Mapping */
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-inverse: var(--color-white);
  --color-text-inverse-sub: rgba(255, 255, 255, 0.72);

  /* ------------------------------------------------------------------------
     2. Apple Frosted Glass Layering
     ------------------------------------------------------------------------ */
  --glass-nav-bg: rgba(255, 255, 255, 0.75);
  --glass-nav-border: rgba(0, 0, 0, 0.04);
  --glass-card-bg: #FFFFFF;
  --glass-subnav-bg: rgba(255, 255, 255, 0.85);
  --glass-blur: blur(20px);
  --glass-blur-sm: blur(12px);

  /* ------------------------------------------------------------------------
     3. Typography Hierarchy
     ------------------------------------------------------------------------ */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Pretendard", sans-serif;
  --font-family-display: "Inter", -apple-system, BlinkMacSystemFont, "Pretendard", sans-serif;
  --font-family-mono: "SF Mono", Menlo, Monaco, monospace;

  --font-size-hero: clamp(2.75rem, 5.5vw, 4.5rem);       /* 44px ~ 72px */
  --font-size-h1: clamp(2rem, 3.8vw, 3rem);              /* 32px ~ 48px */
  --font-size-h2: clamp(1.5rem, 2.6vw, 2.25rem);         /* 24px ~ 36px */
  --font-size-h3: clamp(1.25rem, 2vw, 1.625rem);         /* 20px ~ 26px */
  --font-size-h4: 1.25rem;                               /* 20px */
  --font-size-lead: 1.1875rem;                           /* 19px */
  --font-size-body: 1.0625rem;                           /* 17px */
  --font-size-body-sm: 0.9375rem;                        /* 15px */
  --font-size-caption: 0.8125rem;                        /* 13px */
  --font-size-badge: 0.6875rem;                          /* 11px */

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

  --letter-spacing-tight: -0.025em;
  --letter-spacing-snug: -0.015em;
  --letter-spacing-normal: -0.005em;
  --letter-spacing-wide: 0.05em;

  /* ------------------------------------------------------------------------
     4. Spacing System
     ------------------------------------------------------------------------ */
  --space-2xs: 0.25rem;   /* 4px */
  --space-xs: 0.5rem;     /* 8px */
  --space-sm: 0.75rem;    /* 12px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4.5rem;    /* 72px */
  --space-4xl: 6rem;      /* 96px */
  --space-5xl: 8rem;      /* 128px */

  --container-max-width: 1200px;
  --container-narrow-width: 980px;
  --container-fluid-padding: clamp(1rem, 4vw, 2.5rem);

  /* ------------------------------------------------------------------------
     5. Radii & Soft Anti-Aliased Shadows
     ------------------------------------------------------------------------ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.03);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.035);
  --shadow-card-hover: 0 16px 44px rgba(10, 29, 55, 0.09);
  --shadow-drop-ambient: drop-shadow(0 12px 20px rgba(10, 29, 55, 0.09));
  --shadow-drop-hover: drop-shadow(0 20px 32px rgba(10, 29, 55, 0.18));
  --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.16);
  --shadow-drawer: -12px 0 36px rgba(0, 0, 0, 0.12);

  /* ------------------------------------------------------------------------
     6. Fluid Transition Timings (Apple 500ms Pacing)
     ------------------------------------------------------------------------ */
  --ease-apple: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 200ms;
  --duration-normal: 350ms;
  --duration-fluid: 500ms;

  /* ------------------------------------------------------------------------
     7. Z-Index Layering
     ------------------------------------------------------------------------ */
  --z-base: 1;
  --z-sticky-subnav: 90;
  --z-navbar: 100;
  --z-search-overlay: 150;
  --z-modal-backdrop: 200;
  --z-drawer: 220;
  --z-toast: 300;
}