/* ============================================================
   Atypisch — Design Tokens (design system v2, 12-09-2026)
   Colors, type, spacing, radii, shadow, motion. Fonts self-hosted.
   ============================================================ */

/* ---------- 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;       /* hero / header background base */
  --atyp-brand-teal:      #26a69a;
  --atyp-brand-cyan:      #14b8a6;
  --atyp-brand-slate:     #5c6bc0;
  --atyp-brand-royal:     #1e40af;       /* replaces purple in the working palette */
  --atyp-brand-magenta:   #d81b60;
  --atyp-brand-pink:      #e91e63;

  --atyp-logo-gradient: linear-gradient(
    90deg,
    var(--atyp-brand-teal)    0%,
    var(--atyp-brand-slate)  32%,
    #8e24aa 58%,
    var(--atyp-brand-magenta) 82%,
    var(--atyp-brand-pink)  100%
  ); /* @kind color */

  /* Accent / CTA */
  --atyp-teal:           #2dd4bf;       /* CTA on dark */
  --atyp-teal-dark:      #0d9488;
  --atyp-cta-blue:       #0ea5e9;       /* CTA on light */
  --atyp-cta-blue-hover: #0284c7;

  /* ───────── Neutral foreground scale ───────── */
  --atyp-text-heading:   #1f2937;
  --atyp-text-body:      #374151;
  --atyp-text-soft:      #6b7280;
  --atyp-text-faint:     #9ca3af;
  --atyp-text:           #1a2332;       /* deepest body / brand text */
  --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 (used on home + product heroes) */
  --atyp-hero-gradient-dark: linear-gradient(128deg, #020617 0%, #0c1929 38%, #0e3a4a 68%, #164e63 100%); /* @kind color */
  /* Case-study / project gradient */
  --atyp-hero-gradient-case: linear-gradient(120deg, #0f2942 0%, #134e4a 45%, #155e75 100%); /* @kind color */

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

  /* 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 ─────────
     Hero/section titles use clamp() for responsive scaling.    */
  --atyp-fs-hero:       clamp(1.85rem, 4vw,  2.75rem);  /* @kind font */
  --atyp-fs-display:    clamp(2.25rem, 5vw,  3.5rem);   /* @kind font */
  --atyp-fs-section:    clamp(1.6rem,  3vw,  2.15rem);  /* @kind font */
  --atyp-fs-card:       1.05rem;                         /* @kind font */
  --atyp-fs-lead:       1.1rem;                          /* @kind font */
  --atyp-fs-body:       1rem;                            /* @kind font */
  --atyp-fs-small:      0.9rem;                          /* @kind font */
  --atyp-fs-meta:       0.8rem;                          /* @kind font */
  --atyp-fs-micro:      0.7rem;                          /* @kind font */

  --atyp-lh-tight:      1.08;  /* @kind font */
  --atyp-lh-snug:       1.3;   /* @kind font */
  --atyp-lh-normal:     1.5;   /* @kind font */
  --atyp-lh-relaxed:    1.65;  /* @kind font */

  --atyp-hero-title-weight:   600;   /* @kind font */
  --atyp-hero-title-tracking: -0.02em; /* @kind font */
  --atyp-eyebrow-tracking:    0.12em;  /* @kind font */

  /* ───────── Spacing scale ───────── */
  --atyp-space:    1.25rem;          /* base unit */
  --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;        /* @kind spacing */
  --atyp-max-prose: 42rem;        /* @kind spacing */
  --atyp-gutter:   calc(var(--atyp-space) * 1.25); /* @kind spacing */

  /* ───────── Radii ───────── */
  --atyp-radius-sm:   8px;
  --atyp-radius:      14px;       /* default card / panel */
  --atyp-radius-lg:   20px;
  --atyp-radius-pill: 999px;      /* buttons + tags */

  /* ───────── 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); /* @kind other */
  --atyp-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --atyp-dur-fast:    160ms;  /* @kind other */
  --atyp-dur-base:    220ms;  /* @kind other */
  --atyp-dur-slow:    400ms;  /* @kind other */
  --atyp-dur-hero:    9s;      /* @kind other */

  /* ───────── Z scale ───────── */
  --atyp-z-base:    1;    /* @kind other */
  --atyp-z-sticky:  100;  /* @kind other */
  --atyp-z-overlay: 800;  /* @kind other */
  --atyp-z-modal:   900;  /* @kind other */
  --atyp-z-toast:   1000; /* @kind other */
}

/* ============================================================
   Element defaults — semantic mappings
   Use these classes as the canonical hooks for prose.
   ============================================================ */

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: var(--atyp-bg-page);
  margin: 0;
}

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); }
h5 { font-size: 0.95rem; font-weight: 600; }
h6 { font-size: 0.85rem; font-weight: 600; }

p   { margin: 0 0 1rem; color: var(--atyp-text-body); }
.atyp-lead { font-size: var(--atyp-fs-lead); color: var(--atyp-text-soft); line-height: 1.55; }

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;
}

/* Eyebrow / pre-title */
.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-eyebrow--on-dark { color: rgba(248, 250, 252, 0.72); }
.atyp-eyebrow--brand   { color: var(--atyp-teal-dark); }

/* Gradient text utility — the brand wordmark trick */
.atyp-gradient-text {
  background: var(--atyp-logo-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}