/*
 * ============================================================
 *  APPLE macOS / iOS DESIGN SYSTEM — CSS Design Tokens
 * ============================================================
 *  Based on: Apple Human Interface Guidelines (2025-2026)
 *  Includes: Liquid Glass (WWDC 2025), Colors, Typography,
 *            Layout, Spacing, Shadows, Borders
 *
 *  Sources:
 *    - https://developer.apple.com/design/human-interface-guidelines/
 *    - https://developer.apple.com/design/human-interface-guidelines/color
 *    - https://developer.apple.com/design/human-interface-guidelines/typography
 *    - https://developer.apple.com/design/human-interface-guidelines/materials
 *    - https://noahgilmore.com/blog/dark-mode-uicolor-compatibility
 *    - https://developer.apple.com/videos/play/wwdc2025/356/
 * ============================================================
 */

/* ============================================================
   1. COLOR TOKENS — LIGHT MODE (default)
   ============================================================ */
:root {
  /* ===== ACCENT / SYSTEM COLORS ===== */
  --apple-red:          #FF3B30;
  --apple-orange:       #FF9500;
  --apple-yellow:       #FFCC00;
  --apple-green:        #34C759;
  --apple-mint:         #00C7BE;
  --apple-teal:         #30B0C7;
  --apple-cyan:         #32ADE6;
  --apple-blue:         #007AFF;
  --apple-indigo:       #5856D6;
  --apple-purple:       #AF52DE;
  --apple-pink:         #FF2D55;
  --apple-brown:        #A2845E;

  /* ===== GRAY SCALE (iOS) ===== */
  --apple-gray:         #8E8E93;
  --apple-gray2:        #AEAEB2;
  --apple-gray3:        #C7C7CC;
  --apple-gray4:        #D1D1D6;
  --apple-gray5:        #E5E5EA;
  --apple-gray6:        #F2F2F7;

  /* ===== LABEL / TEXT COLORS ===== */
  --apple-label:                rgba(0, 0, 0, 1.0);
  --apple-secondary-label:     rgba(60, 60, 67, 0.6);
  --apple-tertiary-label:      rgba(60, 60, 67, 0.3);
  --apple-quaternary-label:    rgba(60, 60, 67, 0.18);
  --apple-placeholder:         rgba(60, 60, 67, 0.3);

  /* ===== BACKGROUND COLORS ===== */
  --apple-bg-primary:          #FFFFFF;
  --apple-bg-secondary:        #EDF2F8;
  --apple-bg-tertiary:         #E4EAF2;

  /* ===== GROUPED BACKGROUND COLORS ===== */
  --apple-bg-grouped:           #EDF2F8;
  --apple-bg-grouped-secondary: #FFFFFF;
  --apple-bg-grouped-tertiary:  #E4EAF2;

  /* ===== FILL COLORS ===== */
  --apple-fill:                rgba(120, 120, 128, 0.2);
  --apple-fill-secondary:     rgba(120, 120, 128, 0.16);
  --apple-fill-tertiary:      rgba(118, 118, 128, 0.12);
  --apple-fill-quaternary:    rgba(116, 116, 128, 0.08);

  /* ===== SEPARATOR COLORS ===== */
  --apple-separator:           rgba(60, 60, 67, 0.29);
  --apple-separator-opaque:    #CBD5E1;

  /* ===== LINK ===== */
  --apple-link:                #007AFF;

  /* ===== APPLE.COM BRAND BLUE (for CTAs) ===== */
  --apple-brand-blue:          #0071E3;
  --apple-brand-blue-hover:    #0077ED;


  /* ============================================================
     2. TYPOGRAPHY TOKENS
     ============================================================ */

  /* ----- Font Stacks (legal for web) ----- */
  --font-system:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --font-rounded:   ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif:     ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  --font-mono:      ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace;

  /* ----- Font Weights ----- */
  --fw-ultralight: 100;
  --fw-thin:       200;
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-heavy:      800;
  --fw-black:      900;

  /* ----- Type Scale (iOS-based, best for web) ----- */
  --text-large-title:    34px;
  --text-title1:         28px;
  --text-title2:         22px;
  --text-title3:         20px;
  --text-headline:       17px;
  --text-body:           17px;
  --text-callout:        16px;
  --text-subheadline:    15px;
  --text-footnote:       13px;
  --text-caption1:       12px;
  --text-caption2:       11px;

  /* ----- Leading (Line Height) ----- */
  --lh-large-title:      41px;
  --lh-title1:           34px;
  --lh-title2:           28px;
  --lh-title3:           25px;
  --lh-headline:         22px;
  --lh-body:             22px;
  --lh-callout:          21px;
  --lh-subheadline:      20px;
  --lh-footnote:         18px;
  --lh-caption1:         16px;
  --lh-caption2:         13px;

  /* ----- Letter Spacing (Apple.com responsive) ----- */
  --ls-tight:   -0.003em;
  --ls-normal:   0em;
  --ls-loose:    0.004em;


  /* ============================================================
     3. SPACING TOKENS (8pt grid)
     ============================================================ */
  --space-0:    0px;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-2:    8px;    /* base unit */
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-7:    32px;
  --space-8:    40px;
  --space-9:    48px;
  --space-10:   56px;
  --space-11:   64px;
  --space-12:   80px;
  --space-13:   96px;


  /* ============================================================
     4. BORDER RADIUS TOKENS
     ============================================================ */
  --radius-xs:       4px;
  --radius-sm:       6px;
  --radius-md:       8px;
  --radius-lg:       10px;   /* macOS Sequoia window */
  --radius-xl:       12px;
  --radius-2xl:      16px;   /* macOS Tahoe window with toolbar */
  --radius-3xl:      20px;
  --radius-4xl:      26px;   /* macOS Tahoe toolbar window outer */
  --radius-full:     9999px; /* pill / capsule */

  /* Semantic radius aliases */
  --radius-button:        var(--radius-md);
  --radius-card:          var(--radius-xl);
  --radius-modal:         var(--radius-2xl);
  --radius-window:        var(--radius-lg);
  --radius-window-tahoe:  var(--radius-2xl);
  --radius-input:         var(--radius-sm);
  --radius-menu:          var(--radius-sm);
  --radius-popover:       var(--radius-lg);
  --radius-toggle:        var(--radius-full);


  /* ============================================================
     5. SHADOW TOKENS
     ============================================================ */
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:      0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg:      0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl:      0 8px 32px rgba(0, 0, 0, 0.15);
  --shadow-2xl:     0 22px 70px rgba(0, 0, 0, 0.25);

  /* Semantic shadow aliases */
  --shadow-button:        0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-card:          var(--shadow-lg);
  --shadow-modal:         var(--shadow-2xl);
  --shadow-window:        var(--shadow-2xl);
  --shadow-menu:          0 10px 40px rgba(0, 0, 0, 0.15);
  --shadow-popover:       0 5px 20px rgba(0, 0, 0, 0.15);
  --shadow-toolbar:       0 0.5px 0 rgba(0, 0, 0, 0.12);


  /* ============================================================
     6. LAYOUT TOKENS
     ============================================================ */

  /* macOS window chrome */
  --macos-menubar-height:        24px;
  --macos-toolbar-height:        52px;
  --macos-toolbar-height-compact: 38px;
  --macos-sidebar-width-min:     200px;
  --macos-sidebar-width-default: 240px;
  --macos-sidebar-width-max:     300px;

  /* Traffic light (window controls) */
  --macos-traffic-light-size:    12px;
  --macos-traffic-light-spacing: 8px;
  --macos-traffic-light-margin-left: 7px;
  --macos-traffic-light-margin-top:  6px;

  /* Touch targets */
  --touch-target-ios:      44px;  /* iOS default */
  --touch-target-ios-min:  28px;  /* iOS minimum */
  --touch-target-macos:    28px;  /* macOS default */
  --touch-target-macos-min: 20px; /* macOS minimum */

  /* Responsive breakpoints (Apple.com style) */
  --bp-mobile:      735px;
  --bp-tablet:      1068px;
  --bp-desktop:     1440px;


  /* ============================================================
     7. GLASS / VIBRANCY TOKENS
     ============================================================ */

  /* Backdrop filter presets */
  --glass-blur-sm:       blur(8px);
  --glass-blur-md:       blur(16px);
  --glass-blur-lg:       blur(20px);
  --glass-blur-xl:       blur(30px);
  --glass-blur-2xl:      blur(40px);

  --glass-saturate:      saturate(180%);
  --glass-saturate-heavy: saturate(200%);

  /* Glass background presets */
  --glass-bg-ultra-clear:   rgba(255, 255, 255, 0.05);
  --glass-bg-light:         rgba(255, 255, 255, 0.15);
  --glass-bg-medium:        rgba(255, 255, 255, 0.20);
  --glass-bg-heavy:         rgba(255, 255, 255, 0.25);
  --glass-bg-frosted:       rgba(255, 255, 255, 0.35);

  /* Glass borders */
  --glass-border-subtle:    1px solid rgba(255, 255, 255, 0.1);
  --glass-border-light:     1px solid rgba(255, 255, 255, 0.2);
  --glass-border-medium:    1px solid rgba(255, 255, 255, 0.3);
  --glass-border-strong:    1px solid rgba(255, 255, 255, 0.5);
  --glass-border-intense:   1px solid rgba(255, 255, 255, 0.8);

  /* Combined glass effects */
  --glass-backdrop-standard: blur(20px) saturate(180%);
  --glass-backdrop-heavy:    blur(30px) saturate(200%);
  --glass-backdrop-light:    blur(10px) saturate(150%);

  /* Dimming layer for clear Liquid Glass over bright bg */
  --liquid-glass-dimming:    rgba(0, 0, 0, 0.35);


  /* ============================================================
     8. TRANSITION / ANIMATION TOKENS
     ============================================================ */
  --ease-default:     cubic-bezier(0.25, 0.1, 0.25, 1.0);     /* ease */
  --ease-in:          cubic-bezier(0.42, 0, 1.0, 1.0);
  --ease-out:         cubic-bezier(0, 0, 0.58, 1.0);
  --ease-in-out:      cubic-bezier(0.42, 0, 0.58, 1.0);
  --ease-spring:      cubic-bezier(0.34, 1.56, 0.64, 1.0);     /* Apple-style spring */

  --duration-instant:  100ms;
  --duration-fast:     200ms;
  --duration-normal:   300ms;
  --duration-slow:     500ms;
  --duration-slower:   700ms;

  --transition-fast:     all 200ms var(--ease-default);
  --transition-normal:   all 300ms var(--ease-default);
  --transition-spring:   all 500ms var(--ease-spring);

  /* Interaction tints */
  --apple-blue-glow:       rgba(0, 122, 255, 0.15);
  --apple-blue-tint:       rgba(0, 122, 255, 0.12);
  --apple-blue-tint-light: rgba(0, 122, 255, 0.08);
  --apple-sidebar-bg:      rgba(246, 246, 246, 0.80);
  --apple-nav-glass:       rgba(237, 242, 248, 0.78);

  /* ===== GLASS TINTS (warm cream-blue) ===== */
  --apple-glass-card:    rgba(255, 255, 255, 0.82);
  --apple-glass-warm:    rgba(250, 252, 255, 0.85);
  --apple-glass-cool:    rgba(237, 242, 250, 0.80);
  --apple-border-glass:  rgba(180, 200, 225, 0.45);
  --apple-border-card:   rgba(200, 215, 235, 0.55);
  --apple-red-hover:       #E0352B;
}


/* ============================================================
   DARK MODE — REMOVED
   Dark mode has been intentionally removed.
   This site uses a single light theme only.
   ============================================================ */


/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */
@media (prefers-contrast: high) {
  :root {
    /* Increase fills and borders for better visibility */
    --apple-fill:                rgba(120, 120, 128, 0.36);
    --apple-fill-secondary:     rgba(120, 120, 128, 0.30);
    --apple-fill-tertiary:      rgba(118, 118, 128, 0.24);
    --apple-fill-quaternary:    rgba(116, 116, 128, 0.18);
    --apple-separator:           rgba(60, 60, 67, 0.49);

    /* Make glass less transparent */
    --glass-bg-light:         rgba(255, 255, 255, 0.40);
    --glass-bg-medium:        rgba(255, 255, 255, 0.50);
    --glass-bg-heavy:         rgba(255, 255, 255, 0.60);
  }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant:  0ms;
    --duration-fast:     0ms;
    --duration-normal:   0ms;
    --duration-slow:     0ms;
    --duration-slower:   0ms;
    --ease-spring:       var(--ease-default);
  }
}