/* Skeps Design Tokens
   Sourced from Skeps brand presentation template (2025).
   Importado do Claude Design — projeto "Skeps Design System". */

@import url('fonts.css');

:root {
  /* ── Brand greens ──────────────────────────── */
  --skeps-lime-100: #b1ffde;
  --skeps-lime-200: #0ff2a7;
  --skeps-lime-300: #38e6ba;       /* tertiary */
  --skeps-lime-400: #00cd8a;       /* secondary */
  --skeps-lime-500: #00cb88;       /* hero green */
  --skeps-lime-600: #00ab73;       /* primary, "Verde Limão" */
  --skeps-lime-700: #00a973;

  /* ── Brand blues / sage ────────────────────── */
  --skeps-sage:    #377a97;        /* "Verde Sálvia" — contrast on lime */
  --skeps-blue-100: #63abff;
  --skeps-blue-300: #317fd9;
  --skeps-blue-500: #2d517d;
  --skeps-blue-700: #165297;
  --skeps-blue-900: #0a315e;
  --skeps-navy:    #2b405f;

  /* ── Status / chart-only ───────────────────── */
  --skeps-positive: var(--skeps-lime-500);
  --skeps-warning: #ff9900;
  --skeps-danger:  #d0610c;

  /* ── Neutrals ──────────────────────────────── */
  --skeps-black:   #000000;
  --skeps-ink:     #111111;
  --skeps-charcoal:#333333;        /* dk1 */
  --skeps-graphite:#434343;        /* "Cinza Chumbo" — boxes on dark */
  --skeps-slate:   #595959;
  --skeps-gray:    #666666;
  --skeps-mute:    #b3b3b3;
  --skeps-line:    #e6e6e6;
  --skeps-fog:     #f1f1f1;        /* lt2 */
  --skeps-mist:    #f3f3f3;        /* "Cinza Claro" — boxes on light */
  --skeps-white:   #ffffff;

  /* ── Semantic surfaces ─────────────────────── */
  --bg-canvas:    var(--skeps-white);
  --bg-canvas-dark: var(--skeps-black);
  --bg-card:      var(--skeps-mist);
  --bg-card-dark: var(--skeps-graphite);
  --bg-accent:    var(--skeps-lime-600);
  --fg-default:   var(--skeps-charcoal);
  --fg-muted:     var(--skeps-slate);
  --fg-on-accent: var(--skeps-black);   /* black text on lime — never black on green that's TOO dark */
  --fg-on-dark:   var(--skeps-white);

  /* ── Typography ────────────────────────────── */
  --font-display: 'Poppins', system-ui, sans-serif;   /* títulos / subtítulos */
  --font-body:    'Roboto', system-ui, sans-serif;    /* corpo de texto */
  --font-numeral: 'Bebas Neue', 'Poppins', sans-serif; /* big numbers */

  /* type ramp — slide-deck scale (1920×1080) */
  --t-display:  72px;     /* 60pt cover */
  --t-h1:       48px;     /* section title */
  --t-h2:       32px;     /* slide title — Poppins SemiBold */
  --t-h3:       22px;     /* subtitle — Poppins Regular */
  --t-body:     18px;     /* Roboto Regular */
  --t-small:    14px;
  --t-micro:    10px;     /* tracking labels (e.g. OFFICIAL BLIP PARTNER) */
  --t-bignum:   120px;    /* Bebas Neue */

  /* ── Radii ─────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ── Shadow / elevation ────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --shadow-md: 0 8px 24px -8px rgba(0,40,30,.18), 0 2px 6px rgba(0,40,30,.08);
  --shadow-lg: 0 24px 60px -20px rgba(0,40,30,.28), 0 8px 20px -8px rgba(0,40,30,.14);
  --shadow-glow: 0 0 0 6px rgba(0,205,138,.14);

  /* ── Spacing scale ─────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ── Motion ────────────────────────────────── */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

/* ── Base resets used across the system ───────── */
.skeps-base {
  font-family: var(--font-body);
  color: var(--fg-default);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.skeps-base h1, .skeps-base h2, .skeps-base h3 {
  font-family: var(--font-display);
  letter-spacing: -.01em;
  margin: 0;
}
.skeps-bignum {
  font-family: var(--font-numeral);
  letter-spacing: .01em;
}

/* utility */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .42em;
  text-transform: uppercase;
}
.lime-underline {
  background-image: linear-gradient(transparent 60%, var(--skeps-lime-300) 60%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 .12em;
}