/* ============================================================
   SF Pro Display Font Declarations
   ============================================================ */
@font-face {
    font-family: 'SF Pro Display';
    src: local('SF Pro Display Regular'), local('SFProDisplay-Regular'), url('../fonts/SF-Pro-Display-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'SF Pro Display';
    src: local('SF Pro Display Medium'), local('SFProDisplay-Medium'), url('../fonts/SF-Pro-Display-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'SF Pro Display';
    src: local('SF Pro Display Semibold'), local('SFProDisplay-Semibold'), url('../fonts/SF-Pro-Display-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'SF Pro Display';
    src: local('SF Pro Display Bold'), local('SFProDisplay-Bold'), url('../fonts/SF-Pro-Display-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

/* SF Pro Text Font Declarations */
@font-face {
    font-family: 'SF Pro Text';
    src: local('SF Pro Text Regular'), local('SFProText-Regular'), url('../fonts/SF-Pro-Text-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'SF Pro Text';
    src: local('SF Pro Text Medium'), local('SFProText-Medium'), url('../fonts/SF-Pro-Text-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'SF Pro Text';
    src: local('SF Pro Text Semibold'), local('SFProText-Semibold'), url('../fonts/SF-Pro-Text-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'SF Pro Text';
    src: local('SF Pro Text Bold'), local('SFProText-Bold'), url('../fonts/SF-Pro-Text-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

:root {
    /* ── Canvas Colors ──────────────────────────────── */
    --color-canvas-white: #ffffff;          /* Primary clean body/card background */
    --color-canvas-parchment: #f5f5f7;      /* Apple off-white alternating section */
    --color-canvas-dark: #272729;           /* Apple Near-Black Tile — dark sections */
    --color-canvas-black: #000000;          /* Pure black — nav bar, media frames */
    --color-canvas-pearl: #fafafc;          /* Pearl — secondary ghost button bg */

    /* ── Text Colors ────────────────────────────────── */
    --color-ink: #1d1d1f;                   /* Text Ink — body on light surfaces */
    --color-ink-secondary: #6e6e73;         /* Secondary text — captions, meta */
    --color-ink-tertiary: #86868b;          /* Tertiary — eyebrows, overlines */
    --color-ink-dark: #ffffff;              /* Text on dark surfaces */

    /* ── Interactive Colors ─────────────────────────── */
    --color-action-blue: #0066cc;           /* Universal CTA blue — buttons, links */
    --color-focus-blue: #0071e3;            /* Keyboard focus rings */
    --color-sky-blue: #2997ff;              /* In-copy links on dark surfaces */

    /* ── Typography ─────────────────────────────────── */
    --font-display: 'SF Pro Display', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-text:    'SF Pro Text',    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-mono:    SFMono-Regular, Consolas, Monaco, monospace;
    --body-size: 17px;
    --body-line-height: 1.47;
    --heading-tracking: -0.02em;            /* Apple -0.02em tight heading feel */

    /* ── Elevation ──────────────────────────────────── */
    /* No shadows on buttons/cards/nav bars (Apple rule) */
    --shadow-product: 3px 5px 30px rgba(0, 0, 0, 0.22);  /* Only for PNG product renders */
    --blur-glass: blur(20px) saturate(180%);               /* Frosted glass nav */
    --bg-glass: rgba(255, 255, 255, 0.72);                 /* Frosted glass nav bg */
    --focus-ring: 0 0 0 4px rgba(0, 113, 227, 0.6);       /* Focus ring — Focus Blue */

    /* ── Shape / Border Radius ──────────────────────── */
    --radius-pill: 9999px;   /* Primary CTA buttons, chips, search inputs */
    --radius-card: 18px;     /* Grid cards, spec tables */
    --radius-utility: 8px;   /* Secondary buttons, thumbnail images */
    --radius-tile: 0px;      /* Full-bleed alternating home grid tiles */
}


/* Typography & Rendering Reset */
body {
    font-family: var(--font-text);
    font-size: var(--body-size);        /* 17px — Apple body standard */
    line-height: var(--body-line-height); /* 1.47 — Apple body standard */
    color: var(--color-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Heading letter-spacing — Apple -0.02em tight display feel */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: var(--heading-tracking);
}

/* Focus ring — use Focus Blue on interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-utility);
}

/* Product image shadow — only for PNG renders on canvas */
.product-shadow {
    box-shadow: var(--shadow-product);
}


/* Glassmorphism Navigation */
.glass-nav {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Hide scrollbars for sliders */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Docs Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #e4e2e4;
    border-radius: 10px;
}

/* About Page Specific Layout Helpers */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}
.timeline-line::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #e4e2e4;
    transform: translateX(-50%);
    z-index: 0;
}

/* ============================================
   AURA ICON SYSTEM — Apple SF Symbols Standard
   ============================================ */

[data-icon],
.aura-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

/* Size utilities */
.icon-xs { width: 16px; height: 16px; }
.icon-sm { width: 20px; height: 20px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 48px; height: 48px; }

/* Color utilities */
.icon-primary   { color: #1d1d1f; }
.icon-secondary { color: #6e6e73; }
.icon-accent    { color: #0066cc; }
.icon-white     { color: #ffffff; }
.icon-muted     { color: rgba(0,0,0,0.3); }

/* All SVGs inside icons inherit */
[data-icon] svg,
.aura-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Hover states for interactive icons */
button [data-icon],
a [data-icon] {
  transition: opacity 0.2s ease;
}
button:hover [data-icon],
a:hover [data-icon] {
  opacity: 0.7;
}

/* Prevent icon from inheriting text font-size */
[data-icon] svg {
  font-size: 0;
}

/* Accessibility: Support prefers-reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}