/* ============================================================
   MJ.OLDAK — Colors & Type tokens (Brand v2.1, 2026-05-08)
   Coastal palette derived z fotografii Marcin'a Ołdak.
   "Operating Manual" — coastal × Polish poster school × Eastern Bloc service docs.
   ============================================================ */

/* ----- Web fonts (local TTFs in /fonts) ----- */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope.ttf') format('truetype-variations'),
       url('fonts/Manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter.ttf') format('truetype-variations'),
       url('fonts/Inter.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces.ttf') format('truetype-variations'),
       url('fonts/Fraunces.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Italic.ttf') format('truetype-variations'),
       url('fonts/Fraunces-Italic.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono.ttf') format('truetype-variations'),
       url('fonts/JetBrainsMono.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ──────────────────────────────────────────────
     CORE PALETTE — Coastal v2.1
     ────────────────────────────────────────────── */
  --color-background: #E4DBCD;   /* Warm Sand — main page bg */
  --color-primary:    #CAC2AE;   /* Warm Mid — surfaces, cards-on-light, "white" replacement */
  --color-dark:       #0D1B32;   /* Sea Navy — hero, footer, base text on light */
  --color-accent:     #4F8EBA;   /* Sea Blue — CTA, focus, hairlines (DYNAMIC: rotates per photo) */
  --color-sunset:     #C87E3B;   /* Sunset Terracotta — secondary accent / premium hover */

  /* Foreground / background semantic aliases */
  --bg:        var(--color-background);
  --bg-card:   var(--color-primary);
  --bg-dark:   var(--color-dark);
  --fg-1:      var(--color-dark);                          /* primary text on light */
  --fg-2:      color-mix(in srgb, var(--color-dark) 70%, transparent);
  --fg-3:      color-mix(in srgb, var(--color-dark) 50%, transparent);
  --fg-mute:   color-mix(in srgb, var(--color-dark) 40%, transparent);
  --fg-on-dark-1: var(--color-primary);
  --fg-on-dark-2: color-mix(in srgb, var(--color-primary) 60%, transparent);
  --fg-on-dark-3: color-mix(in srgb, var(--color-primary) 40%, transparent);

  --hairline:        color-mix(in srgb, var(--color-dark) 15%, transparent);
  --hairline-strong: color-mix(in srgb, var(--color-dark) 25%, transparent);
  --hairline-on-dark: color-mix(in srgb, var(--color-primary) 12%, transparent);

  /* ──────────────────────────────────────────────
     PER-PHOTO ACCENTS (rotate via IntersectionObserver)
     ────────────────────────────────────────────── */
  --photo-0798: #846046;  /* brick facade, warm earth */
  --photo-5048: #66A8E1;  /* castle on cliff (sky+sea) */
  --photo-5088: #7D6250;  /* sea + mountains */
  --photo-5236: #C49478;  /* mountain road, golden hour */
  --photo-5350: #9A6D4A;  /* sunset boardwalk */
  --photo-5579: #8C6449;  /* Warszawa pano skyline */
  --photo-7543: #8F5621;  /* evening city, deep dusk */
  --photo-6147: #9E833E;  /* yellow flowers, summer */

  /* ──────────────────────────────────────────────
     STATUS / SEMANTIC
     ────────────────────────────────────────────── */
  --status-success:  #22c55e;   /* active, online, completed */
  --status-info:     #3b82f6;   /* syncing, processing */
  --status-premium:  #a855f7;   /* highlights */
  --status-critical: #E63B2E;   /* errors only — never as brand accent */

  /* ──────────────────────────────────────────────
     TYPOGRAPHY — STACKS
     ────────────────────────────────────────────── */
  --font-display: 'Manrope', system-ui, sans-serif;       /* H1/H2/CTA — 800 */
  --font-em:      'Fraunces', Georgia, serif;             /* italic accent — opsz 144, SOFT 100 */
  --font-body:    'Inter', system-ui, sans-serif;         /* body, nav, footer — 400/500 */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace; /* labels, eyebrows, HUD */

  /* ──────────────────────────────────────────────
     TYPE SCALE
     ────────────────────────────────────────────── */
  --type-h1:        clamp(48px, 8vw, 92px);
  --type-h2:        clamp(40px, 5.5vw, 72px);
  --type-h3:        clamp(28px, 3.6vw, 40px);
  --type-h4:        clamp(22px, 2.4vw, 32px);
  --type-lede:      clamp(17px, 1.4vw, 22px);
  --type-body:      16px;
  --type-body-sm:   14px;
  --type-eyebrow:   11px;
  --type-tag:       10px;

  --leading-display: 0.95;
  --leading-em:      0.95;
  --leading-h3:      1.05;
  --leading-body:    1.65;
  --leading-lede:    1.55;

  --tracking-display: -0.03em;
  --tracking-h2:      -0.025em;
  --tracking-eyebrow: 0.28em;
  --tracking-tag:     0.1em;

  /* ──────────────────────────────────────────────
     RADII
     ────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-2xl:  48px;
  --radius-pill: 999px;

  /* ──────────────────────────────────────────────
     SPACING SCALE (8px multiples)
     ────────────────────────────────────────────── */
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  48px;
  --s-6:  64px;
  --s-7:  96px;
  --s-8:  128px;

  /* Layout */
  --container-max: 1280px;
  --container-pad: 64px;
  --section-py:    140px 64px 80px;

  /* ──────────────────────────────────────────────
     SHADOWS / GLOW (no hard drop on dark)
     ────────────────────────────────────────────── */
  --glow-accent:  0 8px 32px color-mix(in srgb, var(--color-accent) 50%, transparent);
  --glow-soft:    0 8px 40px rgba(79,142,186,0.10);
  --glow-strong:  0 8px 40px rgba(79,142,186,0.18);
  --shadow-card:  0 1px 0 rgba(13,27,50,0.04), 0 8px 24px rgba(13,27,50,0.06);
  --shadow-lift:  0 12px 40px rgba(13,27,50,0.10);

  /* Glassmorphism (pill navbar) */
  --glass-dark:   rgba(13,27,50,0.72);
  --glass-light:  rgba(228,219,205,0.70);
  --glass-blur:   blur(16px) saturate(1.4);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bento:  cubic-bezier(0.4, 1.2, 0.5, 1);
  --ease-in-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 800ms;
  --dur-theme: 1500ms; /* per-photo accent rotation */
}

/* ============================================================
   SEMANTIC HELPERS — drop-in classes (kit-ready)
   ============================================================ */

/* Display heading: Manrope 800 uppercase, Fraunces italic accent inline */
.h1, h1.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-h1);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-1);
  text-wrap: balance;
}
.h2, h2.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-h2);
  line-height: 1.0;
  letter-spacing: var(--tracking-h2);
  text-transform: uppercase;
  color: var(--fg-1);
  text-wrap: balance;
}
.h3, h3.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-h3);
  line-height: var(--leading-h3);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg-1);
}
.h4, h4.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-h4);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
/* Italic accent word for headings — Fraunces opsz144 SOFT100 */
.em, em.brand, .h1 em, .h2 em, .h3 em {
  font-family: var(--font-em);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  font-feature-settings: 'liga', 'calt';
  color: inherit;
}
.lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-lede);
  line-height: var(--leading-lede);
  color: var(--fg-2);
  text-wrap: pretty;
}
.body, p.brand {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--fg-2);
  text-wrap: pretty;
}
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--type-eyebrow);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
}
.tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-tag);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-tag);
}
.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.01em;
}
.hud {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
}

/* ============================================================
   COMPONENT-LEVEL TOKENS
   ============================================================ */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  background: var(--color-accent);
  color: var(--color-primary);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  box-shadow: var(--glow-accent);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-in-out),
              background var(--dur-base) var(--ease-in-out),
              color var(--dur-base) var(--ease-in-out),
              border-color var(--dur-base) var(--ease-in-out);
  cursor: pointer;
}
.cta:hover {
  background: var(--color-primary);
  color: var(--color-dark);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.cta--ghost {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--hairline-strong);
  box-shadow: none;
}
.cta--ghost:hover {
  background: rgba(13,27,50,0.05);
  border-color: var(--color-dark);
  color: var(--color-dark);
}

/* Pill chip — for status / industry tabs */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
}
.chip--accent {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.chip--solid {
  color: var(--color-primary);
  background: var(--color-dark);
  border-color: var(--color-dark);
}

/* Status dot */
.dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--status-success);
  box-shadow: 0 0 8px color-mix(in srgb, var(--status-success) 50%, transparent);
}
.dot--accent  { background: var(--color-accent);    box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent) 50%, transparent); }
.dot--info    { background: var(--status-info);     box-shadow: 0 0 8px color-mix(in srgb, var(--status-info) 50%, transparent); }
.dot--premium { background: var(--status-premium);  box-shadow: 0 0 8px color-mix(in srgb, var(--status-premium) 50%, transparent); }
.dot--critical{ background: var(--status-critical); box-shadow: 0 0 8px color-mix(in srgb, var(--status-critical) 50%, transparent); }

/* Card */
.card {
  background: var(--color-primary);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
}
.card--dark {
  background: var(--color-dark);
  color: var(--color-primary);
  border-color: var(--hairline-on-dark);
  box-shadow: var(--glow-soft);
}

/* Form input */
.field {
  width: 100%;
  padding: 16px 20px;
  background: rgba(13,27,50,0.04);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-1);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field::placeholder { color: var(--fg-mute); }
.field:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* Pill navbar */
.pill-nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 12px 10px 24px;
  background: var(--glass-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--hairline-on-dark);
  border-radius: var(--radius-pill);
  color: var(--fg-on-dark-1);
}

/* Noise overlay (analog / print feel) */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scanline treatment for low-res photos / terminal panels */
.scanlines {
  position: relative;
}
.scanlines::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    rgba(202,194,174,0.5) 2px 4px
  );
  mix-blend-mode: multiply;
  opacity: 0.35;
}