/* nterny — Color tokens
   Sourced from the real landing codebase (ee/apps/landing). */

:root {
  /* ---- Base palette ---- */
  --page-bg: #f6f9fc;          /* almost-white, bluish page background */
  --ink: #011627;              /* dark navy — primary text & primary button bg */
  --canvas-warm: #ece8de;      /* warm beige — demo-block canvas */

  /* Grays (text) */
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --slate-500: #64748b;

  /* Neutrals / utility */
  --black: #111111;            /* cycle-words, secondary-button text */
  --white: #ffffff;

  /* Borders */
  --border-slate: rgba(148, 163, 184, 0.18);   /* glassy slate hairline */
  --border-slate-strong: rgba(148, 163, 184, 0.20);
  --border-chip: #e5e7eb;      /* chip / tag border */
  --border-quote: #cbd5e1;     /* blockquote border */

  /* Accent — amber "alpha" tag */
  --amber-bg: #fffbeb;
  --amber-text: #92400e;
  --amber-border: #fef3c7;

  /* Button states */
  --btn-primary-bg: #011627;
  --btn-primary-fg: #ffffff;
  --btn-primary-hover: #6e6e6e;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-fg: #000000;
  --btn-secondary-hover: #f2f2f2;

  /* ---- Semantic aliases ---- */
  --surface-page: var(--page-bg);
  --surface-canvas: var(--canvas-warm);
  --surface-card: rgba(255, 255, 255, 0.85);   /* glassy card */
  --surface-shell: rgba(255, 255, 255, 0.95);

  --text-strong: var(--ink);
  --text-body: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-subtle: var(--slate-500);

  --border-hairline: var(--border-slate);
  --border-card: var(--border-slate-strong);
}