/* Contora design tokens. Every colour, size and curve on the site comes from here.
   Palette: Studio Dark, from Brand/Contora_Brand_Guide. */

@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-display.woff2?v=2.0.5") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../assets/fonts/fraunces-display-italic.woff2?v=2.0.5") format("woff2");
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Studio Dark: the interface and the brand */
  --graphite: #0E0F12;
  --panel: #16181D;
  --elevated: #1E2127;
  --hairline: #2A2D34;
  --text: #F2F3F5;
  --muted: #8A8F9A;
  --ignition: #FF5A1F;
  --cyan: #7CE7FF;

  /* Derived from the palette above, never new hues */
  --text-soft: #C1C4CB;                                            /* body copy on graphite, from the brand guide */
  --ignition-deep: color-mix(in srgb, var(--ignition) 82%, var(--graphite)); /* pressed */
  --ignition-haze: color-mix(in srgb, var(--ignition) 16%, transparent);
  --text-faint: color-mix(in srgb, var(--text) 8%, transparent);
  --graphite-veil: color-mix(in srgb, var(--graphite) 72%, transparent);
  --focus: var(--ignition);
  --shadow-lift: 0 40px 80px -30px color-mix(in srgb, var(--graphite) 94%, transparent),
                 0 12px 24px -12px color-mix(in srgb, var(--graphite) 80%, transparent);
  --mask: var(--graphite); /* masks only read alpha; any opaque token works */

  /* Vessel finishes: product colours. Swatches and imagery only, never interface. */
  --finish-matte-white: #EDEBE6;
  --finish-sand: #D8CBB0;
  --finish-sage: #8E9A7E;
  --finish-moss: #6B7556;
  --finish-slate: #7E8388;
  --finish-navy: #1F3553;
  --finish-oxblood: #5A1F22;
  --finish-umber: #4A3F2C;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 4rem);   /* 44 → 64 */
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2rem);         /* 28 → 32 */
  --fs-h3: 1.375rem;                                      /* 22 */
  --fs-body: 1rem;                                        /* 16 */
  --fs-small: 0.875rem;                                   /* 14 */
  --fs-caps: 0.75rem;                                     /* 12 caps */
  --lh-body: 1.6;
  --lh-display: 1.04;
  --measure: 66ch;
  --track-caps: 0.22em;
  --track-display: -0.02em;

  /* Space, 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;  --s-10: 144px;
  --section-space: clamp(80px, 9vw, 140px);   /* the one section rhythm, top and bottom */

  /* Layout: the one page container and its 12-column grid */
  --page-max: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --col-gap: clamp(16px, 2vw, 32px);

  /* Shape */
  --r-s: 8px;
  --r-m: 14px;
  --r-pill: 999px;

  /* Motion. Slower out than in; springs for things you touch. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.089 24.3%, 1.093 26.2%, 1.085 28.5%, 1.024 36.4%, 1.001 40.5%, 0.99 44.9%, 0.996 58%, 1);
  --d-fast: 160ms;
  --d-med: 420ms;
  --d-slow: 900ms;
  --d-hero: 1400ms;
  --stagger: 70ms;

  /* Layers */
  --z-nav: 50;
  --z-menu: 60;
  --z-dialog: 80;
  --z-preloader: 100;
}