/*
 * macOS Design System Tokens
 * Based on Apple Human Interface Guidelines (macOS)
 * Desktop-first, compact, SF Pro system font stack
 */

/* ========================================
   SYSTEM TINT COLORS
   ======================================== */
:root {
  --mac-system-blue: #007AFF;
  --mac-system-green: #28CD41;
  --mac-system-indigo: #5856D6;
  --mac-system-orange: #FF9500;
  --mac-system-pink: #FF2D55;
  --mac-system-purple: #AF52DE;
  --mac-system-red: #FF3B30;
  --mac-system-teal: #59ADC4;
  --mac-system-yellow: #FFCC00;

  /* GRAY SCALE */
  --mac-system-gray: #8E8E93;
  --mac-system-gray2: #AEAEB2;
  --mac-system-gray3: #C7C7CC;
  --mac-system-gray4: #D1D1D6;
  --mac-system-gray5: #E5E5EA;
  --mac-system-gray6: #F2F2F7;

  /* LABEL COLORS */
  --mac-label: rgba(0, 0, 0, 0.85);
  --mac-secondary-label: rgba(0, 0, 0, 0.5);
  --mac-tertiary-label: rgba(0, 0, 0, 0.26);
  --mac-quaternary-label: rgba(0, 0, 0, 0.1);

  /* FILL COLORS */
  --mac-system-fill: rgba(0, 0, 0, 0.05);
  --mac-secondary-system-fill: rgba(0, 0, 0, 0.03);
  --mac-tertiary-system-fill: rgba(0, 0, 0, 0.02);

  /* BACKGROUND COLORS */
  --mac-window-background: #F5F5F5;
  --mac-content-background: #FFFFFF;
  --mac-under-page-background: #EFEFEF;
  --mac-sidebar-background: rgba(244, 244, 244, 0.8);
  --mac-toolbar-background: rgba(251, 251, 251, 0.85);

  /* SEPARATOR */
  --mac-separator: rgba(0, 0, 0, 0.12);
  --mac-opaque-separator: #D5D5D5;

  /* OTHER */
  --mac-link: #007AFF;
  --mac-placeholder-text: rgba(0, 0, 0, 0.25);
  --mac-selection: rgba(0, 122, 255, 0.15);
  --mac-accent-selection: rgba(0, 122, 255, 0.3);

  /* ========================================
     TYPOGRAPHY — macOS scale (smaller than iOS)
     ======================================== */
  --mac-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --mac-font-mono: "SF Mono", "Menlo", "Monaco", "Courier New", monospace;

  /* Large Title — 26pt Bold */
  --mac-font-large-title-size: 26px;
  --mac-font-large-title-weight: 700;
  --mac-font-large-title-leading: 32px;

  /* Title 1 — 22px Bold */
  --mac-font-title1-size: 22px;
  --mac-font-title1-weight: 700;
  --mac-font-title1-leading: 26px;

  /* Title 2 — 17px Semibold */
  --mac-font-title2-size: 17px;
  --mac-font-title2-weight: 600;
  --mac-font-title2-leading: 22px;

  /* Title 3 — 15px Semibold */
  --mac-font-title3-size: 15px;
  --mac-font-title3-weight: 600;
  --mac-font-title3-leading: 20px;

  /* Headline — 13px Semibold */
  --mac-font-headline-size: 13px;
  --mac-font-headline-weight: 600;
  --mac-font-headline-leading: 16px;

  /* Body — 13px Regular */
  --mac-font-body-size: 13px;
  --mac-font-body-weight: 400;
  --mac-font-body-leading: 16px;

  /* Callout — 12px Regular */
  --mac-font-callout-size: 12px;
  --mac-font-callout-weight: 400;
  --mac-font-callout-leading: 15px;

  /* Caption — 11px Regular */
  --mac-font-caption-size: 11px;
  --mac-font-caption-weight: 400;
  --mac-font-caption-leading: 13px;

  /* Small — 10px Regular */
  --mac-font-small-size: 10px;
  --mac-font-small-weight: 400;
  --mac-font-small-leading: 12px;

  /* ========================================
     SPACING (4pt base grid)
     ======================================== */
  --mac-space-1: 2px;
  --mac-space-2: 4px;
  --mac-space-3: 8px;
  --mac-space-4: 12px;
  --mac-space-5: 16px;
  --mac-space-6: 20px;
  --mac-space-8: 24px;
  --mac-space-10: 32px;
  --mac-space-12: 40px;
  --mac-space-16: 56px;

  /* ========================================
     BORDER RADII (macOS is tighter)
     ======================================== */
  --mac-radius-xs: 3px;
  --mac-radius-sm: 5px;
  --mac-radius-md: 8px;
  --mac-radius-lg: 10px;
  --mac-radius-xl: 14px;
  --mac-radius-pill: 9999px;

  /* ========================================
     SHADOWS (macOS window-style)
     ======================================== */
  --mac-shadow-sm: 0 0.5px 1px rgba(0, 0, 0, 0.1);
  --mac-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0.5px 1px rgba(0, 0, 0, 0.08);
  --mac-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
  --mac-shadow-window: 0 12px 40px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.12);

  /* ========================================
     TRANSITIONS
     ======================================== */
  --mac-duration-fast: 120ms;
  --mac-duration-normal: 200ms;
  --mac-duration-slow: 300ms;
  --mac-easing: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ========================================
     BLUR / VIBRANCY
     ======================================== */
  --mac-blur-sidebar: saturate(180%) blur(20px);
  --mac-blur-toolbar: saturate(180%) blur(20px);
  --mac-blur-popover: blur(40px);

  /* ========================================
     LAYOUT
     ======================================== */
  --mac-sidebar-width: 220px;
  --mac-toolbar-height: 52px;
  --mac-content-padding: 20px;
  --mac-max-content-width: 960px;
}

/* ========================================
   DARK MODE — manual toggle or system pref
   ======================================== */

/* Manual dark: <html data-theme="dark"> */
[data-theme="dark"] {
    --mac-system-blue: #0A84FF;
    --mac-system-green: #32D74B;
    --mac-system-indigo: #5E5CE6;
    --mac-system-orange: #FF9F0A;
    --mac-system-pink: #FF375F;
    --mac-system-purple: #BF5AF2;
    --mac-system-red: #FF453A;
    --mac-system-teal: #6AC4DC;
    --mac-system-yellow: #FFD60A;

    --mac-system-gray: #98989D;
    --mac-system-gray2: #636366;
    --mac-system-gray3: #48484A;
    --mac-system-gray4: #3A3A3C;
    --mac-system-gray5: #2C2C2E;
    --mac-system-gray6: #1C1C1E;

    --mac-label: rgba(255, 255, 255, 0.85);
    --mac-secondary-label: rgba(255, 255, 255, 0.55);
    --mac-tertiary-label: rgba(255, 255, 255, 0.26);
    --mac-quaternary-label: rgba(255, 255, 255, 0.1);

    --mac-system-fill: rgba(255, 255, 255, 0.08);
    --mac-secondary-system-fill: rgba(255, 255, 255, 0.05);
    --mac-tertiary-system-fill: rgba(255, 255, 255, 0.03);

    --mac-window-background: #292929;
    --mac-content-background: #1E1E1E;
    --mac-under-page-background: #1A1A1A;
    --mac-sidebar-background: rgba(30, 30, 30, 0.8);
    --mac-toolbar-background: #252525;

    --mac-separator: rgba(255, 255, 255, 0.12);
    --mac-opaque-separator: #3D3D3D;

    --mac-link: #0A84FF;
    --mac-placeholder-text: rgba(255, 255, 255, 0.25);
    --mac-selection: rgba(10, 132, 255, 0.25);
    --mac-accent-selection: rgba(10, 132, 255, 0.4);

    --mac-shadow-sm: 0 0.5px 1px rgba(0, 0, 0, 0.3);
    --mac-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0.5px 1px rgba(0, 0, 0, 0.2);
    --mac-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.2);
    --mac-shadow-window: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.3);
}

/* Auto dark: follows system when no manual choice */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --mac-system-blue: #0A84FF;
    --mac-system-green: #32D74B;
    --mac-system-indigo: #5E5CE6;
    --mac-system-orange: #FF9F0A;
    --mac-system-pink: #FF375F;
    --mac-system-purple: #BF5AF2;
    --mac-system-red: #FF453A;
    --mac-system-teal: #6AC4DC;
    --mac-system-yellow: #FFD60A;

    --mac-system-gray: #98989D;
    --mac-system-gray2: #636366;
    --mac-system-gray3: #48484A;
    --mac-system-gray4: #3A3A3C;
    --mac-system-gray5: #2C2C2E;
    --mac-system-gray6: #1C1C1E;

    --mac-label: rgba(255, 255, 255, 0.85);
    --mac-secondary-label: rgba(255, 255, 255, 0.55);
    --mac-tertiary-label: rgba(255, 255, 255, 0.26);
    --mac-quaternary-label: rgba(255, 255, 255, 0.1);

    --mac-system-fill: rgba(255, 255, 255, 0.08);
    --mac-secondary-system-fill: rgba(255, 255, 255, 0.05);
    --mac-tertiary-system-fill: rgba(255, 255, 255, 0.03);

    --mac-window-background: #292929;
    --mac-content-background: #1E1E1E;
    --mac-under-page-background: #1A1A1A;
    --mac-sidebar-background: rgba(30, 30, 30, 0.8);
    --mac-toolbar-background: #252525;

    --mac-separator: rgba(255, 255, 255, 0.12);
    --mac-opaque-separator: #3D3D3D;

    --mac-link: #0A84FF;
    --mac-placeholder-text: rgba(255, 255, 255, 0.25);
    --mac-selection: rgba(10, 132, 255, 0.25);
    --mac-accent-selection: rgba(10, 132, 255, 0.4);

    --mac-shadow-sm: 0 0.5px 1px rgba(0, 0, 0, 0.3);
    --mac-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0.5px 1px rgba(0, 0, 0, 0.2);
    --mac-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.2);
    --mac-shadow-window: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.3);
  }
}