@import url("../fonts/mona-sans.css");

/* ==========================================================================
   A · Atelier — tokens
   Swiss-editorial evolution of the current brand: white, ink, gold accent,
   hard edges. One typeface (Mona Sans) in several widths.
   Fluid values interpolate between 360px and 1440px viewports.
   ========================================================================== */

:root {
  /* ---------- Primitives ---------- */
  --p-color-white: #ffffff;
  --p-color-stone-50: #f5f5f3;
  --p-color-stone-100: #ecece8;
  --p-color-stone-200: #e2e1dc;
  --p-color-stone-500: #85837b;
  --p-color-stone-600: #66645d;
  --p-color-stone-700: #3d3c38;
  --p-color-ink-900: #161614;
  --p-color-ink-950: #0b0b0a;
  --p-color-gold-100: #f3ebcf;
  --p-color-gold-300: #d4b24c;
  --p-color-gold-500: #856a00;
  --p-color-red-600: #a3261b;
  --p-color-green-600: #2f6b3a;

  --p-font-mona: "Mona Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --p-size-12-13: clamp(0.75rem, 0.7292rem + 0.0926vw, 0.8125rem);
  --p-size-14-15: clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem);
  --p-size-16-18: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --p-size-19-24: clamp(1.188rem, 1.083rem + 0.463vw, 1.5rem);
  --p-size-22-28: clamp(1.375rem, 1.25rem + 0.5556vw, 1.75rem);
  --p-size-24-36: clamp(1.5rem, 1.25rem + 1.111vw, 2.25rem);
  --p-size-34-60: clamp(2.125rem, 1.583rem + 2.407vw, 3.75rem);
  --p-size-44-96: clamp(2.75rem, 1.667rem + 4.815vw, 6rem);
  --p-size-56-136: clamp(3.5rem, 1.833rem + 7.407vw, 8.5rem);

  /* ---------- Semantic: colour ---------- */
  --color-bg: var(--p-color-white);
  --color-bg-subtle: var(--p-color-stone-50);
  --color-surface: var(--p-color-white);
  --color-text: var(--p-color-ink-950);
  --color-text-muted: var(--p-color-stone-600);
  --color-text-subtle: var(--p-color-stone-500);
  --color-border: var(--p-color-stone-200);
  --color-border-strong: var(--p-color-stone-500);
  --color-accent: var(--p-color-gold-500);
  --color-accent-text: var(--p-color-gold-500);
  --color-on-accent: var(--p-color-white);
  --color-focus: var(--p-color-gold-500);
  --color-danger: var(--p-color-red-600);
  --color-success: var(--p-color-green-600);

  --color-bg-inverse: var(--p-color-ink-950);
  --color-bg-inverse-subtle: var(--p-color-ink-900);
  --color-surface-inverse: var(--p-color-ink-900);
  --color-text-inverse: var(--p-color-stone-50);
  --color-text-inverse-muted: #a3a19a;
  --color-text-inverse-subtle: #75736c;
  --color-border-inverse: rgb(255 255 255 / 0.14);
  --color-border-inverse-strong: rgb(255 255 255 / 0.42);
  --color-accent-text-inverse: var(--p-color-gold-300);

  /* ---------- Semantic: type ---------- */
  --font-display: var(--p-font-mona);
  --font-body: var(--p-font-mona);
  --font-label: var(--p-font-mona);

  --type-display: 480 var(--p-size-56-136) / 0.94 var(--font-display);
  --type-display-tracking: -0.05em;

  --type-h1: 480 var(--p-size-44-96) / 0.98 var(--font-display);
  --type-h1-tracking: -0.045em;

  --type-h2: 480 var(--p-size-34-60) / 1.02 var(--font-display);
  --type-h2-tracking: -0.038em;

  --type-h3: 540 var(--p-size-22-28) / 1.2 var(--font-display);
  --type-h3-tracking: -0.02em;

  --type-lead: 450 var(--p-size-19-24) / 1.45 var(--font-body);
  --type-lead-tracking: -0.012em;

  --type-body: 420 var(--p-size-16-18) / 1.6 var(--font-body);
  --type-body-tracking: -0.005em;

  --type-small: 440 var(--p-size-14-15) / 1.5 var(--font-body);

  --type-label: 620 var(--p-size-12-13) / 1.2 var(--font-label);
  --type-label-tracking: 0.06em;
  --type-label-case: uppercase;
  --type-label-stretch: 112%;

  --type-button: 560 0.9375rem / 1 var(--font-body);
  --type-button-tracking: -0.005em;

  --type-nav: 520 0.9375rem / 1 var(--font-body);

  --type-quote: 440 var(--p-size-24-36) / 1.22 var(--font-display);
  --type-quote-tracking: -0.028em;

  /* Wordmark as on the current site and the business cards: Mona Sans Bold, normal width */
  --type-brand: 700 1.125rem / 1 var(--font-display);
  --type-brand-tracking: 0.08em;
  --type-brand-case: uppercase;
  --type-brand-stretch: 100%;

  --type-wordmark: 700 clamp(2.5rem, 10.4vw, 10rem) / 0.85 var(--font-display);
  --type-wordmark-tracking: 0.08em;
  --type-wordmark-case: uppercase;
  --type-wordmark-stretch: 100%;

  /* ---------- Semantic: space & layout ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: clamp(1rem, 0.9167rem + 0.3704vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.333rem + 0.7407vw, 2rem);
  --space-l: clamp(2rem, 1.667rem + 1.481vw, 3rem);
  --space-xl: clamp(3rem, 2.333rem + 2.963vw, 5rem);
  --space-2xl: clamp(4.5rem, 3.333rem + 5.185vw, 8rem);
  --space-3xl: clamp(6rem, 4rem + 8.889vw, 12rem);

  --section-space: clamp(5rem, 3.667rem + 5.926vw, 9rem);
  --gutter: clamp(1.25rem, 0.8333rem + 1.852vw, 2.5rem);
  --grid-gap: clamp(1rem, 0.8333rem + 0.7407vw, 1.5rem);
  --measure: 62ch;

  --container-max: 1360px;
  --container-content: 1130px;
  --container-narrow: 760px;
  --header-height: clamp(4rem, 3.833rem + 0.7407vw, 4.5rem);

  /* ---------- Semantic: shape & motion ---------- */
  --radius-media: 0;
  --radius-control: 0;
  --radius-surface: 0;

  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 280ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-hover: ease;

  --z-header: 50;
}

/* ---------- Component tokens (re-resolve on inverse surfaces) ---------- */
:root, .is-inverse {
  --btn-height: 48px;
  --btn-pad-x: 22px;
  --btn-radius: 0;
  --btn-height-lg: 56px;
  --btn-pad-x-lg: 28px;

  --field-height: 52px;
  --field-border-widths: 0 0 1px 0;
  --field-radius: 0;

  --header-bg: rgb(255 255 255 / 0.9);
  --nav-gap: clamp(1.25rem, 0.6rem + 1.2vw, 2rem);
  --nav-indicator: var(--color-accent);

  --em-style: normal;
  --em-color: var(--color-text-muted);

  --segmented-pad: 0;
  --segmented-bg: transparent;
  --segmented-border: 1px solid var(--color-border-strong);
  --segmented-height: 44px;
  --segmented-thumb: var(--color-text);
  --segmented-active-text: var(--color-bg);

  --choice-radius: 0;
  --quotes-progress: var(--color-accent);
  --logo-height: 40px;
}