/* ============================================================
   PQF Design System — colors_and_type.css
   ------------------------------------------------------------
   Brand: PQF (Global Chemical Products de México)
   Import this file at the top of any HTML you build.

   <link rel="stylesheet" href="/colors_and_type.css">

   It loads Google-Fonts substitutes (Sora + Inter Tight + JetBrains
   Mono). When real PQF brand fonts arrive, drop them in /fonts/
   and replace the @import below with @font-face declarations.
   ============================================================ */

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

:root {
  /* ----------------------------------------------------------
     COLOR — BRAND
     The PQF mark is built on two spot colors: a deep medical
     blue (structure, trust) and an organic olive-leaning green
     (life, growth, CTAs). Use them sparingly. White is the
     ground.
     ---------------------------------------------------------- */
  --pqf-blue:        #2F5573;   /* primary brand */
  --pqf-blue-700:    #244159;
  --pqf-blue-800:    #1B3145;
  --pqf-blue-200:    #C9D5E0;
  --pqf-blue-100:    #E5ECF2;
  --pqf-blue-050:    #F2F6FA;

  --pqf-green:       #6A8E2A;   /* secondary brand + default CTA */
  --pqf-green-700:   #587725;
  --pqf-green-800:   #46601D;
  --pqf-green-200:   #CDD9B0;
  --pqf-green-100:   #E5ECD4;
  --pqf-green-050:   #F2F6E8;

  --pqf-ink:         #0E1116;   /* near-black for body type */

  /* ----------------------------------------------------------
     COLOR — NEUTRALS (cool gray scale)
     ---------------------------------------------------------- */
  --n50:   #F6F8FA;
  --n100:  #EDF1F4;
  --n200:  #DDE3EA;
  --n300:  #C2CCD5;
  --n400:  #98A4B0;
  --n500:  #6B7884;
  --n600:  #4A5560;
  --n700:  #333B44;
  --n800:  #1F262E;
  --n900:  #0E1116;

  /* ----------------------------------------------------------
     COLOR — SEMANTIC FOREGROUND / BACKGROUND
     Use these in components instead of raw scale values.
     ---------------------------------------------------------- */
  --fg-1:  var(--pqf-ink);     /* primary text */
  --fg-2:  var(--n700);        /* secondary text */
  --fg-3:  var(--n500);        /* tertiary / metadata */
  --fg-4:  var(--n400);        /* placeholder / disabled */
  --fg-on-brand: #FFFFFF;      /* text on blue/green */

  --bg-1:  #FFFFFF;            /* primary surface */
  --bg-2:  var(--n50);          /* subdued surface (sections) */
  --bg-3:  var(--n100);         /* deeper subdued */
  --bg-brand: var(--pqf-blue);  /* brand surface */
  --bg-brand-soft: var(--pqf-blue-050);

  --border:        var(--n200);
  --border-strong: var(--n300);
  --border-brand:  var(--pqf-blue);

  /* ----------------------------------------------------------
     COLOR — SEMANTIC STATES
     ---------------------------------------------------------- */
  --success:       var(--pqf-green);
  --success-soft:  var(--pqf-green-050);
  --warning:       #C99A2E;
  --warning-soft:  #FAF1DA;
  --danger:        #C03A3A;     /* not pure medical red */
  --danger-soft:   #FBE6E6;
  --info:          #3674A6;
  --info-soft:     #E5EFF7;

  /* ----------------------------------------------------------
     TYPOGRAPHY — FAMILIES
     ---------------------------------------------------------- */
  --font-display: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ----------------------------------------------------------
     TYPOGRAPHY — SCALE
     Modular, slightly tightened for a clinical reading rhythm.
     ---------------------------------------------------------- */
  --fs-display:   72px;   --lh-display:   1.05  /* @kind font */;   --tr-display: -0.02em  /* @kind font */;
  --fs-h1:        48px;   --lh-h1:        1.10  /* @kind font */;   --tr-h1:      -0.02em  /* @kind font */;
  --fs-h2:        36px;   --lh-h2:        1.15  /* @kind font */;   --tr-h2:      -0.015em  /* @kind font */;
  --fs-h3:        24px;   --lh-h3:        1.25  /* @kind font */;   --tr-h3:      -0.01em  /* @kind font */;
  --fs-h4:        20px;   --lh-h4:        1.3  /* @kind font */;    --tr-h4:      -0.005em  /* @kind font */;
  --fs-body:      16px;   --lh-body:      1.55  /* @kind font */;   --tr-body:    0  /* @kind font */;
  --fs-body-lg:   18px;   --lh-body-lg:   1.55  /* @kind font */;
  --fs-body-sm:   14px;   --lh-body-sm:   1.5  /* @kind font */;
  --fs-caption:   12px;   --lh-caption:   1.4  /* @kind font */;    --tr-caption: 0.01em  /* @kind font */;
  --fs-eyebrow:   11px;   --lh-eyebrow:   1.2  /* @kind font */;    --tr-eyebrow: 0.08em  /* @kind font */;

  /* ----------------------------------------------------------
     SPACING — multiples of 4
     ---------------------------------------------------------- */
  --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;

  /* ----------------------------------------------------------
     RADII
     Cap at 14px on purpose — over-rounding undermines the
     medical-instrument feel.
     ---------------------------------------------------------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:  14px;
  --r-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS — two tiers only
     ---------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(15, 23, 30, .06), 0 1px 1px rgba(15, 23, 30, .04);
  --shadow-2: 0 8px 24px -8px rgba(15, 23, 30, .18), 0 2px 6px rgba(15, 23, 30, .06);

  /* ----------------------------------------------------------
     ICON SIZES
     ---------------------------------------------------------- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1)  /* @kind other */;
  --dur-fast:    120ms  /* @kind other */;
  --dur-default: 200ms  /* @kind other */;
  --dur-slow:    320ms  /* @kind other */;

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */
  --maxw-content: 1200px;
  --maxw-wide:    1400px;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these as drop-in classes (or apply via @extend in your
   own CSS). Match the scale tokens above.
   ============================================================ */

html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-1); }

.t-display, .t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

.t-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: 700;
}
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 600; }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); font-weight: 600; }

.t-body, p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
.t-body-lg { font-family: var(--font-body); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.t-body-sm { font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--fg-2); }
.t-caption { font-family: var(--font-body); font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--tr-caption); color: var(--fg-3); }
.t-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--pqf-blue);
  font-weight: 600;
}
.t-mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
}

/* ============================================================
   PRIMITIVES — minimal building blocks shipped with the system.
   Components live in ui_kits/. These are the absolute essentials
   so design previews look right out of the box.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-5);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  border: 1px solid transparent;
  background: var(--pqf-green);
  color: var(--fg-on-brand);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-default) var(--ease);
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.btn:hover    { background: var(--pqf-green-700); }
.btn:active   { background: var(--pqf-green-800); transform: scale(0.99); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--secondary {
  background: transparent;
  color: var(--pqf-blue);
  border-color: var(--pqf-blue);
}
.btn--secondary:hover  { background: rgba(47, 85, 115, 0.06); }
.btn--secondary:active { background: rgba(47, 85, 115, 0.10); transform: scale(0.99); }

.btn--ghost {
  background: transparent;
  color: var(--fg-1);
  border-color: transparent;
}
.btn--ghost:hover { background: var(--n100); }

.btn--sm { height: 36px; padding: 0 var(--space-4); font-size: var(--fs-body-sm); }
.btn--lg { height: 52px; padding: 0 var(--space-6); font-size: var(--fs-body-lg); }

.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.card--interactive { transition: box-shadow var(--dur-default) var(--ease), border-color var(--dur-default) var(--ease); cursor: pointer; }
.card--interactive:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--pqf-blue-050);
  color: var(--pqf-blue);
  border: 1px solid var(--pqf-blue-200);
}
.badge--green { background: var(--pqf-green-050); color: var(--pqf-green-700); border-color: var(--pqf-green-200); }
.badge--neutral { background: var(--n100); color: var(--n700); border-color: var(--n200); }

.input {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg-1);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input:focus {
  outline: none;
  border-color: var(--pqf-blue);
  box-shadow: 0 0 0 3px rgba(47, 85, 115, 0.18);
}
.input::placeholder { color: var(--fg-4); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}