/**
 * Apple HIG Design Tokens — Public Pages
 * Used by landing.html, login.html, 404.html and other static pages.
 */

:root {
  --system-blue: #007AFF;
  --system-blue-hover: #0066D6;
  --system-green: #34C759;
  --system-orange: #FF9500;
  --system-red: #FF3B30;
  --system-purple: #AF52DE;
  --system-teal: #5AC8FA;
  --system-indigo: #5856D6;

  --bg-primary: #F5F5F7;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F2F2F7;
  --bg-elevated: #FFFFFF;
  --bg-grouped: #F2F2F7;
  --bg-sidebar: rgba(246, 246, 246, 0.72);
  --bg-modal-overlay: rgba(0, 0, 0, 0.32);

  --text-primary: #1D1D1F;
  --text-secondary: #6E6E73;
  --text-tertiary: #AEAEB2;
  --text-on-accent: #FFFFFF;

  --separator: rgba(60, 60, 67, 0.12);
  --separator-opaque: #D1D1D6;

  --fill-primary: rgba(120, 120, 128, 0.2);
  --fill-secondary: rgba(120, 120, 128, 0.16);
  --fill-tertiary: rgba(120, 120, 128, 0.12);
  --fill-quaternary: rgba(120, 120, 128, 0.08);

  --card-shadow: 0 0.5px 1px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  --card-shadow-hover: 0 1px 2px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);
  --card-shadow-elevated: 0 2px 8px rgba(0,0,0,0.08), 0 12px 40px rgba(0,0,0,0.12);
  --card-radius: 14px;
  --card-radius-lg: 18px;

  --btn-radius: 10px;
  --btn-radius-pill: 100px;

  --input-bg: rgba(120, 120, 128, 0.08);
  --input-bg-focus: rgba(120, 120, 128, 0.04);
  --input-border: transparent;
  --input-border-focus: var(--system-blue);
  --input-radius: 10px;

  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', sans-serif;
  --font-large-title: 600 34px/40px var(--font-family);
  --font-title-1: 600 28px/34px var(--font-family);
  --font-title-2: 600 22px/28px var(--font-family);
  --font-title-3: 600 20px/25px var(--font-family);
  --font-headline: 600 17px/22px var(--font-family);
  --font-body: 400 15px/20px var(--font-family);
  --font-body-semibold: 600 15px/20px var(--font-family);
  --font-callout: 400 14px/19px var(--font-family);
  --font-subheadline: 400 13px/18px var(--font-family);
  --font-footnote: 400 12px/16px var(--font-family);
  --font-caption: 500 11px/13px var(--font-family);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;

  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;

  --font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;

  --segmented-bg: var(--fill-tertiary);
  --segmented-active-bg: var(--bg-secondary);
  --segmented-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}

/* Code blocks — SF Mono */
code, pre, kbd, samp {
  font-family: var(--font-mono);
}

html.theme-dark,
[data-theme="dark"] {
  --bg-primary: #000000;
  --bg-secondary: #1C1C1E;
  --bg-tertiary: #2C2C2E;
  --bg-elevated: #2C2C2E;
  --bg-grouped: #1C1C1E;
  --bg-sidebar: rgba(28, 28, 30, 0.78);
  --bg-modal-overlay: rgba(0, 0, 0, 0.56);

  --text-primary: #F5F5F7;
  --text-secondary: #98989D;
  --text-tertiary: #636366;

  --separator: rgba(84, 84, 88, 0.36);
  --separator-opaque: #38383A;

  --fill-primary: rgba(120, 120, 128, 0.36);
  --fill-secondary: rgba(120, 120, 128, 0.32);
  --fill-tertiary: rgba(120, 120, 128, 0.24);
  --fill-quaternary: rgba(120, 120, 128, 0.18);

  --card-shadow: 0 0.5px 1px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.16);
  --card-shadow-hover: 0 1px 2px rgba(0,0,0,0.24), 0 2px 8px rgba(0,0,0,0.28), 0 8px 24px rgba(0,0,0,0.2);
  --card-shadow-elevated: 0 2px 8px rgba(0,0,0,0.32), 0 12px 40px rgba(0,0,0,0.4);

  --input-bg: rgba(120, 120, 128, 0.18);
  --input-bg-focus: rgba(120, 120, 128, 0.12);

  --segmented-bg: rgba(120, 120, 128, 0.24);
  --segmented-active-bg: rgba(100, 100, 100, 0.5);
  --segmented-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.16);

  --system-blue: #0A84FF;
  --system-blue-hover: #409CFF;
  --system-green: #30D158;
  --system-orange: #FF9F0A;
  --system-red: #FF453A;
  --system-purple: #BF5AF2;
  --system-teal: #64D2FF;
  --system-indigo: #5E5CE6;
}

@media (prefers-color-scheme: dark) {
  html:not(.theme-light):not([data-theme="light"]) {
    --bg-primary: #000000;
    --bg-secondary: #1C1C1E;
    --bg-tertiary: #2C2C2E;
    --bg-elevated: #2C2C2E;
    --bg-grouped: #1C1C1E;
    --bg-sidebar: rgba(28, 28, 30, 0.78);
    --bg-modal-overlay: rgba(0, 0, 0, 0.56);

    --text-primary: #F5F5F7;
    --text-secondary: #98989D;
    --text-tertiary: #636366;

    --separator: rgba(84, 84, 88, 0.36);
    --separator-opaque: #38383A;

    --fill-primary: rgba(120, 120, 128, 0.36);
    --fill-secondary: rgba(120, 120, 128, 0.32);
    --fill-tertiary: rgba(120, 120, 128, 0.24);
    --fill-quaternary: rgba(120, 120, 128, 0.18);

    --card-shadow: 0 0.5px 1px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.24), 0 4px 12px rgba(0,0,0,0.16);
    --card-shadow-hover: 0 1px 2px rgba(0,0,0,0.24), 0 2px 8px rgba(0,0,0,0.28), 0 8px 24px rgba(0,0,0,0.2);
    --card-shadow-elevated: 0 2px 8px rgba(0,0,0,0.32), 0 12px 40px rgba(0,0,0,0.4);

    --input-bg: rgba(120, 120, 128, 0.18);
    --input-bg-focus: rgba(120, 120, 128, 0.12);

    --segmented-bg: rgba(120, 120, 128, 0.24);
    --segmented-active-bg: rgba(100, 100, 100, 0.5);
    --segmented-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.16);

    --system-blue: #0A84FF;
    --system-blue-hover: #409CFF;
    --system-green: #30D158;
    --system-orange: #FF9F0A;
    --system-red: #FF453A;
    --system-purple: #BF5AF2;
    --system-teal: #64D2FF;
    --system-indigo: #5E5CE6;
  }
}