/* ============================================================
   FANWARE DESIGN SYSTEM — colors_and_type.css
   Source: Manual de Identidad Visual, Fanware CX
   ============================================================ */

/* Brand fonts — local */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter_18pt-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: 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');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Poppins still from Google Fonts (no local file provided) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ============================================================
   COLOR TOKENS
   ============================================================ */

:root {
  /* --- Primary Palette --- */
  --color-fanware-blue:       #61A9FF;  /* Logo letters, primary buttons, links */
  --color-fanware-deep-blue:  #2A4FAF;  /* Headings, highlighted backgrounds, top bars */
  --color-fanware-navy:       #13326B;  /* Dark backgrounds, headers, key sections */
  --color-fanware-black:      #0B1829;  /* Body text on light backgrounds */
  --color-fanware-light:      #F5F7FB;  /* Page backgrounds, cards, content areas */

  /* --- Secondary / Accent Palette --- */
  --color-insight-gold:       #F0B429;  /* Key metric accents, highlights, icons (≤10% surface) */
  --color-outcome-green:      #27AE60;  /* Positive indicators, high NPS, success states */
  --color-neutral-gray:       #D3D8E3;  /* Dividers, secondary backgrounds, borders */

  /* --- Semantic Aliases --- */
  --color-bg-page:            var(--color-fanware-light);
  --color-bg-dark:            var(--color-fanware-navy);
  --color-bg-mid:             var(--color-fanware-deep-blue);
  --color-bg-card:            #FFFFFF;
  --color-text-primary:       var(--color-fanware-black);
  --color-text-on-dark:       #FFFFFF;
  --color-text-muted:         #6B7A99;
  --color-text-link:          var(--color-fanware-blue);
  --color-border:             var(--color-neutral-gray);
  --color-border-strong:      var(--color-fanware-deep-blue);
  --color-accent:             var(--color-insight-gold);
  --color-success:            var(--color-outcome-green);

  /* --- Interactive / State Colors --- */
  --color-btn-primary-bg:         var(--color-fanware-deep-blue);
  --color-btn-primary-bg-hover:   #1f3d8a;
  --color-btn-primary-text:       #FFFFFF;
  --color-btn-secondary-bg:       transparent;
  --color-btn-secondary-border:   var(--color-fanware-deep-blue);
  --color-btn-secondary-text:     var(--color-fanware-deep-blue);

  /* ============================================================
     TYPOGRAPHY TOKENS
     ============================================================ */

  /* Font families */
  --font-heading:   'Poppins', 'Arial Rounded MT Bold', Arial, sans-serif;
  --font-body:      'Inter', Arial, sans-serif;

  /* Font weights */
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;

  /* Type scale — Digital (px) */
  --text-h1:        38px;
  --text-h2:        26px;
  --text-h3:        20px;
  --text-h4:        17px;
  --text-body:      15px;
  --text-small:     13px;
  --text-label:     11px;
  --text-display:   48px;

  /* Line heights */
  --leading-tight:    1.15;
  --leading-normal:   1.25;
  --leading-relaxed:  1.55;

  /* Letter spacing */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ============================================================
     SPACING TOKENS (8px grid)
     ============================================================ */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */

  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     8px;
  --radius-xl:     16px;
  --radius-full:   9999px;

  /* ============================================================
     SHADOWS
     ============================================================ */

  --shadow-card:    0 2px 8px rgba(19, 50, 107, 0.08);
  --shadow-card-hover: 0 6px 20px rgba(19, 50, 107, 0.14);
  --shadow-modal:   0 16px 40px rgba(11, 24, 41, 0.18);

  /* ============================================================
     ICON STROKE
     ============================================================ */

  --icon-stroke:    1.5px;
  --icon-color:     var(--color-fanware-deep-blue);
  --icon-accent:    var(--color-insight-gold);

  /* ============================================================
     TRANSITIONS
     ============================================================ */

  --transition-fast:    150ms ease;
  --transition-normal:  220ms ease;
  --transition-slow:    350ms ease;
}

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

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
}

h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

small, .text-small {
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
}

.label, label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

a {
  color: var(--color-fanware-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.text-on-dark    { color: var(--color-text-on-dark); }
.text-muted      { color: var(--color-text-muted); }
.text-blue       { color: var(--color-fanware-blue); }
.text-deep-blue  { color: var(--color-fanware-deep-blue); }
.text-gold       { color: var(--color-insight-gold); }
.text-green      { color: var(--color-outcome-green); }

.bg-light        { background-color: var(--color-fanware-light); }
.bg-white        { background-color: #ffffff; }
.bg-navy         { background-color: var(--color-fanware-navy); }
.bg-deep-blue    { background-color: var(--color-fanware-deep-blue); }
.bg-blue         { background-color: var(--color-fanware-blue); }

.font-heading    { font-family: var(--font-heading); }
.font-body       { font-family: var(--font-body); }
.semibold        { font-weight: var(--font-weight-semibold); }
.medium          { font-weight: var(--font-weight-medium); }