/* ============================================================
   GC Generando Capacidades — Design Tokens
   colors_and_type.css
   Palette refined from the Orygen infographic (June 2026):
   a multi-accent system — deep navy + blue + olive/lime greens
   + orange — used as solid rotating accents, not gradients.
   ============================================================ */

/* Google Fonts — Poppins + Ubuntu + Urbanist */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,700&family=Ubuntu:ital,wght@0,400;0,700;1,400&family=Urbanist:wght@700;800&display=swap');

/* ============================================================
   BASE COLOR PALETTE
   ============================================================ */
:root {
  /* --- Navy / Slate (primary dark + text scale) --- */
  --gc-navy:           #13234B;   /* Deepest navy — headers, big numbers, footer */
  --gc-navy-mid:       #1A2C58;   /* Navy — decorative / secondary dark */
  --gc-slate:          #33405A;   /* Slate — body text on light */
  --gc-slate-muted:    #7C8AA5;   /* Muted slate — captions, secondary */
  --gc-slate-light:    #AFBACC;   /* Light slate — disabled / faint text */

  /* --- Blue (primary accent) --- */
  --gc-blue:           #1B7FC4;   /* Primary blue accent */
  --gc-blue-dark:      #136099;   /* Hover / active blue */
  --gc-blue-light:     #E3EEF8;   /* Blue tint — backgrounds */

  /* --- Greens (brand + GC Social) --- */
  --gc-green:          #6A9A1F;   /* Olive green — GC Social primary accent */
  --gc-green-dark:     #557C19;   /* Dark green — labels, monetary values */
  --gc-lime:           #A8D44D;   /* Bright lime — highlight / chart accent */
  --gc-green-light:    #EFF6E2;   /* Green tint — panels */
  --gc-green-tint:     #DFEEC4;   /* Stronger green tint */

  /* --- Orange (accent) --- */
  --gc-orange:         #F39C2C;   /* Orange accent — tags, highlights */
  --gc-orange-dark:    #D17F12;   /* Hover orange */
  --gc-orange-light:   #FDEFD8;   /* Orange tint */

  /* --- Cream (legacy warm bg, retained) --- */
  --gc-cream:          #EFEAD7;
  --gc-cream-dark:     #E2DAC0;

  /* --- Neutrals --- */
  --gc-white:          #FFFFFF;
  --gc-off-white:      #F7F9FB;   /* Off-white — card panels */
  --gc-gray-50:        #EFF2F6;   /* Light gray panel */
  --gc-gray-100:       #E3E8EF;   /* Border / divider */
  --gc-gray-200:       #CFD8E6;   /* Stronger border / light-blue gray */
  --gc-black:          #0B1326;

  /* --- Accent rotation (signature multi-accent set) ---
     Use these in order to color sequential stat cards,
     category bands, list bullets, etc. */
  --gc-accent-1: var(--gc-green);   /* olive */
  --gc-accent-2: var(--gc-blue);    /* blue */
  --gc-accent-3: var(--gc-navy);    /* navy */
  --gc-accent-4: var(--gc-orange);  /* orange */

  /* --- Gradients (subtle, used sparingly) --- */
  --gc-gradient:   linear-gradient(135deg, #13234B 0%, #1B7FC4 100%); /* @kind color */
  --gc-gradient-h: linear-gradient(90deg, #1B7FC4 0%, #6A9A1F 100%); /* @kind color */

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

  /* Text */
  --color-text-primary:    var(--gc-navy);
  --color-text-body:       var(--gc-slate);
  --color-text-secondary:  var(--gc-slate-muted);
  --color-text-muted:      var(--gc-slate-light);
  --color-text-on-dark:    var(--gc-white);
  --color-text-on-green:   var(--gc-white);
  --color-text-link:       var(--gc-blue);
  --color-text-link-hover: var(--gc-blue-dark);

  /* Backgrounds */
  --color-bg-primary:      var(--gc-white);
  --color-bg-panel:        var(--gc-gray-50);
  --color-bg-soft:         var(--gc-off-white);
  --color-bg-dark:         var(--gc-navy);
  --color-bg-accent:       var(--gc-blue-light);
  --color-bg-social:       var(--gc-green);

  /* Borders */
  --color-border:          var(--gc-gray-100);
  --color-border-strong:   var(--gc-gray-200);
  --color-border-focus:    var(--gc-blue);

  /* Feedback */
  --color-success:         #557C19;
  --color-success-light:   #EFF6E2;
  --color-warning:         #F39C2C;
  --color-warning-light:   #FDEFD8;
  --color-error:           #C0392B;
  --color-error-light:     #FBEAE7;
  --color-info:            #1B7FC4;
  --color-info-light:      #E3EEF8;

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

  /* Font families */
  --font-display:   'Urbanist', 'Poppins', sans-serif;
  --font-heading:   'Poppins', sans-serif;
  --font-body:      'Poppins', sans-serif;
  --font-secondary: 'Ubuntu', sans-serif;
  --font-mono:      'Courier New', monospace;

  /* Font weights */
  --fw-light:       300; /* @kind font */
  --fw-regular:     400; /* @kind font */
  --fw-medium:      500; /* @kind font */
  --fw-semibold:    600; /* @kind font */
  --fw-bold:        700; /* @kind font */

  /* Base size */
  --text-base: 16px;

  /* Type scale (modular, ratio ~1.25) */
  --text-xs:   0.75rem;   /*  12px */
  --text-sm:   0.875rem;  /*  14px */
  --text-md:   1rem;      /*  16px */
  --text-lg:   1.125rem;  /*  18px */
  --text-xl:   1.25rem;   /*  20px */
  --text-2xl:  1.5rem;    /*  24px */
  --text-3xl:  1.875rem;  /*  30px */
  --text-4xl:  2.25rem;   /*  36px */
  --text-5xl:  3rem;      /*  48px */
  --text-6xl:  3.75rem;   /*  60px */

  /* Line heights */
  --lh-tight:   1.2; /* @kind font */
  --lh-snug:    1.35; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.7; /* @kind font */

  /* Letter spacing */
  --ls-tight:   -0.02em; /* @kind font */
  --ls-normal:   0em; /* @kind font */
  --ls-wide:     0.05em; /* @kind font */
  --ls-wider:    0.1em; /* @kind font */
  --ls-widest:   0.15em; /* @kind font */

  /* ============================================================
     SPACING SCALE
     ============================================================ */
  --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;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ============================================================
     SHADOWS  (navy-tinted, soft)
     ============================================================ */
  --shadow-xs:  0 1px 3px rgba(19,35,75,0.06);
  --shadow-sm:  0 2px 8px rgba(19,35,75,0.08);
  --shadow-md:  0 4px 16px rgba(19,35,75,0.10);
  --shadow-lg:  0 8px 32px rgba(19,35,75,0.14);
  --shadow-xl:  0 16px 48px rgba(19,35,75,0.18);

  /* Focus ring */
  --shadow-focus: 0 0 0 3px rgba(27,127,196,0.30);

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --transition-fast:   150ms ease-out; /* @kind other */
  --transition-base:   220ms ease-out; /* @kind other */
  --transition-slow:   350ms ease-out; /* @kind other */
}

/* ============================================================
   SEMANTIC HTML ELEMENT STYLES
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text-body);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
  text-wrap: pretty;
}

h1 { font-size: var(--text-5xl); font-family: var(--font-display); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); font-weight: var(--fw-semibold); }
h5 { font-size: var(--text-xl);  font-weight: var(--fw-semibold); }
h6 { font-size: var(--text-lg);  font-weight: var(--fw-medium); }

p {
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--color-text-body);
  text-wrap: pretty;
}

p.lead {
  font-size: var(--text-lg);
  font-weight: var(--fw-light);
  color: var(--color-text-secondary);
}

small, .text-sm {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-text-link-hover); text-decoration: underline; }

strong, b { font-weight: var(--fw-semibold); }

label {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--gc-gray-50);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}

/* Section label — uppercase tracking */
.section-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--gc-blue);
}

/* Display heading using Urbanist */
.display-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

/* ============================================================
   SIGNATURE INFOGRAPHIC PATTERNS
   (from the Orygen infographic interface)
   ============================================================ */

/* Stat block — light panel, colored top rule, big navy number */
.gc-stat {
  background: var(--gc-gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-4) var(--space-3);
  position: relative;
  overflow: hidden;
}
.gc-stat::before {
  content: '';
  position: absolute;
  top: 0; left: var(--space-3); right: var(--space-3);
  height: 4px; border-radius: 0 0 2px 2px;
  background: var(--gc-accent-1);
}
.gc-stat.accent-blue::before   { background: var(--gc-accent-2); }
.gc-stat.accent-navy::before   { background: var(--gc-accent-3); }
.gc-stat.accent-orange::before { background: var(--gc-accent-4); }
.gc-stat-number {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-3xl);
  color: var(--gc-navy);
  line-height: 1.1;
}
.gc-stat-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gc-green-dark);
  margin-top: var(--space-2);
}
.gc-stat-caption {
  font-size: var(--text-xs);
  color: var(--gc-slate-muted);
  margin-top: 2px;
}

/* Section header — colored square bullet + navy title */
.gc-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.gc-section-head .bullet {
  width: 12px; height: 12px; border-radius: 2px;
  background: var(--gc-green);
  flex-shrink: 0;
}
.gc-section-head .title {
  font-weight: var(--fw-bold);
  color: var(--gc-navy);
  font-size: var(--text-lg);
}