/* ============================================================
   FRONIVA DESIGN SYSTEM — Core Tokens
   Brand: Deep Green (#1a4d2e) + Warm Amber (#d4a843)
   Philosophy: "Morning light on a greenhouse"
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* ---- Brand colors (primary) ---- */
  --froniva-green:          #1a4d2e;
  --froniva-green-light:    #2a7a4a;
  --froniva-green-glow:     rgba(26, 77, 46, 0.25);
  --froniva-green-subtle:   rgba(26, 77, 46, 0.08);
  --froniva-amber:          #d4a843;
  --froniva-amber-light:    #e8c36a;
  --froniva-amber-glow:     rgba(212, 168, 67, 0.2);
  --froniva-amber-subtle:   rgba(212, 168, 67, 0.08);

  /* ---- Surfaces (dark-first, landing vibe) ---- */
  --bg:                     #0d1210;  /* page background */
  --bg-charcoal:            #1a1a1a;  /* secondary section */
  --bg-card:                #111a15;  /* resting cards */
  --bg-surface:             #141f18;  /* hover / elevated */

  /* ---- Light surfaces (dashboards, brochures) ---- */
  --light-bg:               #f5f2ec;  /* offwhite page */
  --light-cream:            #e8e2d6;
  --light-surface:          #ffffff;
  --light-gray-50:          #f8f9fa;
  --light-gray-100:         #eef0ee;
  --light-gray-200:         #dde2dd;

  /* ---- Foreground ---- */
  --fg-1:                   #f5f2ec;  /* primary text on dark */
  --fg-2:                   #e8e2d6;  /* secondary cream */
  --fg-3:                   #9ca3af;  /* tertiary gray */
  --fg-4:                   #8b92a0;  /* quaternary gray — bumped from #6b7280 for WCAG AA body-text contrast vs --bg #0d1210 */
  --fg-on-light-1:          #1a1a1a;
  --fg-on-light-2:          #4b5563;
  --fg-on-light-3:          #6b7280;

  /* ---- Semantic (aligned with Aurelio team-report RAISE/HOLD/CUT/REVIEW) ---- */
  --sem-raise:              #2E7D32;  /* go/positive */
  --sem-raise-bg:           rgba(46, 125, 50, 0.12);
  --sem-hold:               #9E9E9E;  /* neutral */
  --sem-hold-bg:            rgba(158, 158, 158, 0.12);
  --sem-cut:                #C62828;  /* stop/negative */
  --sem-cut-bg:             rgba(198, 40, 40, 0.1);
  --sem-review:             #F57C00;  /* caution */
  --sem-review-bg:          rgba(245, 124, 0, 0.12);
  --sem-divergent:          #7B1FA2;  /* alerts (purple) */
  --sem-info:               #1e88e5;  /* info blue */

  /* Aliases for delta up/down used across landing */
  --delta-up:               #22c55e;
  --delta-up-bg:            rgba(34, 197, 94, 0.1);
  --delta-down:             #ef4444;
  --delta-down-bg:          rgba(239, 68, 68, 0.1);

  /* ---- Typography ---- */
  --font-display:           'Playfair Display', Georgia, serif;    /* editorial serif for titles */
  --font-body:              'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:              'Monaco', 'Menlo', 'SF Mono', ui-monospace, monospace;

  /* Size scale (rem) */
  --fs-xs:                  0.70rem;  /*  ~11px — uppercase eyebrow */
  --fs-sm:                  0.80rem;  /*  ~13px — small / label */
  --fs-base:                0.95rem;  /*  ~15px — body */
  --fs-md:                  1.05rem;  /*  ~17px — body emphasis */
  --fs-lg:                  1.2rem;   /*  ~19px — card title */
  --fs-xl:                  1.6rem;   /*  ~26px — h3 */
  --fs-2xl:                 2.2rem;   /*  ~35px — h2 */
  --fs-3xl:                 3.5rem;   /*  ~56px — h1 */
  --fs-hero:                5.5rem;   /*  ~88px — hero display */

  /* Letter spacing */
  --tracking-tight:         -0.01em;
  --tracking-body:          0;
  --tracking-wide:          0.1em;     /* labels */
  --tracking-widest:        0.3em;     /* eyebrow, logo */

  /* Line height */
  --leading-tight:          1.15;      /* display */
  --leading-snug:           1.3;
  --leading-body:           1.7;       /* default paragraphs */
  --leading-relaxed:        1.8;

  /* ---- Spacing ---- */
  --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:               120px;

  /* ---- Radii ---- */
  --radius-xs:              2px;       /* pills, nav-cta */
  --radius-sm:              3px;       /* buttons */
  --radius-md:              4px;       /* cards (tight) */
  --radius-lg:              6px;       /* products / marketing cards */
  --radius-xl:              12px;      /* dashboards, brochures */
  --radius-full:            9999px;    /* avatars, tags */

  /* ---- Borders ---- */
  --border-hairline:        1px solid var(--froniva-green-subtle);
  --border-amber:           1px solid var(--froniva-amber);
  --border-light:           1px solid var(--light-gray-200);

  /* ---- Shadows ---- */
  --shadow-sm:              0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:              0 3px 10px rgba(0,0,0,0.1);
  --shadow-lg:              0 10px 30px rgba(0,0,0,0.15);
  --glow-amber:             0 0 40px var(--froniva-amber-glow);
  --glow-green:             0 0 40px var(--froniva-green-glow);

  /* ---- Motion ---- */
  --ease-out:               cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:                 0.2s;
  --t-base:                 0.3s;
  --t-slow:                 0.4s;
  --t-reveal:               0.8s;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY — ready-to-use element styles
   ============================================================ */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--leading-body);
  color: var(--fg-1);
  background: var(--bg);
}

/* Display (hero) — serif, italic accents in amber */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, var(--fs-hero));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.display em { font-style: italic; color: var(--froniva-amber); }

/* H1 / Section title */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, var(--fs-3xl));
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}
h1 em, .h1 em { font-style: italic; color: var(--froniva-amber); }

/* H2 */
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--leading-snug);
}

/* H3 */
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--leading-snug);
}

/* H4 — when sans is preferred (dashboard/UI) */
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: var(--leading-snug);
}

/* Eyebrow / Section label — tiny uppercase amber */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--froniva-amber);
}

/* Body paragraph */
p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

/* Small / caption */
small, .small {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}

/* Pull quote / italic aside — serif italic, amber */
.pullquote, blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--froniva-amber);
  letter-spacing: 0.5px;
  line-height: var(--leading-snug);
}

/* Tabular number (prices) */
.tabular { font-variant-numeric: tabular-nums; }

/* Code / mono */
code, .code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-surface);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--froniva-amber-light);
}

/* Logo wordmark — INTER 700, wide tracking, amber i-dot */
.logo-text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--fg-1);
  text-decoration: none;
}
.logo-text .dot { color: var(--froniva-amber); font-style: normal; }
.logo-text-large { font-size: 2.2rem; letter-spacing: 8px; }