/* ============================================================
   Enudge Design System — Colors & Type
   ------------------------------------------------------------
   Source of truth for color tokens, type ramp, spacing, radii,
   shadows. Import this in every preview card and UI kit page:

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

   Lato is the brand typeface. We load weights 300/400/700/900.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ---------- JetBrains Mono (self-hosted) ---------- */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
}

:root {
  /* ---------- Brand palette · 3-colour system ----------
     Orchid = primary (the mark) · Sky = cool secondary · Sunray = warm accent.
     Each ramp: 50 surface · 100 tint · 500 base · 600 hover · 700 active · 800 deep. */
  --orchid-50:  #FAF4FD;
  --orchid-100: #EFDDF8;
  --orchid-500: #BC71DB;   /* PRIMARY brand — the mark */
  --orchid-600: #995BB3;   /* hover */
  --orchid-700: #734387;   /* active / text on tint */
  --orchid-800: #472754;   /* deep */

  --sky-50:  #F3FAFD;
  --sky-100: #DAF1FA;
  --sky-500: #56C2E8;      /* SECONDARY — cool accent */
  --sky-600: #459EBE;
  --sky-700: #327790;
  --sky-800: #1C4959;

  --sunray-50:  #FEFBF3;
  --sunray-100: #FDF3D9;
  --sunray-500: #F6C84E;   /* ACCENT — warm pop */
  --sunray-600: #C9A33E;
  --sunray-700: #987B2D;
  --sunray-800: #5F4C19;

  /* ---------- Brand semantic ---------- */
  --brand:        var(--orchid-500);
  --brand-hover:  var(--orchid-600);
  --brand-active: var(--orchid-700);
  --brand-deep:   var(--orchid-800);

  /* ---------- Signature gradient (secondary brand moments only) ----------
     Sky → Orchid, drawn from the new family. Never used as the mark's ground. */
  --enudge-gradient:        linear-gradient(90deg, #56C2E8 0%, #BC71DB 100%);   /* @kind color */
  --enudge-gradient-soft:   linear-gradient(135deg, #F3FAFD 0%, #FAF4FD 100%);   /* @kind color */
  --enudge-gradient-radial: radial-gradient(circle at 30% 30%, #DAF1FA 0%, #56C2E8 45%, #BC71DB 100%);   /* @kind color */

  /* ---------- Legacy aliases — remapped onto the new palette so existing
     component CSS keeps resolving. Prefer the tokens above for new work. ---------- */
  --enudge-deep-blue:   var(--orchid-700);
  --enudge-blue:        var(--sky-600);
  --enudge-sky:         var(--sky-500);
  --enudge-cyan:        var(--sky-500);
  --enudge-mint:        #8AD8F2;   /* light sky — dark-mode accents */
  --enudge-indigo:      var(--orchid-500);
  --enudge-violet:      var(--orchid-500);
  --enudge-orchid:      var(--orchid-500);

  /* ---------- Neutrals ---------- */
  --ink-1: #0E1B2C;   /* primary text */
  --ink-2: #2B3B52;   /* body */
  --ink-3: #5A6B82;   /* muted body */
  --ink-4: #8593A7;   /* placeholder, captions */
  --ink-5: #B7C2D2;   /* disabled */
  --line:  #E3E8F0;   /* borders, dividers */
  --line-strong: #C9D2E0;
  --surface-0: #FFFFFF;
  --surface-1: #F7F9FC;   /* page bg / very subtle */
  --surface-2: #EEF3F9;   /* panel bg */
  --surface-3: #E1ECF6;   /* selected / hover panel */
  --surface-ink: #0E1B2C; /* dark surface */

  /* ---------- Semantic ---------- */
  --success: #1FB07A;
  --success-bg: #E6F7EF;
  --warning: #E8A33B;
  --warning-bg: #FBF1DF;
  --danger:  #E0496B;     /* heart / unsubscribe accent */
  --danger-bg: #FCE8ED;
  --info:    var(--enudge-sky);
  --info-bg: #E2F2FC;

  /* ---------- Foreground / background semantic aliases ---------- */
  --fg-1: var(--ink-1);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-muted: var(--ink-4);
  --fg-on-brand: #FFFFFF;
  --fg-link: var(--enudge-blue);
  --fg-link-hover: var(--enudge-deep-blue);
  --bg-page: var(--surface-1);
  --bg-card: var(--surface-0);
  --bg-panel: var(--surface-2);

  /* ---------- Type ---------- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: 56px;   /* hero — Plus Jakarta Sans 800 */
  --fs-h1:      40px;
  --fs-h2:      30px;
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 12px;

  --lh-tight:   1.1;     /* @kind font */
  --lh-snug:    1.25;    /* @kind font */
  --lh-normal:  1.5;     /* @kind font */
  --lh-loose:   1.65;    /* @kind font */

  --tracking-tight:   -0.01em;   /* @kind font */
  --tracking-normal:  0;         /* @kind font */
  --tracking-eyebrow: 0.12em;    /* @kind font */
  --tracking-button:  0.04em;    /* @kind font */

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;

  /* ---------- Radii ---------- */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;   /* card default */
  --radius-5: 24px;   /* hero cards, modals */
  --radius-pill: 999px;

  /* ---------- Shadows / elevation ---------- */
  --shadow-1: 0 1px 2px rgba(16, 35, 60, 0.06), 0 1px 1px rgba(16, 35, 60, 0.04);
  --shadow-2: 0 4px 14px rgba(16, 35, 60, 0.08), 0 1px 2px rgba(16, 35, 60, 0.04);
  --shadow-3: 0 14px 36px rgba(16, 35, 60, 0.12), 0 2px 6px rgba(16, 35, 60, 0.05);
  --shadow-4: 0 30px 70px rgba(16, 35, 60, 0.18), 0 6px 16px rgba(16, 35, 60, 0.08);
  --shadow-brand: 0 14px 36px rgba(188, 113, 219, 0.30);
  --ring-focus: 0 0 0 3px rgba(188, 113, 219, 0.32);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);  /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 360ms;   /* @kind other */
}

/* ============================================================
   Base type — apply by adding `class="es-prose"` to a wrapper
   or use the semantic tag styles below directly.
   ============================================================ */

.es-root,
.es-prose {
  font-family: var(--font-sans);
  color: var(--fg-1);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.es-display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.es-h1 { font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.es-h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-snug); }
.es-h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); }
.es-h4 { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-snug); }

.es-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg-2); }
.es-body    { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-2); }
.es-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-3); }
.es-caption { font-size: var(--fs-caption); color: var(--fg-muted); }

.es-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--enudge-blue);
}
.es-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.es-link:hover { color: var(--fg-link-hover); border-bottom-color: currentColor; }

.es-gradient-text {
  background: var(--enudge-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* ============================================================
   Buttons — primary uses the brand gradient, secondary is ghost,
   tertiary is a text link. All have a 4px focus ring.
   ============================================================ */

.es-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-button);
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  text-decoration: none;
}
.es-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.es-btn:active { transform: translateY(1px); }

.es-btn-primary {
  background: var(--brand);
  color: var(--fg-on-brand);
  box-shadow: var(--shadow-brand);
}
.es-btn-primary:hover { background: var(--brand-hover); }

.es-btn-secondary {
  background: var(--surface-0);
  color: var(--enudge-deep-blue);
  border-color: var(--line-strong);
}
.es-btn-secondary:hover { border-color: var(--enudge-sky); color: var(--enudge-sky); }

.es-btn-ghost {
  background: transparent;
  color: var(--enudge-deep-blue);
}
.es-btn-ghost:hover { background: var(--surface-2); }

.es-btn-sm { padding: 8px 16px; font-size: var(--fs-caption); }
.es-btn-lg { padding: 16px 28px; font-size: var(--fs-body); }

/* ============================================================
   Card primitive
   ============================================================ */

.es-card {
  background: var(--bg-card);
  border-radius: var(--radius-4);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  padding: var(--space-6);
}
.es-card-elevated { box-shadow: var(--shadow-3); border-color: transparent; }
.es-card-feature {
  background: var(--enudge-gradient-soft);
  border-color: transparent;
}