/* =========================================================================
   Bâbbi Guimarães — Design System
   Light Institutional Configuration
   ========================================================================= */

/* ---- WEBFONT IMPORTS -------------------------------------------------------
   ABC Diatype is a commercial typeface (Dinamo). For this design system we
   substitute with Hanken Grotesk — the closest open-source neutral grotesque
   on Google Fonts with Thin/Light weights and editorial proportions.
   Body: Inter (open-source, exact match).
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@200;300;400;500&family=Inter:wght@300;400;500&display=swap');

:root {
  /* === ACCENT (single chromatic identity) === */
  --accent:              #1F3B2E;  /* British racing green — primary CTA, focus ring */
  --accent-soft:         #2D4A3A;  /* CTA hover */
  --accent-trace:        rgba(31, 59, 46, 0.08); /* badge/chip ground */
  --accent-deep:         #142A20;  /* accent-coloured text on light */

  /* === LIGHT SURFACES === */
  --light-platinum:      #FFFFFF;  /* elevated cards, modals, inputs */
  --light-porcelain:     #F8FAFD;  /* PAGE BASE — porcelain off-white */
  --light-powder:        #E5EDF5;  /* alternate sections, hover fills */
  --light-stone:         #D8D6DF;  /* dividers, internal borders */
  --light-charcoal:      #2E3338;  /* banner + footer only */

  /* === LIGHT TEXT === */
  --light-ink:           #061B31;  /* primary text on light */
  --light-slate:         #50617A;  /* secondary text */
  --light-ghost:         #64748D;  /* tertiary, captions, placeholders */
  --light-ivory:         #EBE7E1;  /* primary text on charcoal */
  --light-lead:          #9A938B;  /* secondary text on charcoal */

  /* === TYPE FAMILIES === */
  --font-display:        'Hanken Grotesk', 'ABC Diatype', 'GT America', ui-sans-serif, system-ui, sans-serif;
  --font-ui:             'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* === TYPE SCALE (size / leading / tracking) === */
  --text-caption:        12px;  --leading-caption:    1.45;  --tracking-caption:    0.02em;
  --text-body-sm:        14px;  --leading-body-sm:    1.5;   --tracking-body-sm:    0.005em;
  --text-body:           16px;  --leading-body:       1.55;  --tracking-body:       0;
  --text-subheading:     20px;  --leading-subheading: 1.4;   --tracking-subheading: -0.005em;
  --text-heading-sm:     24px;  --leading-heading-sm: 1.3;   --tracking-heading-sm: -0.01em;
  --text-heading:        36px;  --leading-heading:    1.15;  --tracking-heading:    -0.02em;
  --text-heading-lg:     56px;  --leading-heading-lg: 1.05;  --tracking-heading-lg: -0.025em;
  --text-display:        80px;  --leading-display:    1.0;   --tracking-display:    -0.03em;

  /* === WEIGHTS === maximum allowed: 500 */
  --weight-thin:         200;
  --weight-light:        300;
  --weight-regular:      400;
  --weight-medium:       500;

  /* === SPACING (base 4px) === */
  --spacing-4:    4px;   --spacing-8:   8px;   --spacing-12:  12px;  --spacing-16:  16px;
  --spacing-20:   20px;  --spacing-24:  24px;  --spacing-28:  28px;  --spacing-32:  32px;
  --spacing-36:   36px;  --spacing-40:  40px;  --spacing-48:  48px;  --spacing-60:  60px;
  --spacing-64:   64px;  --spacing-80:  80px;  --spacing-96:  96px;  --spacing-128: 128px;

  /* === LAYOUT === */
  --page-max-width:      1200px;
  --section-gap:         96px;
  --section-gap-lg:      128px;
  --content-padding-x:   48px;
  --nav-height:          64px;
  --banner-height:       40px;
  --card-padding-sm:     20px;
  --card-padding-md:     28px;
  --element-gap:         12px;

  /* === RADIUS === */
  --radius-sharp:  1px;
  --radius-sm:     4px;   /* buttons, inputs, tags */
  --radius-md:     6px;   /* cards */
  --radius-lg:     8px;   /* image containers, panels */
  --radius-xl:    16px;   /* modals, drawers */

  /* === SHADOWS === always low opacity, never coloured === */
  --shadow-sm:    rgba(23, 23, 23, 0.06) 0px 3px 6px 0px;
  --shadow-md:    rgba(23, 23, 23, 0.08) 0px 15px 35px 0px;
  --shadow-lg:    rgba(50, 50, 93, 0.12) 0px 16px 32px 0px;
  --shadow-focus: 0 0 0 3px rgba(31, 59, 46, 0.25);

  /* === MOTION === all ease-out, no overshoot === */
  --transition-fast:   150ms ease-out;
  --transition-std:    200ms ease-out;
  --transition-enter:  500ms ease-out;
}

/* =========================================================================
   SEMANTIC TYPE CLASSES
   Use these as the public type API. Do not hand-set font-size/line-height
   on body content — pick a semantic class.
   ========================================================================= */

.bg-porcelain { background: var(--light-porcelain); }
.bg-platinum  { background: var(--light-platinum); }
.bg-powder    { background: var(--light-powder); }
.bg-charcoal  { background: var(--light-charcoal); }

/* --- Body / UI ----------------------------------------------------------- */
.t-caption,
.t-body-sm,
.t-body,
.t-subheading {
  font-family: var(--font-ui);
  color: var(--light-ink);
  font-feature-settings: "ss01", "cv11";
  font-variant-numeric: tabular-nums;
}

.t-caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--weight-regular);
  color: var(--light-ghost);
}

.t-body-sm {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  font-weight: var(--weight-regular);
}

.t-body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: var(--weight-regular);
  color: var(--light-slate);
}

.t-subheading {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--weight-medium);
  color: var(--light-ink);
}

/* --- Display / Headings -------------------------------------------------- */
.t-heading-sm,
.t-heading,
.t-heading-lg,
.t-display {
  font-family: var(--font-display);
  color: var(--light-ink);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

.t-heading-sm {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--weight-regular);
}

.t-heading {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-regular);
}

.t-heading-lg {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  font-weight: var(--weight-light);
}

.t-display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-light);
}

/* --- Institutional micro-label (all caps, tracked) ----------------------- */
.t-eyebrow {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.4;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--light-slate);
}

/* --- On dark (charcoal) surfaces ----------------------------------------- */
.on-charcoal { color: var(--light-ivory); }
.on-charcoal .t-body,
.on-charcoal .t-body-sm,
.on-charcoal .t-caption { color: var(--light-lead); }
.on-charcoal .t-eyebrow { color: var(--light-ivory); }

/* --- Semantic element defaults (optional opt-in scope) -------------------- */
.ds-prose h1 { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-display);    line-height: var(--leading-display);    letter-spacing: var(--tracking-display);    color: var(--light-ink); }
.ds-prose h2 { font-family: var(--font-display); font-weight: var(--weight-light); font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); color: var(--light-ink); }
.ds-prose h3 { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-heading);    line-height: var(--leading-heading);    letter-spacing: var(--tracking-heading);    color: var(--light-ink); }
.ds-prose h4 { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); color: var(--light-ink); }
.ds-prose p  { font-family: var(--font-ui);      font-weight: var(--weight-regular); font-size: var(--text-body);       line-height: var(--leading-body);       color: var(--light-slate); margin: 0 0 var(--spacing-16); }
.ds-prose a  { color: var(--light-ink); text-decoration: none; border-bottom: 1px solid var(--light-stone); transition: border-color var(--transition-fast); }
.ds-prose a:hover { border-color: var(--accent); }

/* --- Rules / dividers ---------------------------------------------------- */
.hr {
  border: 0;
  height: 1px;
  background: var(--light-stone);
  margin: var(--spacing-48) 0;
}

/* =========================================================================
   COMPONENT PRIMITIVES
   ========================================================================= */

/* Primary CTA */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent);
  color: var(--light-platinum);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  padding: 12px 24px;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-std);
}
.btn-primary:hover { background: var(--accent-soft); }
.btn-primary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* Secondary CTA */
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  color: var(--light-ink);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  padding: 11px 23px;          /* −1px to compensate 1px border */
  border: 1px solid var(--light-ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-std), color var(--transition-std);
}
.btn-secondary:hover { background: var(--light-powder); }
.btn-secondary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Ghost link */
.link-ghost {
  font-family: var(--font-ui);
  color: var(--light-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}
.link-ghost:hover { border-bottom-color: currentColor; }
.link-ghost.is-accent { color: var(--accent); }

/* Tag / chip */
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-ui);
  font-size: 12px; line-height: 1;
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-trace);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
}

/* Card */
.card {
  background: var(--light-platinum);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-std);
}
.card:hover { box-shadow: var(--shadow-md); }

/* Form input */
.input {
  display: block; width: 100%;
  font-family: var(--font-ui);
  font-size: var(--text-body);
  color: var(--light-ink);
  background: var(--light-platinum);
  border: 1px solid var(--light-stone);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  transition: border-color var(--transition-std), box-shadow var(--transition-std);
}
.input::placeholder { color: var(--light-ghost); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }