/* ============================================================================
   finais. — Design System
   colors_and_type.css

   Single source of truth for all design tokens.
   Derived from the live finais.de website and the Relume brand export.

   Three-tier typography system:
     Display  — Plus Jakarta Sans 700/800  — headings, confident, tight
     Body     — Inter 400/500/600          — copy, airy, readable
     Mono     — JetBrains Mono 400/500     — kickers, labels, data, step numbers

   Accent   : Denim #2563EB (finais blue)
   Ink      : #01040C (near-black, never pure black)
   Schemes  : light (scheme-1), off-white (scheme-2), near-black (scheme-3)
   ========================================================================== */

/* ----------------------------------------------------------------------------
   FONTS — loaded locally from /fonts, do NOT swap for CDN
---------------------------------------------------------------------------- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-800.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500.woff2") format("woff2");
}

/* ============================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {

  /* --------------------------------------------------------------------------
     TYPE FAMILIES
  -------------------------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* --------------------------------------------------------------------------
     DISPLAY TYPE SCALE — Plus Jakarta Sans
     Tight leading, negative tracking. No text-transform at token level;
     UPPERCASE is a component-level decision (not enforced globally).
  -------------------------------------------------------------------------- */
  --display-xl-size:   clamp(48px, 6vw, 80px);
  --display-xl-weight: 800;
  --display-xl-lh:     0.96;
  --display-xl-ls:     -0.03em;

  --display-l-size:    clamp(34px, 4.2vw, 56px);
  --display-l-weight:  800;
  --display-l-lh:      0.98;
  --display-l-ls:      -0.025em;

  --display-m-size:    clamp(24px, 2.8vw, 36px);
  --display-m-weight:  700;
  --display-m-lh:      1.05;
  --display-m-ls:      -0.02em;

  --display-s-size:    clamp(20px, 2vw, 26px);
  --display-s-weight:  700;
  --display-s-lh:      1.1;
  --display-s-ls:      -0.015em;

  /* --------------------------------------------------------------------------
     BODY TYPE SCALE — Inter
  -------------------------------------------------------------------------- */
  --lead-size:   21px;   --lead-weight:   400;  --lead-lh:   1.5;
  --body-size:   17px;   --body-weight:   400;  --body-lh:   1.6;
  --small-size:  15px;   --small-weight:  400;  --small-lh:  1.5;
  --tiny-size:   13px;   --tiny-weight:   400;  --tiny-lh:   1.45;

  /* --------------------------------------------------------------------------
     MONO TYPE SCALE — JetBrains Mono
     Kickers, step numbers, data labels, source citations.
  -------------------------------------------------------------------------- */
  --kicker-size:   12px;   --kicker-weight: 500;  --kicker-ls: 0.18em;
  --label-size:    13px;   --label-weight:  500;  --label-ls:  0.1em;
  --ref-size:      12px;   --ref-weight:    400;  --ref-ls:    0.04em;
  --data-size:     15px;   --data-weight:   500;  --data-ls:   -0.01em;

  /* --------------------------------------------------------------------------
     BRAND BLUE — finais. denim
  -------------------------------------------------------------------------- */
  --blue-50:   #eff6ff;
  --blue-100:  #dbeafe;
  --blue-200:  #bfdbfe;
  --blue-300:  #93c5fd;
  --blue-400:  #60a5fa;
  --blue-500:  #3b82f6;
  --blue-600:  #2563eb;   /* THE brand blue — primary CTA, accent */
  --blue-700:  #1d4ed8;   /* hover state */
  --blue-800:  #1e40af;
  --blue-900:  #1e3a8a;

  /* Semantic aliases */
  --color-brand:       var(--blue-600);
  --color-brand-hover: var(--blue-700);
  --color-brand-light: var(--blue-400);
  --color-brand-tint:  var(--blue-50);

  /* --------------------------------------------------------------------------
     NEUTRALS — blue-tinted, never pure grey
  -------------------------------------------------------------------------- */
  --ink:       #01040c;   /* primary text + scheme-3 background */
  --ink-90:    #1a1d24;
  --ink-70:    #2f333b;
  --ink-50:    #5b5e66;   /* meta, captions */
  --ink-30:    #8e9099;
  --ink-15:    #c4c5ca;   /* hairlines on light bg */
  --ink-08:    #e2e3e6;   /* very soft dividers */

  /* Alpha (for overlays / blends) */
  --ink-a08:   rgba(1, 4, 12, 0.08);
  --ink-a12:   rgba(1, 4, 12, 0.12);
  --ink-a20:   rgba(1, 4, 12, 0.20);
  --ink-a50:   rgba(1, 4, 12, 0.50);

  --white-a08:  rgba(255, 255, 255, 0.08);
  --white-a15:  rgba(255, 255, 255, 0.15);
  --white-a25:  rgba(255, 255, 255, 0.25);
  --white-a60:  rgba(255, 255, 255, 0.60);

  /* --------------------------------------------------------------------------
     SURFACES
  -------------------------------------------------------------------------- */
  --surface-page:   #ffffff;
  --surface-card:   #ffffff;
  --surface-alt:    #f5f6f8;   /* scheme-2, off-white section bg */
  --surface-dark:   #01040c;   /* scheme-3, near-black */
  --surface-dark-2: #0f1117;   /* cards on scheme-3 */

  /* --------------------------------------------------------------------------
     SEMANTIC ROLE TOKENS — default = scheme-1 (light)
     Override with .scheme-2 / .scheme-3 on section wrappers.
  -------------------------------------------------------------------------- */
  --fg-1:       var(--ink);         /* primary text */
  --fg-2:       var(--ink-70);      /* secondary text */
  --fg-muted:   var(--ink-50);      /* captions, meta */
  --fg-faint:   var(--ink-30);      /* weakest legible text */

  --accent:       var(--color-brand);
  --accent-hover: var(--color-brand-hover);

  --bg:         var(--surface-page);
  --surface:    var(--surface-card);
  --surface-2:  var(--surface-alt);
  --border:     var(--ink-a12);

  /* --------------------------------------------------------------------------
     RADIUS — generous and consistent
  -------------------------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* --------------------------------------------------------------------------
     SPACING — 4pt base scale
  -------------------------------------------------------------------------- */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;
  --s6:  32px;
  --s7:  48px;
  --s8:  64px;
  --s9:  96px;
  --s10: 128px;

  /* Layout */
  --container-max: 1280px;
  --gutter:        5%;
  --section-y:     96px;   /* standard section vertical padding */

  /* --------------------------------------------------------------------------
     ELEVATION — blue-tinted shadows (never neutral grey)
  -------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(1, 4, 12, 0.06);
  --shadow-sm: 0 2px 8px rgba(1, 4, 12, 0.08);
  --shadow-md: 0 8px 24px rgba(1, 4, 12, 0.10);
  --shadow-lg: 0 20px 56px rgba(1, 4, 12, 0.13);

  /* The finais. "elevate" button shadow — layered inset */
  --shadow-btn:
    inset 0 -2px 1px 0 var(--ink-a20),
    inset 0 28px 20px 0 rgba(255, 255, 255, 0.06),
    inset 0 1px 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px var(--ink-a12),
    0 1px 3px 0 var(--ink-a12);
  --shadow-btn-hover:
    inset 0 -2px 1px 0 var(--ink-a20),
    inset 0 28px 20px 0 rgba(255, 255, 255, 0.06),
    inset 0 1px 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 0 0 1px var(--ink-a12),
    0 3px 6px 0 var(--ink-a12);

  /* --------------------------------------------------------------------------
     MOTION
  -------------------------------------------------------------------------- */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration: 180ms;
}

/* ============================================================================
   COLOR SCHEMES — wrap each section in one of these classes.
   All descendants inherit fg/bg/accent/border automatically.
   ========================================================================== */

.scheme-1 {
  --bg:       var(--surface-page);
  --surface:  var(--surface-card);
  --fg-1:     var(--ink);
  --fg-2:     var(--ink-70);
  --fg-muted: var(--ink-50);
  --accent:   var(--color-brand);
  --border:   var(--ink-a12);
  background-color: var(--bg);
  color: var(--fg-1);
}

.scheme-2 {
  --bg:       var(--surface-alt);
  --surface:  var(--surface-card);
  --fg-1:     var(--ink);
  --fg-2:     var(--ink-70);
  --fg-muted: var(--ink-50);
  --accent:   var(--color-brand);
  --border:   var(--ink-a12);
  background-color: var(--bg);
  color: var(--fg-1);
}

.scheme-3 {
  --bg:       var(--surface-dark);
  --surface:  var(--surface-dark-2);
  --fg-1:     #ffffff;
  --fg-2:     var(--white-a60);
  --fg-muted: rgba(255, 255, 255, 0.45);
  --accent:   var(--blue-400);
  --border:   var(--white-a15);
  background-color: var(--bg);
  color: var(--fg-1);
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES
   Use these utility classes anywhere. No opinionated resets beyond margin:0.
   ========================================================================== */

/* Display type — Plus Jakarta Sans */
.ds-h1 {
  font-family: var(--font-display);
  font-weight: var(--display-xl-weight);
  font-size: var(--display-xl-size);
  line-height: var(--display-xl-lh);
  letter-spacing: var(--display-xl-ls);
  margin: 0;
}
.ds-h2 {
  font-family: var(--font-display);
  font-weight: var(--display-l-weight);
  font-size: var(--display-l-size);
  line-height: var(--display-l-lh);
  letter-spacing: var(--display-l-ls);
  margin: 0;
}
.ds-h3 {
  font-family: var(--font-display);
  font-weight: var(--display-m-weight);
  font-size: var(--display-m-size);
  line-height: var(--display-m-lh);
  letter-spacing: var(--display-m-ls);
  margin: 0;
}
.ds-h4 {
  font-family: var(--font-display);
  font-weight: var(--display-s-weight);
  font-size: var(--display-s-size);
  line-height: var(--display-s-lh);
  letter-spacing: var(--display-s-ls);
  margin: 0;
}

/* Body type — Inter */
.ds-lead  { font-family: var(--font-body); font-size: var(--lead-size);  font-weight: var(--lead-weight);  line-height: var(--lead-lh); }
.ds-body  { font-family: var(--font-body); font-size: var(--body-size);  font-weight: var(--body-weight);  line-height: var(--body-lh); }
.ds-small { font-family: var(--font-body); font-size: var(--small-size); font-weight: var(--small-weight); line-height: var(--small-lh); }
.ds-tiny  { font-family: var(--font-body); font-size: var(--tiny-size);  font-weight: var(--tiny-weight);  line-height: var(--tiny-lh); }

/* Mono type — JetBrains Mono */
.ds-kicker {
  font-family: var(--font-mono);
  font-size: var(--kicker-size);
  font-weight: var(--kicker-weight);
  letter-spacing: var(--kicker-ls);
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* ● dot prefix — matches Anavio's kicker pattern, in finais. blue */
.ds-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.ds-label { font-family: var(--font-mono); font-size: var(--label-size); font-weight: var(--label-weight); letter-spacing: var(--label-ls); text-transform: uppercase; }
.ds-ref   { font-family: var(--font-mono); font-size: var(--ref-size);   font-weight: var(--ref-weight);   letter-spacing: var(--ref-ls);   color: var(--fg-muted); }
.ds-data  { font-family: var(--font-mono); font-size: var(--data-size);  font-weight: var(--data-weight);  letter-spacing: var(--data-ls); }

code, .mono { font-family: var(--font-mono); }