/* ============================================================
   PIONEROS DEL CHACO S.A. — Brand Tokens
   ============================================================
   Source of truth for colors, typography and core surface tokens.
   Use the semantic vars in product code; the raw vars are exposed
   for tooling, charts and exceptional cases.
   ============================================================ */

/* Webfont — primary type family */
@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* -----------------------------------------------------------
     RAW PALETTE — Brand-defined Pantone equivalents
     ----------------------------------------------------------- */

  /* Primary */
  --pdc-green:        #1F6B2E;  /* Pantone P 141-8 C */
  --pdc-red:          #C93829;  /* Pantone P 52-8 CC */
  --pdc-blue:         #3A3F99;  /* Pantone P 100-8 C */

  /* Secondary / neutrals */
  --pdc-black:        #1A1A1A;  /* K100% */
  --pdc-silver:       #999999;  /* Pantone 877 C */
  --pdc-white:        #FFFFFF;

  /* Light variants — for fills, badges, alerts, alternating rows */
  --pdc-green-light:  #E8F2EA;
  --pdc-red-light:    #FAEAE8;
  --pdc-blue-light:   #EAEBF6;

  /* Derived shades — used sparingly for hover/press states.
     Hand-tuned, kept inside the brand family. */
  --pdc-green-dark:   #164D21;  /* primary :hover -> :active */
  --pdc-green-darker: #0F3617;
  --pdc-red-dark:     #A02C20;
  --pdc-blue-dark:    #2D3279;

  /* Neutral scale — built around silver + black */
  --pdc-gray-50:      #F7F7F7;
  --pdc-gray-100:     #EEEEEE;
  --pdc-gray-200:     #E0E0E0;
  --pdc-gray-300:     #CCCCCC;
  --pdc-gray-400:     #B3B3B3;
  --pdc-gray-500:     #999999;  /* = pdc-silver */
  --pdc-gray-600:     #707070;
  --pdc-gray-700:     #4D4D4D;
  --pdc-gray-800:     #2E2E2E;
  --pdc-gray-900:     #1A1A1A;  /* = pdc-black */

  /* -----------------------------------------------------------
     SEMANTIC TOKENS — use these in product code
     ----------------------------------------------------------- */

  /* Surfaces / backgrounds */
  --bg-app:           var(--pdc-white);
  --bg-subtle:        var(--pdc-gray-50);
  --bg-muted:         var(--pdc-gray-100);
  --bg-inverse:       var(--pdc-green);   /* document headers, hero bands */
  --bg-overlay:       rgba(26,26,26,0.55);

  /* Foreground / text */
  --fg-primary:       var(--pdc-black);
  --fg-secondary:     var(--pdc-gray-700);
  --fg-muted:         var(--pdc-gray-500);
  --fg-on-brand:      var(--pdc-white);   /* text on green/red/blue */
  --fg-link:          var(--pdc-green);
  --fg-link-hover:    var(--pdc-green-dark);

  /* Borders */
  --border-subtle:    var(--pdc-gray-200);
  --border-default:   var(--pdc-gray-300);
  --border-strong:    var(--pdc-gray-500);
  --border-brand:     var(--pdc-green);

  /* Accent / brand */
  --accent-primary:   var(--pdc-green);
  --accent-danger:    var(--pdc-red);
  --accent-info:      var(--pdc-blue);

  /* Semantic feedback */
  --success-fg:       var(--pdc-green);
  --success-bg:       var(--pdc-green-light);
  --success-border:   var(--pdc-green);

  --danger-fg:        var(--pdc-red);
  --danger-bg:        var(--pdc-red-light);
  --danger-border:    var(--pdc-red);

  --info-fg:          var(--pdc-blue);
  --info-bg:          var(--pdc-blue-light);
  --info-border:      var(--pdc-blue);

  /* -----------------------------------------------------------
     TYPOGRAPHY
     ----------------------------------------------------------- */

  --font-sans:        'Rethink Sans', 'Myriad Pro', Arial, system-ui, -apple-system, sans-serif;
  --font-display:     'Rethink Sans', 'Myriad Pro', Arial, sans-serif;
  --font-mono:        ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — modular, ~1.20 ratio */
  --fs-xs:            12px;
  --fs-sm:            14px;
  --fs-base:          16px;
  --fs-md:            18px;
  --fs-lg:            20px;
  --fs-xl:            24px;
  --fs-2xl:           30px;
  --fs-3xl:           38px;
  --fs-4xl:           48px;
  --fs-5xl:           60px;

  --lh-tight:         1.15;
  --lh-snug:          1.3;
  --lh-normal:        1.5;
  --lh-loose:         1.7;

  --fw-regular:       400;
  --fw-medium:        500;
  --fw-semibold:      600;
  --fw-bold:          700;
  --fw-black:         800;

  /* Tracking */
  --tracking-tight:   -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-caps:     0.08em;

  /* -----------------------------------------------------------
     SPACING — 4px base grid
     ----------------------------------------------------------- */
  --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;

  /* -----------------------------------------------------------
     RADIUS
     ----------------------------------------------------------- */
  --radius-none:      0;
  --radius-sm:        4px;
  --radius-md:        6px;
  --radius-lg:        10px;
  --radius-xl:        16px;
  --radius-pill:      999px;

  /* -----------------------------------------------------------
     ELEVATION — flat brand, light shadows only
     ----------------------------------------------------------- */
  --shadow-xs:        0 1px 2px rgba(26,26,26,0.06);
  --shadow-sm:        0 1px 3px rgba(26,26,26,0.08), 0 1px 2px rgba(26,26,26,0.04);
  --shadow-md:        0 4px 10px rgba(26,26,26,0.08), 0 2px 4px rgba(26,26,26,0.05);
  --shadow-lg:        0 10px 24px rgba(26,26,26,0.10), 0 4px 8px rgba(26,26,26,0.05);
  --shadow-focus:     0 0 0 3px rgba(31,107,46,0.25);
  --shadow-focus-red: 0 0 0 3px rgba(201,56,41,0.25);

  /* Layout */
  --container-max:    1200px;
  --header-h:         64px;
  --duration-fast:    120ms;
  --duration-base:    200ms;
  --duration-slow:    320ms;
  --ease:             cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ============================================================
   SEMANTIC TYPE STYLES — apply with class or @extend
   ============================================================ */

.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--accent-primary);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  color: var(--accent-primary);
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  color: var(--accent-primary);
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-primary);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

.t-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
}

.t-button {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* On-brand variants for use over green hero bands */
.t-on-brand { color: var(--fg-on-brand); }
.t-h1.t-on-brand,
.t-h2.t-on-brand,
.t-display.t-on-brand { color: var(--pdc-white); }

/* ============================================================
   GLOBAL RESETS used by previews
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}