/* Dataico Brand Tokens — authoritative */

/* =========================================================
   @font-face declarations — resolve to ./fonts/ sibling of
   this file. Keep tokens.css and fonts/ adjacent when
   copying this skill into a consuming project.
   ========================================================= */

/* Safiro ships in Medium (500) ONLY. Do NOT remap 600/700 to
   this file — let a heavier weight fall back to Space Grotesk
   via the family stack if it is ever requested. */
@font-face {
  font-family: 'Safiro';
  src: url('./fonts/Safiro-Medium.woff2') format('woff2'),
       url('./fonts/Safiro-Medium.woff')  format('woff'),
       url('./fonts/Safiro-Medium.otf')   format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Satoshi — full weight range (variable axis + 5 static cuts). */
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('./fonts/Satoshi-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   CSS custom properties — complete token set.
   ========================================================= */
:root {
  /* ---------- Coral scale (1 lightest → 9 darkest) ----------
     Coral 5 is the brand coral; 4 and 6 are the allowed adjacent
     tints for UI states (hover/pressed). 1–3 and 7–9 are for
     editorial and data-viz only, never for states. */
  --coral-1: #FFE7E6;
  --coral-2: #F7AFAC;
  --coral-3: #F3918D;
  --coral-4: #F0746F;
  --coral-5: #ED5650;
  --coral-6: #CF4741;
  --coral-7: #B13833;
  --coral-8: #932824;
  --coral-9: #751915;

  /* ---------- Gris scale (1 lightest → 9 darkest, plus 50 mid) ----------
     Gris 2 = mist (brand), Gris 4 = gray (brand), Gris 8 = charcoal (brand).
     Gris 50 is the only mid-value neutral between 4 and 6. */
  --gris-1:  #F7F7F7;
  --gris-2:  #F1F1F1;
  --gris-3:  #E6E6E6;
  --gris-4:  #D5D6D7;
  --gris-50: #ADADAE;
  --gris-6:  #9E9E9E;
  --gris-7:  #575757;
  --gris-8:  #333333;
  --gris-9:  #1D1D1D;

  /* ---------- Dark (inverse-theme surfaces) ----------
     Used to paint strong/dark backgrounds with calibrated steps. */
  --dark:     #232323;
  --dark--10: #3C3C3C;
  --dark--20: #404040;
  --dark--25: #ADADAE;

  /* ---------- Accents (editorial / data-viz only) ----------
     Never used for CTAs, text, or UI states. Reserved for
     illustration, charts, and graphic compositions where an
     additional hue is needed. */
  --accent-blue:    #62EFFF;
  --accent-lime-2:  #9DDD05;
  --accent-lime:    #D2FF55;
  --accent-lime--1: #F4FFC7;
  --accent-yellow:  #DDCB05;

  /* ---------- Brand aliases (four-color system) ----------
     Rojo Coral   — Coral     — CMYK 69·60·56·66
     Gris Oscuro  — Charcoal  — CMYK  0·74·55·0
     Gris Neutro  — Gray      — CMYK 19·13·14·0
     Gris Claro   — Mist      — CMYK  7·5·5·0 */
  --brand-coral:    var(--coral-5);
  --brand-charcoal: var(--gris-8);
  --brand-gray:     var(--gris-4);
  --brand-mist:     var(--gris-2);
  --brand-white:    #FFFFFF;

  /* ---------- Semantic surfaces ---------- */
  --bg-default: var(--brand-mist);
  --bg-surface: var(--brand-white);
  --bg-strong:  var(--brand-charcoal);
  --bg-accent:  var(--brand-coral);

  /* ---------- Semantic text ---------- */
  --text-default: var(--brand-charcoal);
  --text-muted:   rgba(51, 51, 51, 0.65); /* charcoal @ 65% */
  --text-inverse: var(--brand-mist);
  --text-accent:  var(--brand-coral);

  /* ---------- Borders / focus / overlay ---------- */
  --border-soft:   var(--brand-gray);
  --border-strong: var(--brand-charcoal);
  --focus-ring:    var(--brand-coral);
  --overlay-scrim: rgba(51, 51, 51, 0.48);

  /* ---------- Typography families ---------- */
  --font-display: 'Safiro', 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Satoshi', 'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Font sizes ---------- */
  --fs-display-xl: 2rem;      /* 32px */
  --fs-display-lg: 1.625rem;  /* 26px */
  --fs-title-md:   1.125rem;  /* 18px */
  --fs-body-md:    1rem;      /* 16px */
  --fs-body-sm:    0.875rem;  /* 14px */
  --fs-caption:    0.75rem;   /* 12px */
  --fs-numeric-xl: 3rem;      /* 48px */
  --fs-numeric-lg: 2rem;      /* 32px */

  /* ---------- Line heights ---------- */
  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* ---------- Weights ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ---------- Spacing scale (base 8) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;
  --space-11: 96px;

  /* ---------- Radius ---------- */
  --r-none: 0;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-chip: 14px;
  --r-card: 20px;
  --r-pill: 999px;
  --r-full: 9999px;

  /* ---------- Elevation / shadow ---------- */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

  /* ---------- Stroke ---------- */
  --stroke-thin:    1px;
  --stroke-regular: 1.5px;

  /* ---------- Grid ---------- */
  --grid-max:      1280px;
  --grid-gutter-d: 24px;
  --grid-gutter-t: 16px;
  --grid-gutter-m: 16px;
}

/* =========================================================
   Element defaults — brand-primitive typography, numeric
   treatments, chip/pill base, focus, and utilities. No
   component rules here.
   ========================================================= */

html,
body {
  background: var(--bg-default);
  color: var(--text-default);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — Safiro @ 500 ONLY. Never synthesize heavier weights. */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-default);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-default);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-title-md);
  line-height: var(--lh-tight);
  font-weight: 500;
  color: var(--text-default);
  margin: 0;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-normal);
  color: var(--text-default);
  margin: 0;
}

.body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

small {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* ---------- Mono ---------- */
code,
pre,
.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ---------- Numeric treatments (Safiro Medium, tabular) ---------- */
.numeric-xl,
.numeric-lg,
.price {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.numeric-xl {
  font-size: var(--fs-numeric-xl);
  line-height: 1;
}

.numeric-lg {
  font-size: var(--fs-numeric-lg);
  line-height: 1.1;
}

.price {
  font-size: var(--fs-body-md);
  line-height: 1;
}

/* ---------- Chip base (brand primitive, not component) ---------- */
.chip,
[data-chip] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-chip);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: 1;
  font-weight: var(--fw-medium);
  border: var(--stroke-thin) solid transparent;
  background: transparent;
  color: var(--text-default);
}

.chip--outlined {
  background: transparent;
  color: var(--text-default);
  border-color: var(--border-soft);
}

.chip--filled-coral {
  background: var(--brand-coral);
  color: var(--brand-white);
  border-color: var(--brand-coral);
}

.chip--filled-charcoal {
  background: var(--brand-charcoal);
  color: var(--text-inverse);
  border-color: var(--brand-charcoal);
}

/* ---------- Pill base (status indicator primitive) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: 1;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- Surface / brand-color utilities ---------- */
.surface {
  background: var(--bg-surface);
  color: var(--text-default);
}

.surface-strong {
  background: var(--bg-strong);
  color: var(--text-inverse);
}

.coral {
  background: var(--brand-coral);
  color: var(--brand-white);
}

.charcoal {
  background: var(--brand-charcoal);
  color: var(--text-inverse);
}