/* ============================================================
   Webgas Design System — Colors & Type
   ============================================================
   Inferred from public webgas.com.br positioning. Substitute
   with official manual values when available.
   ============================================================ */

@import url("fonts/fonts.css");

:root {
  /* ───────── BASE COLOR PALETTE ───────── */

  /* Ink (azul-noite operacional) — base institucional */
  --ink-1000: #050810;
  --ink-900:  #0B1220;   /* primary surface */
  --ink-800:  #11192B;   /* surface-1, cards */
  --ink-700:  #1A2440;   /* surface-2, raised */
  --ink-600:  #243056;
  --ink-500:  #38456E;

  /* Slate (neutros frios para texto e linhas) */
  --slate-50:  #F4F6FB;
  --slate-100: #E5EAF3;
  --slate-200: #C9D1E1;
  --slate-300: #9CA8C2;
  --slate-400: #6F7C9B;
  --slate-500: #4F5C7B;
  --slate-600: #38445E;
  --slate-700: #232C42;

  /* Flame (laranja-chama — referência ao GLP, único acento de calor) */
  --flame-50:  #FFF1E8;
  --flame-100: #FFD9BD;
  --flame-300: #FF9A5C;
  --flame-500: #FF6A1F;   /* PRIMARY brand accent */
  --flame-600: #E8540D;
  --flame-700: #B83E07;

  /* Signal (azul de dado / link / info) */
  --signal-300: #7AA8FF;
  --signal-500: #3D7BFF;
  --signal-600: #295BD4;

  /* Semantic (derivado — revisar com manual oficial) */
  --success-500: #2CC08A;
  --warning-500: #F0B429;
  --danger-500:  #E6483D;

  /* ───────── SEMANTIC TOKENS ───────── */

  --bg:            var(--ink-900);
  --bg-raised:     var(--ink-800);
  --bg-elevated:   var(--ink-700);
  --bg-overlay:    rgba(11, 18, 32, 0.72);

  --surface-0:     var(--ink-900);
  --surface-1:     var(--ink-800);
  --surface-2:     var(--ink-700);

  --fg:            var(--slate-50);
  --fg-1:          var(--slate-50);    /* primary text */
  --fg-2:          var(--slate-200);   /* secondary text */
  --fg-3:          var(--slate-400);   /* tertiary / metadata */
  --fg-mute:       var(--slate-500);

  --line-1:        rgba(201, 209, 225, 0.08);  /* default divider */
  --line-2:        rgba(201, 209, 225, 0.14);  /* hover/focus */
  --line-strong:   rgba(201, 209, 225, 0.22);

  --accent:        var(--flame-500);
  --accent-hover:  var(--flame-600);
  --accent-fg:     #FFFFFF;
  --link:          var(--signal-300);

  --focus-ring:    0 0 0 2px var(--ink-900), 0 0 0 4px var(--flame-500);

  /* ───────── RADII ───────── */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-pill: 999px;

  /* ───────── SHADOWS ───────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);

  /* ───────── SPACING SCALE (4pt base) ───────── */
  --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;
  --s-10: 128px;

  /* ───────── MOTION ───────── */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --dur-1:   80ms;
  --dur-2:  150ms;
  --dur-3:  250ms;

  /* ───────── TYPE FAMILIES ───────── */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ───────── TYPE SCALE ───────── */
  --fs-eyebrow: 12px;
  --fs-meta:    13px;
  --fs-body-s:  14px;
  --fs-body:    16px;
  --fs-body-l:  18px;
  --fs-h6:      18px;
  --fs-h5:      20px;
  --fs-h4:      24px;
  --fs-h3:      32px;
  --fs-h2:      44px;
  --fs-h1:      64px;
  --fs-display: 88px;

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.4;
  --lh-relaxed:  1.6;

  --tr-tight:   -0.02em;
  --tr-display: -0.035em;
  --tr-eyebrow:  0.08em;
}

/* ============================================================
   BASE / SEMANTIC TYPE STYLES
   ============================================================ */

html,
body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

.display,
h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  font-weight: 600;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

.meta {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  color: var(--fg-3);
}

code,
.mono,
kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-2);
}

a {
  color: var(--link);
  text-decoration: none;
  transition: text-decoration-thickness var(--dur-2) var(--ease-out);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration: underline; }

::selection {
  background: var(--flame-500);
  color: #fff;
}