/* ==========================================================================
   SERATU MEDYA — APPLE-INSPIRED DESIGN SYSTEM TOKENS
   Borderless Bento Surfaces, Hairline Dividers & Fluid Responsiveness
   (Web font is loaded non-blocking from the layout <head>; SF Pro is used natively on Apple devices.)
   ========================================================================== */

:root {
  /* 1. Color Palette — Apple Pure White & Signature Light Gray Surfaces */
  --color-canvas-bg: #FFFFFF;
  --color-canvas-primary: #FFFFFF;
  --color-canvas-subtle: #F5F5F7;      /* Apple Signature Light Gray */
  --color-canvas-warm: #FAFAFC;
  --color-canvas-dark: #1D1D1F;        /* Apple Deep Carbon / Ink */
  --color-canvas-card-dark: #161618;

  /* Brand Accent (Refined Warm Yellow — Logo mark only) */
  --color-brand-yellow: #FBC707;
  --color-brand-yellow-hover: #E5B400;
  --color-brand-yellow-soft: rgba(251, 199, 7, 0.14);
  --color-brand-glow: rgba(251, 199, 7, 0.18);

  /* Typography Colors (Apple High-Contrast Hierarchy) */
  --color-text-primary: #1D1D1F;
  --color-text-secondary: #6E6E73;     /* Apple Secondary Neutral Gray */
  --color-text-muted: #86868B;         /* Apple Caption Gray */
  --color-text-on-dark: #F5F5F7;
  --color-text-muted-on-dark: #A1A1A6;

  /* Interactive Colors (Apple Blue) */
  --color-accent-green: #1D9B57;
  --color-accent-blue: #0071E3;
  --color-accent-blue-hover: #0077ED;
  --color-link: #0066CC;
  --color-link-on-dark: #2997FF;

  /* 2. Typography Families & Fluid Scale */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --text-xs: clamp(0.75rem, 0.72rem + 0.1vw, 0.8rem);
  --text-sm: clamp(0.84rem, 0.8rem + 0.15vw, 0.9rem);
  --text-base: clamp(0.98rem, 0.94rem + 0.18vw, 1.0625rem);
  --text-lg: clamp(1.06rem, 1rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem);
  --text-2xl: clamp(1.45rem, 1.25rem + 0.85vw, 2rem);
  --text-3xl: clamp(1.9rem, 1.5rem + 1.6vw, 3rem);
  --text-4xl: clamp(2.2rem, 1.7rem + 2.2vw, 3.5rem);
  --text-hero: clamp(2.4rem, 1.55rem + 3.4vw, 4.25rem);

  /* 3. Layout & Spacing Tokens */
  --container-max: 1120px;
  --container-wide: 1260px;
  --header-height: 88px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --section-py: clamp(4rem, 8vw, 7rem);
  --section-py-sm: clamp(2.75rem, 5vw, 4.25rem);

  /* 4. Border Radius & Ultra-Subtle Hairline Borders (Apple Aesthetic) */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-2xl: 32px;
  --radius-full: 980px;

  /* Apple uses ultra-fine hairlines (rgba(0,0,0,0.045) to 0.06), never heavy borders */
  --border-light: 1px solid rgba(0, 0, 0, 0.05);
  --border-subtle: 1px solid rgba(0, 0, 0, 0.05);
  --border-hover: 1px solid rgba(0, 0, 0, 0.10);
  --border-dark-subtle: 1px solid rgba(255, 255, 255, 0.08);

  /* 5. Soft Ambient Shadows (No Harsh Edges) */
  --shadow-xs: 0 2px 10px rgba(0, 0, 0, 0.025);
  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.035);
  --shadow-md: 0 12px 34px -6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, 0.09);
  --shadow-yellow: 0 8px 24px -4px rgba(251, 199, 7, 0.30);

  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: 1px solid rgba(0, 0, 0, 0.05);
  --glass-blur: blur(20px);

  /* 6. Motion & Transitions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-fast: 200ms var(--ease-smooth);
  --transition-base: 360ms var(--ease-out-expo);
  --transition-slow: 600ms var(--ease-out-expo);
}