/* ============================================================
   Eye-T Design System — Colors & Typography
   "Everyday AI"
   ============================================================ */

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

:root {
  /* ─────────────────────────────────────────────────────────
     PRIMARY BRAND COLORS
     The eye + the spark. Navy holds the form, orange is the
     pupil/insight, royal blue is the voice.
     ───────────────────────────────────────────────────────── */

  --eyet-navy:        #14213E;   /* primary eye outline, headlines */
  --eyet-navy-deep:   #0B1429;   /* hover/press, deepest UI */
  --eyet-navy-soft:   #2A3A5F;   /* secondary surfaces */

  --eyet-orange:      #EE7A1F;   /* the spark / pupil / primary CTA */
  --eyet-orange-hot:  #E45F0A;   /* press / emphasis */
  --eyet-orange-soft: #F9B97A;   /* highlight / accents */
  --eyet-orange-tint: #FCE7D2;   /* badges / surfaces */

  --eyet-blue:        #1F6FCB;   /* "Everyday AI" royal blue, links */
  --eyet-blue-deep:   #14559E;   /* hover state for blue */
  --eyet-blue-soft:   #6AA5E0;
  --eyet-blue-tint:   #DCEAF8;

  /* ─────────────────────────────────────────────────────────
     NEUTRALS — white-first, warm-tinted greys
     The brand sits on PURE WHITE. Cream remains available as
     an opt-in warm surface for hero panels or feature sections.
     ───────────────────────────────────────────────────────── */

  --eyet-white:       #FFFFFF;   /* primary background */
  --eyet-snow:        #F7F8FA;   /* secondary surface (cards on white sections) */
  --eyet-cloud:       #ECEEF2;   /* dividers, muted surfaces */
  --eyet-mist:        #C8CCD2;   /* mid neutral, disabled */
  --eyet-graphite:    #4A4F58;   /* body text */
  --eyet-ink:         #16181C;   /* high-emphasis text */

  --eyet-cream:       #FBF6EB;   /* optional warm surface */
  --eyet-paper:       #F4EDDD;   /* optional warm surface, denser */

  --eyet-black:       #0A0A0A;

  /* ─────────────────────────────────────────────────────────
     SEMANTIC COLORS
     ───────────────────────────────────────────────────────── */

  --eyet-success:     #2E8B57;
  --eyet-warning:     #D98613;
  --eyet-danger:      #C13E2E;
  --eyet-info:        var(--eyet-blue);

  /* ─────────────────────────────────────────────────────────
     SEMANTIC TOKENS — UI roles
     ───────────────────────────────────────────────────────── */

  --bg:               var(--eyet-white);
  --bg-elevated:      var(--eyet-white);
  --bg-sunken:        var(--eyet-snow);
  --bg-warm:          var(--eyet-cream);   /* opt-in warm accent */
  --bg-inverse:       var(--eyet-navy);

  --fg-primary:       var(--eyet-ink);
  --fg-secondary:     var(--eyet-graphite);
  --fg-muted:         #8A8F98;
  --fg-inverse:       var(--eyet-white);

  --border:           #E3E5EA;
  --border-strong:    var(--eyet-navy);
  --border-subtle:    #ECEEF2;

  --accent:           var(--eyet-orange);
  --accent-fg:        var(--eyet-white);
  --link:             var(--eyet-blue);

  /* ─────────────────────────────────────────────────────────
     TYPOGRAPHY — font stacks
     ───────────────────────────────────────────────────────── */

  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ─────────────────────────────────────────────────────────
     TYPE SCALE — slightly tight, modern-friendly
     ───────────────────────────────────────────────────────── */

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --ls-display: -0.02em;
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-caps:    0.08em;

  /* ─────────────────────────────────────────────────────────
     SPACING — 4px base
     ───────────────────────────────────────────────────────── */

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ─────────────────────────────────────────────────────────
     RADII — generous but not pill-y. The eye is almond-shaped
     so we lean toward soft, organic rounding.
     ───────────────────────────────────────────────────────── */

  --r-2:    2px;
  --r-4:    4px;
  --r-8:    8px;
  --r-12:  12px;
  --r-16:  16px;
  --r-24:  24px;
  --r-pill: 999px;

  /* ─────────────────────────────────────────────────────────
     SHADOWS — soft, warm-tinted to sit on cream
     ───────────────────────────────────────────────────────── */

  --shadow-sm:    0 1px 2px rgba(20, 33, 62, 0.06), 0 1px 1px rgba(20, 33, 62, 0.04);
  --shadow-md:    0 4px 12px rgba(20, 33, 62, 0.08), 0 2px 4px rgba(20, 33, 62, 0.04);
  --shadow-lg:    0 12px 32px rgba(20, 33, 62, 0.12), 0 4px 8px rgba(20, 33, 62, 0.06);
  --shadow-xl:    0 24px 64px rgba(20, 33, 62, 0.18), 0 8px 16px rgba(20, 33, 62, 0.08);
  --shadow-glow:  0 0 0 4px rgba(238, 122, 31, 0.18);  /* focus ring orange */
  --shadow-glow-blue: 0 0 0 4px rgba(31, 111, 203, 0.22);

  --shadow-inset: inset 0 1px 2px rgba(20, 33, 62, 0.1);

  /* ─────────────────────────────────────────────────────────
     MOTION
     ───────────────────────────────────────────────────────── */

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Use these classes/element selectors in product code.
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.eyet-display,
h1.eyet,
.eyet h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(var(--fs-40), 6vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-primary);
}

.eyet-h1, h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

.eyet-h2, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-40);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.eyet-h3, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.eyet-h4, h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
}

.eyet-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--eyet-orange);
}

.eyet-body, p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.eyet-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-20);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

.eyet-small, small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
}

.eyet-caption {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}

.eyet-code, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 2px 6px;
  border-radius: var(--r-4);
  color: var(--eyet-navy);
}

a, .eyet-link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .eyet-link:hover {
  color: var(--eyet-blue-deep);
}