/* =========================================================================
   Postera — Colors & Type
   Dark premium · soft lavender accent · iOS-inspired
   ========================================================================= */

/* ── Local Inter — uploaded TTFs in fonts/ ────────────────────────────────
   Two optical sizes exposed as separate families:
   · "Inter"          → 18pt optical (body, UI, captions)
   · "Inter Display"  → 28pt optical (display + section headlines)
   Both ship Light/Regular/Medium/SemiBold/Bold with matching italics.
   font-display: swap — no FOIT.
   ───────────────────────────────────────────────────────────────────────── */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/Inter_18pt-Light.ttf')        format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('fonts/Inter_18pt-LightItalic.ttf')  format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Inter_18pt-Regular.ttf')      format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/Inter_18pt-Italic.ttf')       format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Inter_18pt-Medium.ttf')       format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('fonts/Inter_18pt-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Inter_18pt-SemiBold.ttf')     format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap;
  src: url('fonts/Inter_18pt-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Inter_18pt-Bold.ttf')         format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('fonts/Inter_18pt-BoldItalic.ttf')   format('truetype'); }

@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/Inter_28pt-Light.ttf')        format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Inter_28pt-Regular.ttf')      format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Inter_28pt-Medium.ttf')       format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Inter_28pt-SemiBold.ttf')     format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Inter_28pt-Bold.ttf')         format('truetype'); }

:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --bg:               #0A0A0F;          /* page background, near-black */
  --bg-elevated:      #14141B;          /* modal sheets, popovers */
  --surface:          rgba(255,255,255,0.04);  /* default card / row */
  --surface-strong:   rgba(255,255,255,0.06);  /* hovered / nested card */
  --surface-pressed:  rgba(255,255,255,0.02);

  /* ── Borders ──────────────────────────────────────────── */
  --border:           rgba(255,255,255,0.08);  /* hairline */
  --border-strong:    rgba(255,255,255,0.16);  /* secondary button */
  --border-subtle:    rgba(255,255,255,0.04);

  /* ── Ink (text on dark) ───────────────────────────────── */
  --ink:              rgba(255,255,255,0.95);  /* headings */
  --ink-soft:         rgba(255,255,255,0.78);  /* body */
  --ink-muted:        rgba(255,255,255,0.55);  /* secondary */
  --ink-dim:          rgba(255,255,255,0.35);  /* hints, captions */
  --ink-faint:        rgba(255,255,255,0.18);  /* dividers, placeholders */

  /* ── Brand accent — lavender / iris ───────────────────── */
  --accent:           #A78BFA;
  --accent-hover:     #B89FFC;
  --accent-press:     #8B6FE8;
  --accent-deep:      #5142B8;            /* used in gradients */
  --accent-bg:        rgba(167,139,250,0.10);   /* tinted surface */
  --accent-bg-strong: rgba(167,139,250,0.16);   /* pill button */
  --accent-border:    rgba(167,139,250,0.22);

  /* ── Semantic — warn (amber, for Frist/deadlines) ─────── */
  --warn:             #FCD34D;
  --warn-bg:          rgba(252,211,77,0.08);
  --warn-bg-strong:   rgba(252,211,77,0.14);
  --warn-border:      rgba(252,211,77,0.20);
  --warn-deep:        #BA7517;             /* on light amber surface */

  /* ── Semantic — success (emerald) ─────────────────────── */
  --success:          #34D399;
  --success-bg:       rgba(52,211,153,0.10);
  --success-border:   rgba(52,211,153,0.22);

  /* ── Semantic — danger (soft red) ─────────────────────── */
  --danger:           #FCA5A5;
  --danger-bg:        rgba(239,68,68,0.15);
  --danger-border:    rgba(239,68,68,0.25);

  /* ── Banner surfaces (warm, used on Home carousel) ────── */
  --banner-premium-bg: #534AB7;
  --banner-guide-bg:   #E6F1FB;
  --banner-frist-bg:   #FAEEDA;

  /* ── Type ─────────────────────────────────────────────── */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --font-display: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* Marketing display scale (landing hero, big numerals) */
  --fs-display-1: clamp(48px, 8vw, 96px);
  --fs-display-2: clamp(36px, 5.5vw, 64px);
  --fs-display-3: clamp(28px, 4vw, 44px);

  /* UI scale (matches app — Inter @ -0.3em letter-spacing on heads) */
  --fs-h1: 28px;
  --fs-h2: 22px;     /* sheet titles, page headers */
  --fs-h3: 20px;     /* banner titles */
  --fs-h4: 17px;     /* button labels, row titles */
  --fs-body: 15px;
  --fs-small: 14px;
  --fs-caption: 13px;
  --fs-micro: 11px;  /* PRO badge, eyebrow labels */

  /* Tracking — tight on display, neutral on body, wider on micro */
  --tracking-display: -0.04em;
  --tracking-h:       -0.03em;
  --tracking-body:     0;
  --tracking-eyebrow:  0.06em;
  --tracking-micro:    0.4px;

  /* Line height */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.5;
  --lh-loose: 1.65;

  /* ── Radii ────────────────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;     /* small cards, icon tiles */
  --r-lg:   18px;     /* sheet icon, list cards */
  --r-xl:   24px;     /* big cards, banners, sheet tops */
  --r-2xl:  28px;     /* large feature cards */
  --r-pill: 999px;    /* buttons, chips, FAB */

  /* ── Spacing scale (4-pt grid) ────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  56px;
  --s-10: 80px;
  --s-11: 120px;

  /* ── Elevation / glow ─────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:   0 24px 48px -12px rgba(0,0,0,0.6);
  --glow-accent: 0 0 0 1px rgba(167,139,250,0.18), 0 12px 40px -8px rgba(167,139,250,0.35);
  --glow-warn:   0 0 0 1px rgba(252,211,77,0.20), 0 12px 40px -8px rgba(252,211,77,0.25);

  /* ── Motion ───────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

/* =========================================================================
   Semantic typography classes
   ========================================================================= */

body, html {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--ink);
}
.display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--ink);
}
.display-3 {
  font-family: var(--font-display);
  font-size: var(--fs-display-3);
  font-weight: 500;
  letter-spacing: var(--tracking-h);
  line-height: var(--lh-snug);
  color: var(--ink);
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: var(--tracking-h);
  line-height: var(--lh-snug);
  color: var(--ink);
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--tracking-h);
  line-height: var(--lh-snug);
  color: var(--ink);
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--lh-snug);
  color: var(--ink);
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: var(--lh-snug);
  color: var(--ink);
}

p, .body {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink-soft);
}
.body-lg {
  font-size: 17px;
  font-weight: 300;
  line-height: var(--lh-loose);
  color: var(--ink-soft);
}
.small {
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink-muted);
}
.caption {
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-muted);
}
.micro {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
code, .mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
}