/* ============================================================
   CEBRALE — Design System foundations
   Colors + Typography tokens
   Hyperbaric medicine & rehabilitation · Salvador/BA
   ============================================================ */

/* ---- Webfonts (collateral typefaces — NOT the official logo font) ---- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Jura:wght@400;500;600;700&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

:root {
  /* ============ BRAND COLOR PRIMITIVES ============ */

  /* Deep blue — the "Brazil map" core. Authority, depth, pressure. */
  --blue-900: #1E2A8F;   /* deepest — map gradient top */
  --blue-700: #2F57A5;   /* mid */
  --blue-600: #316FA0;   /* map gradient base / logo accent dots */
  --blue-500: #438DBF;   /* light blue */
  --blue-400: #4CA3CA;   /* cyan-leaning light blue */

  /* Green — the "DNA" strand. Life, recovery, oxygenation. */
  --green-700: #38A54B;
  --green-600: #57B352;
  --green-550: #58B339;  /* logo accent dot green */
  --green-400: #8DCD5F;
  --green-300: #A3D765;

  /* Ink & neutrals */
  --ink:        #322D2F;  /* brand ink — wordmark color */
  --ink-cool:   #242A38;  /* practical text (slightly cool/navy) */
  --slate-600:  #4A5366;
  --slate-400:  #7A8499;
  --slate-300:  #A9B2C2;
  --line:       #E2E9F1;  /* hairline / borders */
  --line-soft:  #EEF3F8;

  /* Light backgrounds */
  --bg:         #FCFEFF;  /* page top */
  --bg-2:       #F3F7FB;  /* page base / sunken panels */
  --surface:    #FFFFFF;  /* cards */

  /* ============ SEMANTIC COLOR ============ */
  --fg-1: var(--ink-cool);     /* primary text */
  --fg-2: var(--slate-600);    /* secondary text */
  --fg-3: var(--slate-400);    /* tertiary / captions */
  --fg-on-dark: #EEF4FB;

  --accent:        var(--blue-600);   /* primary interactive */
  --accent-strong: var(--blue-900);
  --accent-cyan:   var(--blue-400);
  --accent-green:  var(--green-600);

  --focus-ring: color-mix(in oklch, var(--blue-500) 55%, transparent);

  /* Status (derived to harmonize with the brand, not invented hues) */
  --ok:    var(--green-700);
  --info:  var(--blue-500);
  --warn:  #C98A2B;
  --danger:#C2453F;

  /* ============ SIGNATURE GRADIENT (blue → cyan → green, 135°) ============ */
  --grad-signature: linear-gradient(135deg, #1E2A8F 0%, #316FA0 38%, #4CA3CA 64%, #57B352 100%);
  --grad-signature-soft: linear-gradient(135deg, #2F57A5 0%, #438DBF 50%, #8DCD5F 100%);
  /* Map fill — vertical, as seen in the emblem */
  --grad-map: linear-gradient(180deg, #2F57A5 0%, #316FA0 60%, #438DBF 100%);
  /* Subtle page wash */
  --grad-wash: linear-gradient(180deg, #FCFEFF 0%, #F3F7FB 100%);

  /* ============ TYPE FAMILIES ============ */
  --font-display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif; /* titles */
  --font-label:   'Jura', 'Eurostile', monospace;                    /* eyebrows / technical numerals */
  --font-body:    'Instrument Sans', system-ui, sans-serif;          /* body / data */

  /* ============ TYPE SCALE ============ */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;

  --leading-tight: 1.05;
  --leading-snug:  1.18;
  --leading-body:  1.55;

  /* ============ SPACING (4px base) ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ============ RADII ============ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ============ ELEVATION ============ */
  --shadow-sm: 0 1px 2px rgba(30,42,80,0.06), 0 1px 3px rgba(30,42,80,0.05);
  --shadow-md: 0 4px 10px rgba(30,42,80,0.07), 0 10px 24px rgba(30,42,80,0.07);
  --shadow-lg: 0 10px 24px rgba(30,42,80,0.08), 0 28px 60px rgba(30,42,80,0.12);
  --shadow-focus: 0 0 0 4px var(--focus-ring);
  --ring-tick: inset 0 0 0 1px var(--line); /* hairline ring used on gauge motifs */

  /* ============ MOTION ============ */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

.cbr-eyebrow {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-600);
}

.cbr-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

.cbr-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, var(--text-2xl));
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

.cbr-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.cbr-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-2);
}

.cbr-data {
  font-family: var(--font-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

.cbr-numeral {
  font-family: var(--font-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

.cbr-gradient-text {
  background: var(--grad-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}