/* =========================================================
   SOMOS DIGITAL — Foundations
   colors_and_type.css
   v1.0 — Mayo 2026
   ========================================================= */

/* -------- TYPOGRAPHY ----------
   Inter variable font, served locally from /fonts.
   Both upright and italic ship the opsz + wght axes.
-------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('../fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('../fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- COLOR — BASE ---------- */
  --sd-black:        #0A0A0A;   /* dominant background / text */
  --sd-off-white:    #FAFAFA;   /* dominant background on light */
  --sd-white:        #FFFFFF;

  /* ---------- COLOR — GRADIENT (logo accent) ---------- */
  --sd-red:          #FF3D2E;   /* gradient start */
  --sd-magenta:      #E91E63;   /* gradient end / solid accent */
  --sd-gradient:     linear-gradient(135deg, #FF3D2E 0%, #E91E63 100%);
  --sd-gradient-soft: linear-gradient(135deg, rgba(255,61,46,0.12) 0%, rgba(233,30,99,0.12) 100%);

  /* ---------- COLOR — GREYS ---------- */
  --sd-grey-bg:      #F5F5F5;   /* light surface */
  --sd-grey-ui:      #D1D5DB;   /* text on dark / UI elements */
  --sd-grey-text:    #6B7280;   /* secondary body */
  --sd-grey-dark:    #374151;   /* dark grey */

  /* hairlines on dark and light */
  --sd-line-dark:    rgba(255,255,255,0.10);
  --sd-line-light:   rgba(10,10,10,0.08);

  /* ---------- SEMANTIC — LIGHT MODE (default) ---------- */
  --bg:              var(--sd-off-white);
  --bg-elev:         var(--sd-white);
  --bg-muted:        var(--sd-grey-bg);
  --fg:              var(--sd-black);
  --fg-muted:        var(--sd-grey-text);
  --fg-strong:       var(--sd-black);
  --fg-inverse:      var(--sd-off-white);
  --line:            var(--sd-line-light);
  --accent:          var(--sd-magenta);
  --accent-grad:     var(--sd-gradient);

  /* ---------- TYPE — FAMILY ---------- */
  --font-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace;

  /* ---------- TYPE — SCALE (desktop) ---------- */
  --fs-hero:    120px;
  --fs-h1:      96px;
  --fs-h2:      64px;
  --fs-h3:      40px;
  --fs-h4:      28px;
  --fs-lg:      20px;
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;

  /* ---------- TYPE — WEIGHTS ---------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- TYPE — LINE HEIGHT ---------- */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.65;

  /* ---------- TYPE — TRACKING ---------- */
  --tr-tight:   -0.03em;
  --tr-snug:    -0.015em;
  --tr-normal:  0;
  --tr-wide:    0.12em;   /* eyebrow / uppercase labels */

  /* ---------- SPACING (8pt base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  80px;
  --sp-10: 120px;

  /* ---------- LAYOUT ---------- */
  --container-max: 1280px;
  --container-pad-x: 80px;
  --section-pad-y:   120px;

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 6px;     /* buttons */
  --r-md: 8px;     /* buttons (alt) */
  --r-lg: 12px;    /* cards */
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-none: none;
  --shadow-1: 0 1px 3px rgba(10,10,10,0.05);
  --shadow-2: 0 4px 16px rgba(10,10,10,0.06);
  --shadow-3: 0 12px 40px rgba(10,10,10,0.10);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
}

/* ---------- DARK MODE / "BLACK CANVAS" ---------- */
.sd-dark, [data-sd-theme="dark"] {
  --bg:         var(--sd-black);
  --bg-elev:    #141414;
  --bg-muted:   #1A1A1A;
  --fg:         var(--sd-off-white);
  --fg-muted:   var(--sd-grey-ui);
  --fg-strong:  var(--sd-white);
  --fg-inverse: var(--sd-black);
  --line:       var(--sd-line-dark);
}

/* ---------- MOBILE TYPE OVERRIDES ---------- */
@media (max-width: 768px) {
  :root {
    --fs-hero:  56px;
    --fs-h1:    44px;
    --fs-h2:    40px;
    --fs-h3:    28px;
    --fs-h4:    22px;
    --section-pad-y:   80px;
    --container-pad-x: 24px;
  }
}

/* =========================================================
   SEMANTIC ELEMENTS
   ========================================================= */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hero — used once per page, full-bleed claim */
.sd-hero, h1.sd-hero {
  font-family: var(--font-sans);
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-strong);
  text-wrap: balance;
}

/* H1 / H2 / H3 / H4 — section hierarchy */
h1, .sd-h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
}

h2, .sd-h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}

h3, .sd-h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
}

h4, .sd-h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

/* Body */
.sd-lead, p.sd-lead {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}
p, .sd-body {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
}
.sd-caption {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
}

/* Eyebrow — small uppercase label, often above an h2 */
.sd-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Gradient text — for hero numerals, the "S", key claims */
.sd-grad-text {
  background: var(--sd-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Mono — only for data, tickers, code */
code, .sd-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Utility: container */
.sd-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad-x);
  padding-right: var(--container-pad-x);
}