/* ============================================================
   Mercuriosity — Colors & Type
   Silver-dominant, deep-violet accent. Premium, restrained.
   ============================================================ */

/* ---------- Fonts ----------------------------------------------------------
   Brand typeface: **Inter** (display + body). Provided by the user as TTF
   files in /fonts/. Mono companion: **system mono** (`ui-monospace`) —
   no licensed Inter Mono exists, and a system mono keeps the brand
   register cohesive on every platform.
   When this file is imported from a subdirectory, the relative font URLs
   below still resolve because they are anchored to the CSS file location.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ====================================================================
     COLOR TOKENS
     ==================================================================== */

  /* Quicksilver — the lead. Mercuriosity's own colour. */
  --mc-quicksilver-50:  #F4F4F7;
  --mc-quicksilver-100: #E7E7EC;
  --mc-quicksilver-200: #CFCFD9;
  --mc-quicksilver-300: #B3B3C0;
  --mc-quicksilver-400: #9C9CAA;
  --mc-quicksilver-500: #8C8C9E;  /* brand primary */
  --mc-quicksilver-600: #6E6E82;
  --mc-quicksilver-700: #54546A;
  --mc-quicksilver-800: #3A3A4E;
  --mc-quicksilver-900: #25253A;

  /* Deep violet — the accent. Headers, CTAs, brand voice in paid surfaces. */
  --mc-violet-50:  #F2EBF8;
  --mc-violet-100: #E2D2F0;
  --mc-violet-200: #C7A8E0;
  --mc-violet-300: #A77BCE;
  --mc-violet-400: #8550B9;
  --mc-violet-500: #5B2A8A;  /* brand secondary */
  --mc-violet-600: #4A2272;
  --mc-violet-700: #391B59;
  --mc-violet-800: #281340;
  --mc-violet-900: #170B27;

  /* Lilac — soft fields, dividers, callouts. */
  --mc-lilac-50:  #FAF6FE;
  --mc-lilac-100: #F1E8FA;
  --mc-lilac-200: #E4D6F2;
  --mc-lilac-300: #D4C5E0;  /* brand tertiary */
  --mc-lilac-400: #BFAACD;
  --mc-lilac-500: #A88FB8;

  /* Off-white background — pale lilac undertone (avoids clinical kilte). */
  --mc-bg:          #FAF8FC;
  --mc-bg-elevated: #FFFFFF;
  --mc-bg-sunken:   #F3EFF8;

  /* Body text — near-black with violet undertone. */
  --mc-ink:        #2A2733;
  --mc-ink-muted:  #54546A;
  --mc-ink-quiet:  #8C8C9E;
  --mc-ink-faint:  #B3B3C0;
  --mc-ink-invert: #FAF8FC;

  /* Semantic roles */
  --mc-fg-1: var(--mc-ink);
  --mc-fg-2: var(--mc-ink-muted);
  --mc-fg-3: var(--mc-ink-quiet);
  --mc-fg-4: var(--mc-ink-faint);
  --mc-fg-on-violet: var(--mc-bg);

  --mc-primary:        var(--mc-violet-500);
  --mc-primary-hover:  var(--mc-violet-600);
  --mc-primary-press:  var(--mc-violet-700);

  --mc-accent:         var(--mc-quicksilver-500);
  --mc-accent-hover:   var(--mc-quicksilver-600);

  --mc-line:           color-mix(in srgb, var(--mc-quicksilver-400) 35%, transparent);
  --mc-line-strong:    color-mix(in srgb, var(--mc-quicksilver-600) 45%, transparent);
  --mc-line-violet:    color-mix(in srgb, var(--mc-violet-500) 25%, transparent);

  --mc-success: #2F7A4E;
  --mc-warn:    #B66A1C;
  --mc-danger:  #A82A4A;

  /* Gradients & metals */
  --mc-quicksilver-gradient:
    linear-gradient(140deg, #E7E7EC 0%, #B3B3C0 38%, #54546A 62%, #B3B3C0 100%);
  --mc-violet-quicksilver:
    linear-gradient(135deg, #5B2A8A 0%, #8C8C9E 100%);
  --mc-soft-lilac-wash:
    radial-gradient(at 30% 20%, #F1E8FA 0%, #FAF8FC 55%, #FAF8FC 100%);

  /* ====================================================================
     TYPE TOKENS
     ==================================================================== */

  --mc-font-display: "Inter", "Söhne", "Neue Haas Grotesk Display Pro",
                     system-ui, -apple-system, sans-serif;
  --mc-font-body:    "Inter", "Söhne", system-ui, -apple-system, sans-serif;
  --mc-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --mc-fs-12: 12px;
  --mc-fs-13: 13px;
  --mc-fs-14: 14px;
  --mc-fs-15: 15px;
  --mc-fs-16: 16px;
  --mc-fs-18: 18px;
  --mc-fs-20: 20px;
  --mc-fs-24: 24px;
  --mc-fs-28: 28px;
  --mc-fs-32: 32px;
  --mc-fs-40: 40px;
  --mc-fs-48: 48px;
  --mc-fs-56: 56px;
  --mc-fs-64: 64px;
  --mc-fs-80: 80px;

  --mc-lh-tight: 1.05;
  --mc-lh-snug:  1.18;
  --mc-lh-norm:  1.45;
  --mc-lh-prose: 1.6;

  --mc-tracking-tight:  -0.02em;
  --mc-tracking-snug:   -0.012em;
  --mc-tracking-norm:    0em;
  --mc-tracking-cap:     0.14em;  /* tagline / eyebrows — wide caps */
  --mc-tracking-cap-sm:  0.18em;

  --mc-w-300: 300;
  --mc-w-400: 400;
  --mc-w-500: 500;  /* wordmark weight */
  --mc-w-600: 600;
  --mc-w-700: 700;

  /* ====================================================================
     SPACING / RADII / ELEVATION
     ==================================================================== */
  --mc-sp-1:  4px;
  --mc-sp-2:  8px;
  --mc-sp-3:  12px;
  --mc-sp-4:  16px;
  --mc-sp-5:  20px;
  --mc-sp-6:  24px;
  --mc-sp-8:  32px;
  --mc-sp-10: 40px;
  --mc-sp-12: 48px;
  --mc-sp-16: 64px;
  --mc-sp-20: 80px;
  --mc-sp-24: 96px;
  --mc-sp-32: 128px;

  /* Afgeronde accenten — rounded accents are part of the brand. */
  --mc-r-1: 6px;
  --mc-r-2: 10px;
  --mc-r-3: 14px;
  --mc-r-4: 20px;
  --mc-r-5: 28px;
  --mc-r-pill: 999px;

  /* Shadows — quiet, never theatrical. */
  --mc-shadow-1: 0 1px 2px rgba(42, 39, 51, 0.06),
                 0 1px 1px rgba(42, 39, 51, 0.04);
  --mc-shadow-2: 0 4px 14px rgba(42, 39, 51, 0.07),
                 0 1px 2px rgba(42, 39, 51, 0.04);
  --mc-shadow-3: 0 16px 40px rgba(42, 39, 51, 0.10),
                 0 2px 6px rgba(42, 39, 51, 0.04);
  --mc-shadow-violet: 0 12px 32px rgba(91, 42, 138, 0.18),
                      0 2px 4px rgba(91, 42, 138, 0.10);
  --mc-shadow-inset:  inset 0 1px 0 rgba(255, 255, 255, 0.6),
                      inset 0 -1px 0 rgba(42, 39, 51, 0.04);

  /* Motion — easings + durations. Slow, deliberate. */
  --mc-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --mc-ease-in:  cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --mc-ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --mc-dur-quick: 140ms;
  --mc-dur-base:  220ms;
  --mc-dur-slow:  420ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these instead of raw sizes wherever possible.
   ============================================================ */

.mc-display,
.mc-h1, .mc-h2, .mc-h3, .mc-h4 {
  font-family: var(--mc-font-display);
  color: var(--mc-ink);
  text-wrap: balance;
}

.mc-display {
  font-size: clamp(48px, 6vw, 80px);
  line-height: var(--mc-lh-tight);
  letter-spacing: var(--mc-tracking-tight);
  font-weight: var(--mc-w-500);
}

.mc-h1 {
  font-size: clamp(40px, 4.4vw, 56px);
  line-height: var(--mc-lh-tight);
  letter-spacing: var(--mc-tracking-tight);
  font-weight: var(--mc-w-500);
}

.mc-h2 {
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: var(--mc-lh-snug);
  letter-spacing: var(--mc-tracking-snug);
  font-weight: var(--mc-w-500);
}

.mc-h3 {
  font-size: clamp(22px, 2vw, 28px);
  line-height: var(--mc-lh-snug);
  letter-spacing: var(--mc-tracking-snug);
  font-weight: var(--mc-w-500);
}

.mc-h4 {
  font-size: var(--mc-fs-20);
  line-height: var(--mc-lh-snug);
  font-weight: var(--mc-w-500);
}

.mc-lede {
  font-family: var(--mc-font-body);
  font-size: var(--mc-fs-20);
  line-height: var(--mc-lh-prose);
  color: var(--mc-ink-muted);
  font-weight: var(--mc-w-400);
  text-wrap: pretty;
}

.mc-body {
  font-family: var(--mc-font-body);
  font-size: var(--mc-fs-16);
  line-height: var(--mc-lh-prose);
  color: var(--mc-ink);
  font-weight: var(--mc-w-400);
  text-wrap: pretty;
}

.mc-body-sm {
  font-family: var(--mc-font-body);
  font-size: var(--mc-fs-14);
  line-height: var(--mc-lh-norm);
  color: var(--mc-ink-muted);
}

.mc-meta {
  font-family: var(--mc-font-body);
  font-size: var(--mc-fs-13);
  line-height: var(--mc-lh-norm);
  color: var(--mc-ink-quiet);
}

/* Eyebrow / tagline — wide-tracked caps, the brand's strongest type tic. */
.mc-eyebrow {
  font-family: var(--mc-font-body);
  font-size: var(--mc-fs-12);
  letter-spacing: var(--mc-tracking-cap);
  text-transform: uppercase;
  font-weight: var(--mc-w-500);
  color: var(--mc-ink-quiet);
}

.mc-tagline {
  font-family: var(--mc-font-body);
  font-size: var(--mc-fs-13);
  letter-spacing: var(--mc-tracking-cap);
  text-transform: uppercase;
  font-weight: var(--mc-w-500);
  color: var(--mc-quicksilver-500);
  line-height: 1.6;
}

.mc-wordmark {
  font-family: var(--mc-font-display);
  font-weight: var(--mc-w-500);
  letter-spacing: -0.02em;
  color: var(--mc-violet-500);
  text-transform: lowercase;
}

.mc-mono {
  font-family: var(--mc-font-mono);
  font-size: var(--mc-fs-13);
  letter-spacing: 0;
  color: var(--mc-ink-muted);
}

/* Optional default body — pages can opt-in by adding .mc-page to <body>. */
.mc-page {
  background: var(--mc-bg);
  color: var(--mc-ink);
  font-family: var(--mc-font-body);
  font-size: var(--mc-fs-16);
  line-height: var(--mc-lh-norm);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}