/* =========================================================================
   Aus'm Keller — Design System
   Color + Type tokens and semantic CSS variables
   ========================================================================= */

@font-face {
  font-family: "Neue Metana";
  src: url("fonts/NeueMetana-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-v13-latin-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Other Manrope weights fall back to Google Fonts via this import.
   The 500 weight above takes priority because we have a local file for it. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap");

:root {
  /* ---------- Brand colors (raw tokens) --------------------------------
     The brand is strictly monochrome with ONE accent.
       --keller-ink     primary foreground (logo black, near-pure black)
       --keller-paper   primary surface (slightly warm off-white)
       --keller-violet  the only brand accent — Aus'm Keller violet
     Do NOT introduce a third color into chrome. */
  --keller-ink:        #1d1d1b;
  --keller-paper:      #f6f6f6;
  --keller-violet:     #5800ff;   /* the only accent — use sparingly       */

  /* Tints derived from the accent for hover/press/highlights */
  --keller-violet-90:  rgba(88,   0, 255, 0.90);
  --keller-violet-12:  rgba(88,   0, 255, 0.12);
  --keller-violet-06:  rgba(88,   0, 255, 0.06);

  /* Neutrals — derived from --keller-ink with controlled tints */
  --fg-1:              #1d1d1b;   /* Body text                              */
  --fg-2:              #4a4a47;   /* Secondary text                         */
  --fg-3:              #7a7a76;   /* Muted text, captions                   */
  --fg-4:              #b3b2ad;   /* Disabled / placeholder                 */
  --fg-on-ink:         #f6f6f6;   /* Text on dark surfaces                  */

  --bg-1:              #f6f6f6;   /* Page background                        */
  --bg-2:              #ffffff;   /* Card surface                           */
  --bg-3:              #ececea;   /* Subtle section variant (gray paper)    */
  --bg-ink:            #1d1d1b;   /* Inverted surface                       */

  /* Borders */
  --border-soft:       rgba(29, 29, 27, 0.10);
  --border-medium:     rgba(29, 29, 27, 0.20);
  --border-strong:     #1d1d1b;

  /* Semantic colors (status). Used rarely — Keller leans monochrome.
     Note: --c-danger maps to ink (errors get weight, not a new color);
     --c-info maps to the violet accent. */
  --c-success:         #1d1d1b;
  --c-warning:         #1d1d1b;
  --c-danger:          #1d1d1b;
  --c-info:            #5800ff;

  /* ---------- Type families -------------------------------------------- */
  --font-display:      "Neue Metana", "Manrope", system-ui, sans-serif;
  --font-sans:         "Manrope", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:         ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type weights --------------------------------------------- */
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* ---------- Type sizes (clamped for fluid scaling) ------------------- */
  --fs-display-1:      clamp(56px, 8vw, 128px);  /* @kind font */
  --fs-display-2:      clamp(40px, 6vw, 88px);   /* @kind font */
  --fs-h1:             clamp(36px, 4.4vw, 64px);  /* @kind font */
  --fs-h2:             clamp(28px, 3.2vw, 44px);  /* @kind font */
  --fs-h3:             clamp(22px, 2.2vw, 30px);  /* @kind font */
  --fs-h4:             18px;   /* @kind font */
  --fs-body-lg:        20px;   /* @kind font */
  --fs-body:           17px;   /* @kind font */
  --fs-body-sm:        15px;   /* @kind font */
  --fs-caption:        13px;   /* @kind font */
  --fs-overline:       12px;   /* @kind font */

  /* Line heights */
  --lh-tight:          1.04;   /* @kind font */
  --lh-snug:           1.18;   /* @kind font */
  --lh-normal:         1.5;    /* @kind font */
  --lh-relaxed:        1.65;   /* @kind font */

  /* Letter spacing */
  --tracking-tight:    -0.02em;  /* @kind font */
  --tracking-normal:   0;        /* @kind font */
  --tracking-wide:     0.04em;   /* @kind font */
  --tracking-overline: 0.12em;   /* @kind font */  /* For ALL-CAPS labels */

  /* ---------- Spacing (8px grid) --------------------------------------- */
  --space-0:           0;
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           24px;
  --space-6:           32px;
  --space-7:           48px;
  --space-8:           64px;
  --space-9:           96px;
  --space-10:          128px;

  /* ---------- Radii ---------------------------------------------------- */
  --radius-xs:         4px;
  --radius-sm:         8px;        /* chips, inputs                       */
  --radius-md:         12px;
  --radius-lg:         16px;       /* cards, image containers             */
  --radius-pill:       999px;      /* CTAs                                */
  --radius-circle:     50%;        /* logo, avatars                       */

  /* ---------- Shadows -------------------------------------------------- */
  --shadow-none:       none;
  --shadow-hover:      0 24px 32px -16px rgba(29, 29, 27, 0.08);
  --shadow-card:       0 8px 24px -12px rgba(29, 29, 27, 0.10);
  --shadow-popover:    0 16px 40px -20px rgba(29, 29, 27, 0.25);

  /* ---------- Motion --------------------------------------------------- */
  --ease-out:          cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --duration-fast:     120ms;  /* @kind other */
  --duration-base:     200ms;  /* @kind other */
  --duration-slow:     320ms;  /* @kind other */

  /* ---------- Layout --------------------------------------------------- */
  --container-max:     1200px;
  --container-pad:     clamp(20px, 5vw, 120px);
}

/* ==========================================================================
   Semantic element styles — these mirror the website's rhythm
   ========================================================================== */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-regular);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-regular);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: var(--weight-bold);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: var(--weight-bold);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-weight: var(--weight-medium);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  font-weight: var(--weight-medium);
}

.overline,
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--fg-2);
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: var(--lh-normal);
}

code {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--bg-3);
  border-radius: var(--radius-xs);
  padding: 1px 6px;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-out);
}
a:hover {
  border-bottom-color: currentColor;
}