/* ============================================================
   Atypisch — Design Tokens
   Colors, type, spacing, radii, shadow, motion
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ---------- Self-hosted Inter ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Self-hosted Noto Sans ---------- */
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-sans-1.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/noto-sans-2.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/noto-sans-3.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-sans-4.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-sans-5.woff2") format("woff2");
}

:root {
  /* Brand colors (the wordmark gradient) */
  --atyp-brand-navy:      #061018;
  --atyp-brand-teal:      #26a69a;
  --atyp-brand-cyan:      #14b8a6;
  --atyp-brand-slate:     #5c6bc0;
  --atyp-brand-purple:    #8e24aa;
  --atyp-brand-royal:     #1e40af;
  --atyp-brand-magenta:   #d81b60;
  --atyp-brand-pink:      #e91e63;

  --atyp-logo-gradient: linear-gradient(
    90deg,
    var(--atyp-brand-teal)    0%,
    var(--atyp-brand-slate)  32%,
    var(--atyp-brand-purple) 58%,
    var(--atyp-brand-magenta) 82%,
    var(--atyp-brand-pink)  100%
  );

  /* Accent / CTA */
  --atyp-teal:           #2dd4bf;
  --atyp-teal-dark:      #0d9488;
  --atyp-cta-blue:       #0ea5e9;
  --atyp-cta-blue-hover: #0284c7;
  --atyp-blue:           var(--atyp-brand-cyan);

  /* Neutral foreground scale */
  --atyp-text-heading:   #1f2937;
  --atyp-text-body:      #374151;
  --atyp-text-soft:      #6b7280;
  --atyp-text-faint:     #9ca3af;
  --atyp-text:           #1a2332;
  --atyp-muted:          #64748b;

  /* Neutral background scale */
  --atyp-bg-page:        #f4f6f8;
  --atyp-bg-muted:       #eef1f4;
  --atyp-bg-surface:     #ffffff;
  --atyp-border:         #e2e8f0;
  --atyp-border-strong:  #cbd5e1;

  /* Dark hero gradient */
  --atyp-hero-gradient-dark: linear-gradient(
    128deg,
    #020617 0%, #0c1929 38%, #0e3a4a 68%, #164e63 100%
  );
  /* Case-study / project gradient */
  --atyp-hero-gradient-case: linear-gradient(
    120deg,
    #0f2942 0%, #134e4a 45%, #155e75 100%
  );

  /* Icon tile gradient */
  --atyp-icon-surface: linear-gradient(155deg, #6d7ea3 0%, #94a3c8 100%);

  /* Semantic */
  --atyp-success: #22c55e;
  --atyp-warning: #f59e0b;
  --atyp-danger:  #ef4444;
  --atyp-info:    #0ea5e9;

  /* Type — families */
  --atyp-font-hero:    "Inter", "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --atyp-font-heading: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --atyp-font-body:    "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --atyp-font-serif:   "Noto Serif", Georgia, "Times New Roman", serif;
  --atyp-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type — semantic sizes */
  --atyp-fs-hero:       clamp(1.85rem, 4vw,  2.75rem);
  --atyp-fs-display:    clamp(2.25rem, 5vw,  3.5rem);
  --atyp-fs-section:    clamp(1.6rem,  3vw,  2.15rem);
  --atyp-fs-card:       1.05rem;
  --atyp-fs-lead:       1.1rem;
  --atyp-fs-body:       1rem;
  --atyp-fs-small:      0.9rem;
  --atyp-fs-meta:       0.8rem;
  --atyp-fs-micro:      0.7rem;

  --atyp-lh-tight:      1.08;
  --atyp-lh-snug:       1.3;
  --atyp-lh-normal:     1.5;
  --atyp-lh-relaxed:    1.65;

  --atyp-hero-title-weight:   600;
  --atyp-hero-title-tracking: -0.02em;
  --atyp-eyebrow-tracking:    0.12em;

  /* Spacing scale */
  --atyp-space:    1.25rem;
  --atyp-space-1:  0.25rem;
  --atyp-space-2:  0.5rem;
  --atyp-space-3:  0.75rem;
  --atyp-space-4:  1rem;
  --atyp-space-5:  1.25rem;
  --atyp-space-6:  1.5rem;
  --atyp-space-8:  2rem;
  --atyp-space-10: 2.5rem;
  --atyp-space-12: 3rem;
  --atyp-space-16: 4rem;
  --atyp-space-20: 5rem;

  /* Layout container */
  --atyp-max:      1180px;
  --atyp-max-prose: 42rem;
  --atyp-gutter:   calc(var(--atyp-space) * 1.25);

  /* Radii */
  --atyp-radius-sm:   8px;
  --atyp-radius:      14px;
  --atyp-radius-lg:   20px;
  --atyp-radius-pill: 999px;

  /* Shadow / elevation */
  --atyp-shadow-xs:   0 1px 2px  rgba(15, 23, 42, 0.04);
  --atyp-shadow-sm:   0 2px 12px rgba(15, 23, 42, 0.05);
  --atyp-shadow-md:   0 4px 24px rgba(15, 23, 42, 0.06);
  --atyp-shadow-lg:   0 10px 40px rgba(2, 6, 23, 0.18);
  --atyp-shadow-cta:  0 8px 24px rgba(14, 165, 233, 0.35);
  --atyp-shadow-cta-dark: 0 8px 24px rgba(45, 212, 191, 0.35);

  /* Motion */
  --atyp-ease:        cubic-bezier(0.2, 0.75, 0.2, 1);
  --atyp-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --atyp-dur-fast:    160ms;
  --atyp-dur-base:    220ms;
  --atyp-dur-slow:    400ms;
  --atyp-dur-hero:    9s;

  /* Z scale */
  --atyp-z-base:    1;
  --atyp-z-sticky:  100;
  --atyp-z-overlay: 800;
  --atyp-z-modal:   900;
  --atyp-z-toast:   1000;
  --atyp-z-header:  10000;
}

/* ============================================================
   Element defaults
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { font-family: var(--atyp-font-body); -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--atyp-font-body);
  font-size: var(--atyp-fs-body);
  line-height: var(--atyp-lh-normal);
  color: var(--atyp-text-body);
  background: #fff;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--atyp-font-heading);
  color: var(--atyp-text-heading);
  letter-spacing: var(--atyp-hero-title-tracking);
  margin: 0 0 0.5em;
  line-height: var(--atyp-lh-snug);
}

h1 { font-size: var(--atyp-fs-hero);    font-weight: var(--atyp-hero-title-weight); line-height: var(--atyp-lh-tight); }
h2 { font-size: var(--atyp-fs-section); font-weight: 600; }
h3 { font-size: 1.2rem;                 font-weight: 600; }
h4 { font-size: 1rem;                   font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--atyp-text-soft); }

p   { margin: 0 0 1rem; color: var(--atyp-text-body); }

a   { color: var(--atyp-cta-blue); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--atyp-cta-blue-hover); }

code, kbd, samp {
  font-family: var(--atyp-font-mono);
  font-size: 0.9em;
  background: var(--atyp-bg-muted);
  border-radius: 4px;
  padding: 0.08em 0.35em;
}

.atyp-eyebrow {
  font-family: var(--atyp-font-heading);
  font-size: var(--atyp-fs-micro);
  font-weight: 600;
  letter-spacing: var(--atyp-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--atyp-text-soft);
}

.atyp-gradient-text {
  background: var(--atyp-logo-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}