/* =============================================================
   RedPanda — Colors & Type tokens
   Source: Manual de Identidad de Marca RedPanda (preliminar)
   Fonts: Sora (headlines), Inter (body) — Google Fonts
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

@font-face {
  font-family: 'Sora';
  src: url('fonts/Sora-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Sora-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@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;
}

:root {
  /* -------- Brand palette (from brand manual) -------- */
  --rp-orange:        #F45A1F; /* RedPanda Orange — primary, CTAs, accents */
  --rp-orange-600:    #DC4D17; /* hover / pressed states */
  --rp-orange-200:    #FBD3C0; /* tinted backgrounds, badges */
  --rp-orange-50:     #FDEEE6; /* very soft fill */

  --rp-terracota:     #B84A2E; /* Terracota Strategy — depth, secondary fills */
  --rp-terracota-700: #8E371F;

  --rp-cream:         #F5F0E8; /* Cream Canvas — primary background, editorial */
  --rp-cream-200:     #EDE6D8; /* card hairline / divider on cream */
  --rp-cream-warm:    #FBF7F0; /* warmer cream variant for surfaces */

  --rp-cacao:         #2D1810; /* Deep Cacao — text on cream, outlines */
  --rp-cacao-800:     #3A2218;
  --rp-cacao-600:     #5E4136; /* fg-2 on cream */
  --rp-cacao-400:     #8F7A6E; /* fg-3 on cream */

  --rp-forest:        #1F3D36; /* Forest Intelligence — data, dashboards, strategic */
  --rp-forest-700:    #16302B;

  --rp-dark-ink:      #1F232B; /* official dark institutional bg */
  --rp-deep-black:    #111111; /* wordmark / high contrast */
  --rp-white:         #FFFFFF;

  /* Sparse semantic accents (use sparingly) */
  --rp-success:       #2F7A5A;
  --rp-warning:       #C98712;
  --rp-danger:        #B84A2E; /* reuses terracota */
  --rp-info:          #1F3D36;

  /* -------- Semantic surface tokens — light (default) -------- */
  --bg:               var(--rp-cream);
  --bg-elevated:      #FBF7F0;       /* slightly warmer surface */
  --bg-sunken:        #EDE6D8;
  --bg-inverse:       var(--rp-dark-ink);

  --fg-1:             var(--rp-cacao);     /* primary body */
  --fg-2:             var(--rp-cacao-600); /* secondary */
  --fg-3:             var(--rp-cacao-400); /* muted */
  --fg-inverse:       var(--rp-cream);

  --accent:           var(--rp-orange);
  --accent-fg:        #FFFFFF;
  --accent-soft:      var(--rp-orange-50);

  --line:             rgba(45,24,16,0.10);
  --line-strong:      rgba(45,24,16,0.20);

  /* -------- Type families -------- */
  --font-display:     'Sora', 'Space Grotesk', system-ui, sans-serif;
  --font-body:        'Inter', 'Manrope', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -------- Type scale (modular, 1.25 ratio @ 16px base) -------- */
  --fs-display:       64px;   /* hero */
  --fs-h1:            48px;
  --fs-h2:            36px;
  --fs-h3:            28px;
  --fs-h4:            22px;
  --fs-h5:            18px;
  --fs-body-lg:       18px;
  --fs-body:          16px;
  --fs-body-sm:       14px;
  --fs-caption:       12px;
  --fs-overline:      11px;

  --lh-tight:         1.08;
  --lh-snug:          1.2;
  --lh-normal:        1.4;
  --lh-relaxed:       1.55;
  --lh-loose:         1.7;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;

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

  /* -------- Radii — rounded with precise cuts (per brand voice) -------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* -------- Elevation — soft, warm, low-spread -------- */
  --shadow-1: 0 1px 2px rgba(45,24,16,0.06), 0 0 0 1px rgba(45,24,16,0.04);
  --shadow-2: 0 2px 6px rgba(45,24,16,0.06), 0 8px 24px -8px rgba(45,24,16,0.10);
  --shadow-3: 0 4px 12px rgba(45,24,16,0.08), 0 18px 40px -12px rgba(45,24,16,0.14);
  --shadow-focus: 0 0 0 3px rgba(244,90,31,0.30);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* -------- Motion — ordered, never bouncy -------- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-med:  220ms;
  --dur-slow: 360ms;
}

/* Dark / institutional surface mode — opt in via class */
[data-theme="dark"] {
  --bg:          var(--rp-dark-ink);
  --bg-elevated: #262B35;
  --bg-sunken:   #16191F;
  --bg-inverse:  var(--rp-cream);

  --fg-1:        #F2EDE4;
  --fg-2:        #C9C2B6;
  --fg-3:        #8C8478;
  --fg-inverse:  var(--rp-cacao);

  --line:        rgba(245,240,232,0.12);
  --line-strong: rgba(245,240,232,0.22);

  --accent-soft: rgba(244,90,31,0.16);
}

/* =============================================================
   Semantic element styles — drop-in defaults
   ============================================================= */

html { font-family: var(--font-body); font-size: 16px; color: var(--fg-1); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; line-height: var(--lh-relaxed); }

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

.display { font-family: var(--font-display); font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.025em; }
.eyebrow { font-size: var(--fs-overline); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 600; color: var(--rp-orange); }

p { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; text-wrap: pretty; }
.lead { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-1); }
small, .small { font-size: var(--fs-body-sm); }
.caption { font-size: var(--fs-caption); color: var(--fg-3); }

a { color: var(--rp-orange); text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--rp-orange-600); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }
code { background: var(--bg-sunken); padding: 2px 6px; border-radius: var(--radius-xs); color: var(--rp-cacao-800); }

strong, b { font-weight: 600; color: var(--fg-1); }
em { font-style: italic; }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-8) 0; }