/* Quantum-Spatial canonical typography foundation.
   Single source of truth for type across iOS, iPadOS, macOS, visionOS, tvOS, watchOS.
   Brand layers may not override anything in this file.
   Apple HIG taxonomy: Large Title, Title 1, Title 2, Title 3, Headline, Body,
   Callout, Subheadline, Footnote, Caption 1, Caption 2.
   Each style ships Regular and Emphasized variants.
   Weight axis values are Apple's SF Pro variable axis (400, 510, 590, 700, 860). */

:root {
  --font: 'SF Pro', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, monospace;

  --fw-regular: 400;
  --fw-medium: 510;
  --fw-semibold: 590;
  --fw-bold: 700;
  --fw-heavy: 860;

  /* Text color hierarchy — Apple NSColor labelColor family, dark mode.
     Transparency is canonical. Opaque labels are only for vibrancy contexts. */
  --text-primary: rgba(255, 255, 255, 0.85);
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-tertiary: rgba(255, 255, 255, 0.25);
  --text-quaternary: rgba(255, 255, 255, 0.10);
  --text-placeholder: rgba(255, 255, 255, 0.25);

  --text-vibrant-primary: #E5E5E5;
  --text-vibrant-secondary: #7C7C7C;

  /* Platform default body size — iPadOS / iOS / visionOS baseline.
     Overridden below for macOS, tvOS, watchOS. */
  --type-base: 17px;
  --type-base-min: 11px;
}

/* macOS desktop pointer environments. Apple HIG default 13pt, min 10pt.
   Targets pointer:fine + wide viewport. */
@media (pointer: fine) and (min-width: 1024px) {
  :root {
    --type-base: 13px;
    --type-base-min: 10px;
  }
}

/* tvOS — large viewing distance. Apple HIG default 29pt, min 23pt.
   Targets very wide screens with coarse pointer (remote). */
@media (pointer: coarse) and (min-width: 1920px) {
  :root {
    --type-base: 29px;
    --type-base-min: 23px;
  }
}

/* watchOS — small viewport. Apple HIG default 16pt, min 12pt. */
@media (max-width: 240px) {
  :root {
    --type-base: 16px;
    --type-base-min: 12px;
  }
}

/* Type scale, expressed as multiplicative ratios off --type-base.
   Ratios are derived from Apple's iOS scale and hold across platforms. */
:root {
  --type-large-title: calc(var(--type-base) * 2.0);    /* 34 / 26 / 58 / 32 */
  --type-title-1:     calc(var(--type-base) * 1.647);  /* 28 / 22 / 48 / 26 */
  --type-title-2:     calc(var(--type-base) * 1.294);  /* 22 / 17 / 38 / 21 */
  --type-title-3:     calc(var(--type-base) * 1.176);  /* 20 / 15 / 34 / 19 */
  --type-headline:    var(--type-base);                /* 17 / 13 / 29 / 16 */
  --type-body:        var(--type-base);                /* 17 / 13 / 29 / 16 */
  --type-callout:     calc(var(--type-base) * 0.941);  /* 16 / 12 / 27 / 15 */
  --type-subheadline: calc(var(--type-base) * 0.882);  /* 15 / 11 / 26 / 14 */
  --type-footnote:    calc(var(--type-base) * 0.765);  /* 13 / 10 / 22 / 12 */
  --type-caption-1:   calc(var(--type-base) * 0.706);  /* 12 / 9.2 / 20 / 11 */
  --type-caption-2:   calc(var(--type-base) * 0.647);  /* 11 / 8.4 / 19 / 10 */

  --lh-tight: 1.1;
  --lh-snug: 1.2;
  --lh-normal: 1.3;
  --lh-relaxed: 1.4;

  --ls-display: -0.022em;
  --ls-tight: -0.015em;
  --ls-normal: 0;
  --ls-wide: 0.1em;
}

/* Apple type style classes. Foundation. Brand layers cannot override. */
.large-title {
  font-family: var(--font);
  font-size: var(--type-large-title);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
}
.large-title-emphasized {
  font-family: var(--font);
  font-size: var(--type-large-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
}

.title-1 {
  font-family: var(--font);
  font-size: var(--type-title-1);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
.title-1-emphasized {
  font-family: var(--font);
  font-size: var(--type-title-1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

.title-2 {
  font-family: var(--font);
  font-size: var(--type-title-2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}
.title-2-emphasized {
  font-family: var(--font);
  font-size: var(--type-title-2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

.title-3 {
  font-family: var(--font);
  font-size: var(--type-title-3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
}
.title-3-emphasized {
  font-family: var(--font);
  font-size: var(--type-title-3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
}

.headline {
  font-family: var(--font);
  font-size: var(--type-headline);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
}
.headline-emphasized {
  font-family: var(--font);
  font-size: var(--type-headline);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
}

.body {
  font-family: var(--font);
  font-size: var(--type-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  color: var(--text-secondary);
}
.body-emphasized {
  font-family: var(--font);
  font-size: var(--type-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
}

.callout {
  font-family: var(--font);
  font-size: var(--type-callout);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  color: var(--text-secondary);
}
.callout-emphasized {
  font-family: var(--font);
  font-size: var(--type-callout);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  color: var(--text-secondary);
}

.subheadline {
  font-family: var(--font);
  font-size: var(--type-subheadline);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-tertiary);
}
.subheadline-emphasized {
  font-family: var(--font);
  font-size: var(--type-subheadline);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-secondary);
}

.footnote {
  font-family: var(--font);
  font-size: var(--type-footnote);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-tertiary);
}
.footnote-emphasized {
  font-family: var(--font);
  font-size: var(--type-footnote);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-tertiary);
}

.caption-1 {
  font-family: var(--font);
  font-size: var(--type-caption-1);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-quaternary);
}
.caption-1-emphasized {
  font-family: var(--font);
  font-size: var(--type-caption-1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-tertiary);
}

.caption-2 {
  font-family: var(--font);
  font-size: var(--type-caption-2);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-quaternary);
}
.caption-2-emphasized {
  font-family: var(--font);
  font-size: var(--type-caption-2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-quaternary);
}

/* Vibrancy contexts only. Apply within .sidebar, .modal, .glass containers
   where translucent material requires opaque labels for contrast. */
.vibrancy .large-title,
.vibrancy .title-1, .vibrancy .title-2, .vibrancy .title-3,
.vibrancy .headline, .vibrancy .body,
.vibrancy .callout, .vibrancy .subheadline,
.vibrancy .footnote, .vibrancy .caption-1, .vibrancy .caption-2 {
  color: var(--text-vibrant-primary);
}
.vibrancy .body, .vibrancy .callout,
.vibrancy .subheadline, .vibrancy .footnote,
.vibrancy .caption-1, .vibrancy .caption-2 {
  color: var(--text-vibrant-secondary);
}