/* ============================================
   ATAMAP ASSOCIATES — Design Tokens
   Apple-Calibrated · Premium Spacing · Fluid Typography
   ============================================
   Constraint: spacing, radius, elevation, type-scale,
   and motion-easing only. Do not change color values.
   ============================================ */

:root {
  /* Color Palette — Light Theme with Dark Framing */
  --color-navy-900: #0d1117;        /* Deepest — hero bg, header/footer */
  --color-navy-800: #141b2d;        /* Primary dark surface — header/footer */
  --color-navy-700: #fafbfd;        /* Light card surface — near-white */
  --color-navy-600: #f3f4f7;        /* Elevated surface / light hover */
  --color-graphite-500: #d1d5db;    /* Borders — good contrast on white */
  --color-steel-400: #4b5563;       /* Secondary text (dark on light) */
  --color-steel-300: #6b7280;       /* Body text (dark on light) */
  --color-silver-200: #374151;      /* Strong text */
  --color-silver-100: #1f2937;      /* Heading text */
  --color-white: #ffffff;           /* White — for text on dark backgrounds */
  --color-pure-white: #ffffff;      /* Pure white for card backgrounds */

  /* Accent — Metallic Gold (extracted from logo ATA text) */
  --color-accent: #d4af37;          /* Metallic Gold — exact logo match */
  --color-accent-hover: #e0c04a;    /* Brighter gold on hover */
  --color-accent-dim: rgba(212, 175, 55, 0.12);

  /* Brand — Logo-derived accent colors */
  --color-brand-orange: #f07000;    /* Globe orange from logo icon */
  --color-brand-red: #cc0000;       /* Globe grid lines from logo */
  --color-brand-navy: #1a1f3a;      /* Logo background navy */

  /* Semantic */
  --color-danger: #dc2626;
  --color-success: #16a34a;
  --color-info: #3b82f6;

  /* ── Font Family (Apple HIG stack) ── */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;

  /* ── Apple Type Scale (SF Pro-derived) ── */
  --text-display-size: 40px;   --text-display-lh: 1.1;  --text-display-weight: 700;
  --text-title-1-size: 28px;   --text-title-1-lh: 1.2;  --text-title-1-weight: 700;
  --text-title-2-size: 22px;   --text-title-2-lh: 1.25; --text-title-2-weight: 600;
  --text-title-3-size: 18px;   --text-title-3-lh: 1.3;  --text-title-3-weight: 600;
  --text-body-size:    16px;   --text-body-lh: 1.5;     --text-body-weight: 400;
  --text-callout-size: 15px;   --text-callout-lh: 1.45; --text-callout-weight: 400;
  --text-footnote-size:13px;   --text-footnote-lh: 1.4; --text-footnote-weight: 400;
  --text-caption-size: 11px;   --text-caption-lh: 1.3;  --text-caption-weight: 500;

  /* Fixed sizes that don't scale (legacy compat) */
  --font-size-4xs: 0.5625rem;  /* 9px  */
  --font-size-3xs: 0.625rem;   /* 10px */
  --font-size-2xs: 0.6875rem;  /* 11px */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.125rem;    /* 18px */

  /* Fluid sizes: clamp(mobile, preferred, desktop) */
  --font-size-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  --font-size-3xl: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  --font-size-4xl: clamp(2rem, 1rem + 2.75vw, 3rem);
  --font-size-5xl: clamp(2.25rem, 1rem + 3.5vw, 3.5rem);
  --font-size-hero: clamp(2.5rem, 1rem + 4.5vw, 4.5rem);

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;

  /* ── Spacing: Apple 8pt grid with 4pt sub-grid ── */
  --space-0: 0;
  --space-0-5: 2px;       /* micro — divider, timeline track */
  --space-1: 4px;         /* icon-to-label gap, tight inline */
  --space-1-5: 6px;       /* dot indicators, subtle gaps */
  --space-2: 8px;         /* base unit: small component padding */
  --space-2-5: 10px;      /* option item gap, badge padding */
  --space-3: 12px;        /* default component padding */
  --space-4: 16px;        /* standard gap between related elements */
  --space-5: 24px;        /* gap between distinct components */
  --space-6: 24px;        /* section padding, component gap (alias) */
  --space-7: 48px;        /* gap between major sections */
  --space-8: 32px;        /* card padding (large), section gap */
  --space-9: 96px;        /* hero breathing room */
  --space-10: 40px;       /* premium edge, desktop padding */
  --space-12: 48px;       /* section vertical rhythm */
  --space-14: 56px;       /* large CTA height, avatar */
  --space-16: 64px;       /* page-section rhythm */
  --space-20: 80px;       /* section spacing desktop */
  --space-24: 96px;       /* generous premium desktop */
  --space-28: 112px;
  --space-32: 128px;

  /* ── Responsive Section Spacing (mobile-first) ── */
  --section-py: var(--space-12);     /* 48px mobile */
  --section-px: var(--space-5);      /* 24px mobile */
  --container-px: var(--space-5);    /* 24px mobile */

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 680px;         /* Apple reading width */
  --container-wide: 1400px;
  --grid-gap: var(--space-8);        /* 32px */
  --grid-gap-lg: var(--space-8);

  /* ── Corner Radius (Apple HIG scale) ── */
  --border-radius-none: 0;
  --border-radius-micro: 1px;       /* hairline dividers */
  --border-radius-xs: 4px;          /* small tags, chips */
  --radius-xs: 6px;                 /* Apple: small tags */
  --border-radius-sm: 6px;
  --radius-sm: 10px;                /* Apple: buttons, inputs */
  --border-radius-md: 8px;
  --radius-md: 14px;                /* Apple: cards, modals */
  --border-radius-lg: 12px;
  --radius-lg: 20px;                /* Apple: large cards, sheets */
  --border-radius-xl: 16px;
  --border-radius-2xl: 20px;
  --border-radius-3xl: 24px;        /* squircle-adjacent */
  --radius-full: 999px;             /* pills, avatars */
  --border-radius-btn: 10px;        /* Apple: buttons */
  --border-radius-card: 14px;       /* Apple: cards */
  --border-radius-input: 10px;      /* Apple: inputs */
  --border-radius-pill: 999px;

  --border-width: 1px;
  --border-color: var(--color-graphite-500);

  /* ── Elevation (Apple 3-level system) ── */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06);
  --elevation-2: 0 2px 4px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.10);
  --elevation-3: 0 4px 8px rgba(0,0,0,0.06), 0 16px 48px rgba(0,0,0,0.16);

  /* Legacy shadow aliases (backward compat) */
  --shadow-xs: var(--elevation-0);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: var(--elevation-1);
  --shadow-lg: var(--elevation-2);
  --shadow-xl: var(--elevation-3);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.1);
  --shadow-glow: 0 0 20px rgba(212, 175, 55, 0.15);
  --shadow-glow-lg: 0 0 40px rgba(212, 175, 55, 0.2), 0 0 80px rgba(212, 175, 55, 0.08);
  --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.04);

  /* ── Motion (Apple HIG spring easing) ── */
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);      /* default: snappy settle */
  --ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);    /* rare: slight overshoot */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);               /* leaving screen */
  --ease-spring-1: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --ease-spring-2: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-spring-settle: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.45, 0, 0.55, 1);

  --duration-instant: 75ms;
  --duration-fast: 150ms;          /* micro: hover, toggle */
  --duration-quick: 200ms;         /* small transitions */
  --duration-base: 250ms;          /* default: modals, panels */
  --duration-normal: 250ms;        /* alias for compat */
  --duration-moderate: 300ms;      /* expanding buttons */
  --duration-slow: 400ms;          /* page-level transitions */
  --duration-pulse: 2s;            /* animation loops */
  --duration-pulse-lg: 2.5s;       /* slower animation loops */
  --duration-gradient: 40s;

  /* Z-Index Scale */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ── Component Proportions (Apple HIG) ── */
  --tap-target-min: 44px;
  --touch-target: 44px;
  --touch-target-sm: 36px;
  --touch-target-xs: 32px;
  --touch-target-lg: 52px;

  --button-height-compact: 36px;
  --button-height-default: 44px;
  --button-height-large: 52px;

  --icon-inline: 16px;
  --icon-default: 20px;
  --icon-nav: 24px;
  --icon-feature: 32px;
  --icon-hero: 48px;

  --content-max-width-reading: 680px;
  --content-max-width-app: 1200px;

  /* Header */
  --header-height: 64px;      /* Mobile — taller for breathing room with search + hamburger */

  /* Logo */
  --logo-height: 40px;
  --logo-height-mobile: 32px;

  /* Chat layout */
  --chat-toggle-size: 56px;
  --chat-offset: 92px;
}

/* Dark surfaces: shadows barely read.
   Step elevation via surface lightness instead. */
@media (prefers-color-scheme: dark) {
  :root {
    --elevation-1: 0 1px 2px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.24);
    --elevation-2: 0 2px 4px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.35);
    --elevation-3: 0 4px 8px rgba(0,0,0,0.4), 0 16px 48px rgba(0,0,0,0.5);
  }
}

/* ── Tablet overrides ── */
@media (min-width: 640px) {
  :root {
    --section-py: var(--space-16);     /* 64px */
    --section-px: var(--space-8);      /* 32px */
    --container-px: var(--space-8);
    --grid-gap: var(--space-8);
    --header-height: 68px;
  }
}

/* ── Desktop overrides ── */
@media (min-width: 1024px) {
  :root {
    --section-py: var(--space-20);     /* 80px */
    --section-px: var(--space-10);     /* 40px — premium */
    --container-px: var(--space-10);
    --grid-gap-lg: var(--space-10);
    --header-height: 72px;
  }
}

/* ── Large desktop ── */
@media (min-width: 1280px) {
  :root {
    --section-py: var(--space-24);     /* 96px — generous premium */
  }
}

/* ── Utility Classes ── */
.text-display  { font: var(--text-display-weight) var(--text-display-size)/var(--text-display-lh) var(--font-family); }
.text-title-1  { font: var(--text-title-1-weight) var(--text-title-1-size)/var(--text-title-1-lh) var(--font-family); }
.text-title-2  { font: var(--text-title-2-weight) var(--text-title-2-size)/var(--text-title-2-lh) var(--font-family); }
.text-title-3  { font: var(--text-title-3-weight) var(--text-title-3-size)/var(--text-title-3-lh) var(--font-family); }
.text-body     { font: var(--text-body-weight) var(--text-body-size)/var(--text-body-lh) var(--font-family); }
.text-callout  { font: var(--text-callout-weight) var(--text-callout-size)/var(--text-callout-lh) var(--font-family); }
.text-footnote { font: var(--text-footnote-weight) var(--text-footnote-size)/var(--text-footnote-lh) var(--font-family); }
.text-caption  { font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-lh) var(--font-family); }

.elevation-1 { box-shadow: var(--elevation-1); }
.elevation-2 { box-shadow: var(--elevation-2); }
.elevation-3 { box-shadow: var(--elevation-3); }

.transition-standard { transition: all var(--duration-base) var(--ease-standard); }
.transition-fast      { transition: all var(--duration-fast) var(--ease-standard); }
.transition-emphasis  { transition: all var(--duration-base) var(--ease-emphasis); }

/* Squircle (continuous corner) — progressive enhancement */
.squircle {
  border-radius: var(--radius-lg);
  corner-shape: squircle;
}