/* Aixia Design System V7, foundations as exported by Claude Design.
   Only Regular and Bold of the display face are shipped; the page uses no other weights. */

@font-face {
  font-family: "MADE Evolve Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/MADEEvolveSans-Regular.otf") format("opentype");
}
@font-face {
  font-family: "MADE Evolve Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/MADEEvolveSans-Bold.otf") format("opentype");
}



/* ==========================================================================
   Aixia Design System — Foundations
   Source: Grafisk Manual_AIXIA_V7.pdf (official brand manual)
   ========================================================================== */

:root {
  /* --- Core palette (manual: "primarily black and white") --- */
  --aixia-ink:          #000000;  /* PMS Black C · CMYK 0 0 0 100 */
  --aixia-paper:        #FFFFFF;  /* PMS 000 C */

  /* --- Complement (preferred color after B&W) --- */
  --aixia-blue:         #78A0B3;  /* "Scandinavian Blue" · PMS 120-11 C · RGB 120 160 179 */

  /* --- Accent (sparingly, for lift/highlight) --- */
  --aixia-purple:       #56529F;  /* PMS 99-7 C  · RGB 86 82 159 */
  --aixia-pink:         #E84BD1;  /* PMS 88-6 C  · RGB 232 75 209 */

  /* --- Symbol mark (reserved for standalone brand mark) --- */
  --aixia-symbol-orange:#F18A3F;

  /* --- Forbidden (documented so tools can warn) --- */
  /*  ✗ Pantone 186 C or any similar red — explicitly banned. */

  /* --- Neutral scale (derived from ink/paper — for UI chrome only) --- */
  --aixia-ink-92:       #141414;
  --aixia-ink-80:       #333333;
  --aixia-ink-64:       #5C5C5C;   /* secondary text */
  --aixia-ink-48:       #858585;   /* tertiary text / placeholders */
  --aixia-ink-24:       #C2C2C2;   /* dividers / disabled borders */
  --aixia-ink-12:       #E0E0E0;   /* subtle dividers */
  --aixia-ink-06:       #F0F0F0;   /* surface tint / hover on paper */
  --aixia-ink-03:       #F7F7F7;   /* off-white section */

  /* --- Semantic foreground --- */
  --fg-1:               var(--aixia-ink);         /* headings, body */
  --fg-2:               var(--aixia-ink-64);      /* secondary copy, captions */
  --fg-3:               var(--aixia-ink-48);      /* tertiary, placeholders */
  --fg-on-dark:         var(--aixia-paper);
  --fg-muted-on-dark:   rgba(255, 255, 255, 0.72);

  /* --- Semantic background --- */
  --bg-1:               var(--aixia-paper);       /* default surface */
  --bg-2:               var(--aixia-ink-03);      /* section fill */
  --bg-3:               var(--aixia-ink-06);      /* card / input */
  --bg-inverse:         var(--aixia-ink);         /* dark sections, footer */
  --bg-accent-blue:     var(--aixia-blue);
  --bg-accent-blue-tint:#EAF0F3;                  /* 12% blue over paper */

  /* --- Borders --- */
  --border-1:           rgba(0, 0, 0, 0.08);      /* subtle divider */
  --border-2:           rgba(0, 0, 0, 0.16);      /* card border */
  --border-strong:      #000000;                  /* intentional 1px black rule */
  --border-on-dark:     rgba(255, 255, 255, 0.16);

  /* --- Focus --- */
  --focus-ring:         0 0 0 2px var(--aixia-blue);
  --focus-offset:       2px;

  /* --- Shadows (manual: minimal / flat-first) --- */
  --shadow-0:           none;
  --shadow-1:           0 1px 3px rgba(0, 0, 0, 0.06);    /* card resting */
  --shadow-2:           0 10px 30px rgba(0, 0, 0, 0.08);  /* floating menu */
  --shadow-hero:        0 40px 80px rgba(0, 0, 0, 0.18);  /* large lift, sparingly */

  /* --- Radii --- */
  --radius-0:           0;          /* images, heroes, dividers */
  --radius-1:           4px;        /* buttons, cards */
  --radius-2:           8px;        /* media panels, larger cards */
  --radius-pill:        999px;      /* tags, filter chips */

  /* --- Spacing scale (4px grid) --- */
  --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:            80px;
  --space-10:           96px;
  --space-11:           120px;
  --space-12:           160px;

  /* --- Layout --- */
  --container-max:      1440px;
  --container-wide:     1280px;
  --container-narrow:   960px;
  --container-reading:  720px;
  --page-pad-mobile:    24px;
  --page-pad-desktop:   80px;
  --nav-height:         72px;
  --nav-height-mobile:  60px;

  /* --- Motion --- */
  --ease-out:           cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-std:           cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --dur-fast:           150ms; /* @kind other */
  --dur-base:           250ms; /* @kind other */
  --dur-slow:           500ms; /* @kind other */

  /* ------------------------------------------------------------------
     TYPOGRAPHY
       Display/brand voice: MADE Evolve Sans (matches the round,
         geometric character of the aixia wordmark).
       Body/UI: Helvetica (per brand manual) — Helvetica Neue → Arial.
     ------------------------------------------------------------------ */
  --font-sans:          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display:       "MADE Evolve Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:          ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fw-regular:         400; /* @kind font */
  --fw-medium:          500; /* @kind font */
  --fw-bold:            700; /* @kind font */

  /* Type scale — desktop; use clamp for fluid */
  --fs-display-1:       clamp(48px, 7vw, 96px); /* @kind font */
  --fs-display-2:       clamp(40px, 5.5vw, 72px); /* @kind font */
  --fs-h1:              clamp(36px, 4.5vw, 56px); /* @kind font */
  --fs-h2:              clamp(28px, 3.2vw, 40px); /* @kind font */
  --fs-h3:              24px; /* @kind font */
  --fs-h4:              20px; /* @kind font */
  --fs-preheadline:     13px;   /* Bold, tracked @kind font */
  --fs-body-lg:         18px; /* @kind font */
  --fs-body:            16px; /* @kind font */
  --fs-body-sm:         14px; /* @kind font */
  --fs-fine:            13px;   /* Oblique @kind font */
  --fs-caption:         12px; /* @kind font */

  --lh-tight:           1.05; /* @kind font */
  --lh-snug:            1.2; /* @kind font */
  --lh-normal:          1.5; /* @kind font */
  --lh-loose:           1.6; /* @kind font */
  --lh-body:            1.55; /* @kind font */

  --tracking-tight:     -0.02em; /* @kind font */
  --tracking-normal:    0; /* @kind font */
  --tracking-wide:      0.04em; /* @kind font */
  --tracking-uppercase: 0.08em; /* @kind font */
}

/* ==========================================================================
   Base element styles — import this file and get sensible defaults.
   ========================================================================== */

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

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
}

/* Display */
.aixia-display-1 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.aixia-display-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

/* Headings */
h1, .aixia-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);      /* manual: headlines use Regular */
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-5);
}
h2, .aixia-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}
h3, .aixia-h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}
h4, .aixia-h4 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}

/* Pre-headline — manual: Helvetica Bold */
.aixia-preheadline {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-preheadline);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-uppercase);
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 var(--space-3);
}

/* Body */
p, .aixia-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.aixia-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
}
.aixia-body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

/* Fine print — manual: Helvetica Oblique */
.aixia-fine {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--fs-fine);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

/* Caption */
.aixia-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-2);
  text-transform: uppercase;
}

/* Links */
a, .aixia-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity var(--dur-fast) var(--ease-std);
}
a:hover, .aixia-link:hover {
  opacity: 0.7;
}

/* Inline code (not part of brand but useful for dev docs) */
code, .aixia-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-1);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.aixia-container      { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--page-pad-desktop); }
.aixia-container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--page-pad-desktop); }
.aixia-container-reading { max-width: var(--container-reading); margin: 0 auto; padding: 0 var(--page-pad-desktop); }

.aixia-on-dark  { color: var(--fg-on-dark); background: var(--bg-inverse); }
.aixia-on-blue  { color: var(--fg-on-dark); background: var(--aixia-blue); }

.aixia-rule      { border: 0; border-top: 1px solid var(--border-strong); margin: 0; }
.aixia-rule-soft { border: 0; border-top: 1px solid var(--border-1); margin: 0; }

@media (max-width: 768px) {
  .aixia-container,
  .aixia-container-narrow,
  .aixia-container-reading {
    padding: 0 var(--page-pad-mobile);
  }
}