/* MeteoZen — foundations.
   Mirrors src/index.css tokens from the production app.
   Import this once and use via var(--token-name). */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* ── Brand blues ─────────────────────────────────── */
  --color-brand-50:  #E6F2FB;
  --color-brand-100: #CFE7F7;
  --color-brand-500: #2A8FD6;
  --color-brand-600: #0B74C4;  /* primary */
  --color-brand-700: #095E9F;  /* primary-hover, links */
  --color-brand-800: #084B7E;
  --ink-navy:        #0F1F3A;  /* logo stroke + display headlines */

  /* ── Semantic ─────────────────────────────────── */
  --color-success-500: #22C55E;
  --color-warning-500: #F59E0B;
  --color-danger-600:  #DC2626;

  /* Weather risk levels (AEMET CAP standard) */
  --risk-amarillo: #FACC15;   /* amber-400 */
  --risk-amarillo-ink: #78350F;
  --risk-naranja:  #F97316;   /* orange-500 */
  --risk-naranja-ink: #FFFFFF;
  --risk-rojo:     #DC2626;   /* red-600 */
  --risk-rojo-ink: #FFFFFF;

  /* ── Cool-tinted neutrals (industrial contrast) ─── */
  --gray-50:  #F4F6F8;
  --gray-100: #E6EAEF;
  --gray-200: #C9D3DF;
  --gray-300: #A3B3C4;
  --gray-400: #71879F;
  --gray-500: #52677C;
  --gray-600: #3D4E5E;
  --gray-700: #2D3A46;
  --gray-800: #1C242C;
  --gray-900: #0F1418;
  --gray-950: #080B0E;

  /* Slate-950 companion (used on marketing site dark sections) */
  --slate-900: #0F172A;
  --slate-950: #020617;
  --slate-800: #1E293B;

  /* ── Surfaces ─────────────────────────────────── */
  --surface-page:    var(--gray-50);
  --surface-card:    #FFFFFF;
  --surface-sidebar: var(--gray-900);
  --surface-inverted: var(--slate-950);
  --border:          var(--gray-200);
  --focus:           var(--color-brand-600);

  /* ── Radii ─────────────────────────────────── */
  --radius-sm: 0.25rem;   /* 4px  */
  --radius-md: 0.5rem;    /* 8px  */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-pill: 999px;

  /* ── Shadows ─────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 22px 48px -28px rgba(15, 23, 42, 0.28);
  --shadow-soft: 0 18px 40px -24px rgba(15, 23, 42, 0.35);
  --shadow-pop:  0 8px 30px rgba(0, 0, 0, 0.08);
  --ring-brand:  0 0 0 3px rgba(11, 116, 196, 0.15);

  /* ── Spacing scale (4px base) ─────────────── */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;   --space-24: 6rem;   --space-32: 8rem;

  /* ── Font stacks ─────────────────────────────────── */
  --font-display: "Space Grotesk", system-ui, sans-serif;   /* headings */
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --font-brand:   "Montserrat", system-ui, sans-serif;      /* logo wordmark only */

  /* ── Type scale (exact values from src/index.css) ── */
  --h1-size: 28px; --h1-line: 34px; --h1-weight: 600; --h1-track: -0.01em;
  --h2-size: 20px; --h2-line: 28px; --h2-weight: 600; --h2-track: -0.01em;
  --h3-size: 16px; --h3-line: 24px; --h3-weight: 600;
  --body-size: 14px; --body-line: 22px; --body-weight: 400;
  --small-size: 13px; --small-line: 18px; --small-weight: 500; --small-track: 0.02em;

  /* Marketing display type (for InfoPage/PricingPage — very tight) */
  --display-track: -0.04em;   /* tracking-tighter */
  --eyebrow-track: 0.28em;    /* uppercase labels */

  /* ── Sidebar / layout ─────────────────────────────── */
  --sidebar-width: 280px;
  --header-height: 72px;
}

/* ── Dark mode (triggered on html.dark) ─────────────────────── */
html.dark {
  --color-brand-50:  #0f2744;
  --color-brand-100: #133055;
  --color-brand-600: #4da6ff;
  --color-brand-700: #6ab6ff;
  --color-brand-800: #93ccff;
  --gray-50:  #161f2e;  --gray-100: #1b2838;  --gray-200: #233044;
  --gray-300: #2e3f56;  --gray-400: #4a617a;  --gray-500: #688499;
  --gray-600: #8fa8be;  --gray-700: #b5cad8;  --gray-800: #d4e3ee;
  --gray-900: #ecf3f9;  --gray-950: #f5f9fc;
  --surface-page:    #1a2332;
  --surface-card:    #1e2d3d;
  --surface-sidebar: #151e2d;
  --border:          #233044;
}

/* ── Semantic element styles ─────────────────────────────── */
html { font-family: var(--font-body); color: var(--gray-800); background: var(--surface-page); }
body { margin: 0; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); margin: 0; }
h1 { font-size: var(--h1-size); line-height: var(--h1-line); font-weight: var(--h1-weight); letter-spacing: var(--h1-track); }
h2 { font-size: var(--h2-size); line-height: var(--h2-line); font-weight: var(--h2-weight); letter-spacing: var(--h2-track); }
h3 { font-size: var(--h3-size); line-height: var(--h3-line); font-weight: var(--h3-weight); }
p, span, label, input, button { font-size: var(--body-size); line-height: var(--body-line); font-weight: var(--body-weight); color: var(--gray-700); }
small { font-size: var(--small-size); line-height: var(--small-line); font-weight: var(--small-weight); letter-spacing: var(--small-track); color: var(--gray-500); }

/* Marketing display headings (the tracking-tighter "brutalist" variant used in InfoPage) */
.mz-display-xl { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700; line-height: 1.05; letter-spacing: var(--display-track); color: var(--gray-950); }
.mz-display-lg { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: var(--display-track); color: var(--gray-950); }
.mz-eyebrow    { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: var(--eyebrow-track); text-transform: uppercase; color: var(--gray-500); }

::selection { background: rgba(11, 116, 196, 0.12); color: var(--color-brand-800); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }