/* =============================================================
 * DalaPower Design System — colors_and_type.css
 * Foundational tokens: color palette, typography scale, base CSS.
 * Import this on every internal page / artifact:
 *   <link rel="stylesheet" href="/colors_and_type.css">
 * ============================================================= */

/* ---------- Webfonts ----------
 * The DalaPower wordmark uses a custom rounded sans (closest open
 * match: Nunito). Display copy in the print folleto uses a heavy
 * condensed sans (closest match: Barlow Condensed). Body copy across
 * all collateral is **Inter** — provided directly by the brand
 * (variable font, weights 100–900 + italic) and self-hosted from
 * /fonts/. */

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

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Barlow+Condensed:wght@600;700;800;900&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  /* ---------- BRAND CORE (from Colores DalaPower.jpg) ---------- */
  --dp-navy:      #2a3b51;   /* primary surface / corporate trust */
  --dp-green:     #15a338;   /* primary brand — savings, action, growth */
  --dp-yellow:    #f9bc00;   /* secondary brand — energy, optimism */

  /* ---------- COLOR SCALES (derived, OKLCH-tuned) ---------- */

  /* Green scale — solar energy / savings */
  --green-50:   #e8f8ec;
  --green-100:  #c7eed1;
  --green-200:  #95dfa9;
  --green-300:  #5fcd7c;
  --green-400:  #2eb957;
  --green-500:  #15a338;   /* brand */
  --green-600:  #0e8a2d;
  --green-700:  #097023;
  --green-800:  #06561a;
  --green-900:  #043d12;

  /* Yellow / amber scale — accents */
  --yellow-50:  #fff8e0;
  --yellow-100: #ffeeb3;
  --yellow-200: #ffe080;
  --yellow-300: #ffd24d;
  --yellow-400: #fdc524;
  --yellow-500: #f9bc00;   /* brand */
  --yellow-600: #d8a200;
  --yellow-700: #b08400;
  --yellow-800: #876600;
  --yellow-900: #5e4700;

  /* Navy / slate scale — text, surfaces, charts */
  --navy-50:    #f4f6f9;
  --navy-100:   #e6ebf2;
  --navy-200:   #c7d1de;
  --navy-300:   #9aa9bd;
  --navy-400:   #647c98;
  --navy-500:   #45597a;
  --navy-600:   #2a3b51;   /* brand */
  --navy-700:   #1f2c3d;
  --navy-800:   #141d2a;
  --navy-900:   #0b1119;

  /* True neutrals — backgrounds, borders, dividers */
  --neutral-0:    #ffffff;
  --neutral-50:   #fafbfc;
  --neutral-100:  #f4f6f8;
  --neutral-200:  #e7eaee;
  --neutral-300:  #d2d8df;
  --neutral-400:  #a8b1bc;
  --neutral-500:  #74808f;
  --neutral-600:  #4a5462;
  --neutral-700:  #2d343f;
  --neutral-800:  #1a1f27;
  --neutral-900:  #0d1117;

  /* ---------- SEMANTIC TOKENS ---------- */

  /* Surfaces */
  --bg-page:        var(--neutral-50);
  --bg-surface:     var(--neutral-0);
  --bg-surface-alt: var(--neutral-100);
  --bg-inverse:     var(--navy-600);     /* dark band — folleto style */
  --bg-inverse-alt: var(--navy-700);

  /* Text — light surfaces */
  --fg-strong:    var(--navy-700);       /* H1/H2, primary copy */
  --fg-default:   var(--navy-600);       /* body */
  --fg-muted:     var(--navy-400);       /* captions, helper */
  --fg-subtle:    var(--navy-300);       /* disabled, dividers as text */

  /* Text — dark / inverse surfaces */
  --fg-on-dark-strong: #ffffff;
  --fg-on-dark:        #e6ebf2;
  --fg-on-dark-muted:  #9aa9bd;

  /* Brand-tinted accents */
  --fg-accent:      var(--green-600);    /* hyperlinks, brand-tinted text */
  --fg-accent-hi:   var(--green-700);    /* hover */
  --fg-warn-accent: var(--yellow-700);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--navy-400);

  /* Status — derived to harmonize with green primary */
  --status-positive: var(--green-500);
  --status-positive-bg: var(--green-50);
  --status-info:     #2563a8;
  --status-info-bg:  #e7f0fa;
  --status-warn:     var(--yellow-600);
  --status-warn-bg:  var(--yellow-50);
  --status-danger:   #c0392b;
  --status-danger-bg:#fbe9e7;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Nunito', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-impact:  'Barlow Condensed', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-12: 0.75rem;       /* meta / micro labels */
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;      /* fine print */
  --fs-15: 0.9375rem;
  --fs-16: 1rem;          /* body */
  --fs-18: 1.125rem;      /* lead body / large input */
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;        /* h4 */
  --fs-28: 1.75rem;       /* h3 */
  --fs-32: 2rem;
  --fs-40: 2.5rem;        /* h2 */
  --fs-48: 3rem;
  --fs-56: 3.5rem;        /* h1 */
  --fs-72: 4.5rem;        /* display */
  --fs-96: 6rem;          /* hero number */

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-wider:  0.12em;     /* uppercase eyebrows */
  --ls-widest: 0.22em;     /* "ENERGY OF TOMORROW" lockup */

  /* ---------- SPACING (4px base) ---------- */
  --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 ---------- */
  --radius-xs:  4px;       /* tags, chips */
  --radius-sm:  8px;       /* inputs, small buttons */
  --radius-md:  12px;      /* cards */
  --radius-lg:  16px;      /* big cards */
  --radius-xl:  24px;      /* feature cards, modal */
  --radius-2xl: 32px;
  --radius-pill: 999px;    /* the "CONSULTA GRATIS" badge */
  --radius-circle: 50%;

  /* ---------- SHADOWS ---------- */
  /* Soft, professional — never coloured glows. */
  --shadow-xs: 0 1px 2px rgba(20, 29, 42, 0.05);
  --shadow-sm: 0 2px 4px rgba(20, 29, 42, 0.06), 0 1px 2px rgba(20, 29, 42, 0.04);
  --shadow-md: 0 6px 16px rgba(20, 29, 42, 0.08), 0 2px 4px rgba(20, 29, 42, 0.04);
  --shadow-lg: 0 16px 32px rgba(20, 29, 42, 0.10), 0 4px 8px rgba(20, 29, 42, 0.04);
  --shadow-xl: 0 24px 48px rgba(20, 29, 42, 0.14), 0 8px 16px rgba(20, 29, 42, 0.06);

  /* Inset / data card */
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(20,29,42,0.06);

  /* Focus ring — accessible on both light + dark */
  --ring-focus: 0 0 0 3px rgba(21, 163, 56, 0.35);

  /* ---------- MOTION ---------- */
  --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;
}

/* ---------- BASE ELEMENT STYLES ---------- */
html, body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--fg-default);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}
h1 { font-size: var(--fs-56); }
h2 { font-size: var(--fs-40); }
h3 { font-size: var(--fs-28); font-weight: 700; }
h4 { font-size: var(--fs-24); font-weight: 700; line-height: var(--lh-snug); }
h5 { font-size: var(--fs-18); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-normal); }
h6 {
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-family: var(--font-body);
}

p { margin: 0 0 var(--space-4) 0; }
p:last-child { margin-bottom: 0; }

small, .meta { font-size: var(--fs-13); color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--green-600);
}

.lockup-tagline {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--navy-400);
}

/* Big display number — for savings / kWh / etc */
.display-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-72);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--green-600);
  font-variant-numeric: tabular-nums;
}

/* Folleto-style impact heading — heavy condensed yellow on navy */
.impact-display {
  font-family: var(--font-impact);
  font-weight: 800;
  font-size: var(--fs-72);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--yellow-500);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

a {
  color: var(--fg-accent);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-accent-hi); text-decoration: underline; text-underline-offset: 3px; }

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

::selection { background: var(--green-200); color: var(--navy-700); }