/* eFascikel — Design Tokens (CSS Custom Properties) */
/* Import in your app root (e.g. globals.css or app.css) and reference via var(--ef-*) */

:root {
  /* ═══ Brand Colors ═══ */
  --ef-navy:       #0f2341;  /* Primary. Backgrounds, headlines on light, logo mark. */
  --ef-navy-2:     #0a1a31;  /* Deeper navy for gradient ends and darkest surfaces. */
  --ef-navy-3:     #081327;  /* Footer / deepest surface. */

  --ef-blue:       #2563eb;  /* Action. Primary buttons, links, focus rings. */
  --ef-blue-2:     #1d4ed8;  /* Hover state for blue. */

  --ef-cyan:       #22d3ee;  /* Accent. AI features, highlights, CTA on dark. */
  --ef-cyan-2:     #67e8f9;  /* Hover state for cyan. */

  --ef-emerald:    #059669;  /* Trust. Success states, paid badges, guarantee. */
  --ef-emerald-2:  #047857;  /* Hover state for emerald. */

  /* ═══ Surfaces ═══ */
  --ef-bg:         #faf9f7;  /* Warm off-white, app background. */
  --ef-bg-2:       #f3f1ec;  /* Alt section background (slightly deeper warm). */
  --ef-card:       #ffffff;  /* Card/surface white. */

  /* ═══ Text ═══ */
  --ef-text:       #1c2b3a;  /* Primary body text. */
  --ef-text-2:     #4a5b6e;  /* Secondary text. */
  --ef-text-3:     #7a8798;  /* Muted / captions. */

  /* ═══ Lines ═══ */
  --ef-line:       #e7e3da;  /* Primary border, matches warm bg. */
  --ef-line-2:     #d9d3c6;  /* Emphasised border. */

  /* ═══ Semantic State ═══ */
  --ef-success:    var(--ef-emerald);
  --ef-warning:    #f59e0b;
  --ef-danger:     #e11d48;
  --ef-info:       var(--ef-blue);

  /* ═══ Type ═══ */
  --ef-font-sans:  'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ef-font-serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --ef-font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (body-relative) */
  --ef-text-xs:    12px;
  --ef-text-sm:    13.5px;
  --ef-text-base:  15px;
  --ef-text-md:    16px;
  --ef-text-lg:    18px;
  --ef-text-xl:    22px;
  --ef-text-2xl:   28px;
  --ef-display-sm: 34px;
  --ef-display-md: 52px;
  --ef-display-lg: 76px;

  /* ═══ Radius ═══ */
  --ef-radius-sm:  8px;
  --ef-radius-md:  14px;
  --ef-radius-lg:  22px;
  --ef-radius-xl:  28px;
  --ef-radius-full: 999px;

  /* ═══ Shadow ═══ */
  --ef-shadow-sm:   0 1px 2px rgba(15,35,65,.06), 0 1px 0 rgba(15,35,65,.04);
  --ef-shadow-md:   0 8px 24px -8px rgba(15,35,65,.12), 0 2px 6px -2px rgba(15,35,65,.06);
  --ef-shadow-lg:   0 30px 60px -20px rgba(15,35,65,.25), 0 12px 24px -12px rgba(15,35,65,.12);
  --ef-shadow-navy: 0 30px 80px -20px rgba(8,19,39,.55), 0 10px 30px -10px rgba(8,19,39,.4);

  /* ═══ Spacing (4px base grid) ═══ */
  --ef-space-1:  4px;
  --ef-space-2:  8px;
  --ef-space-3:  12px;
  --ef-space-4:  16px;
  --ef-space-5:  24px;
  --ef-space-6:  32px;
  --ef-space-7:  48px;
  --ef-space-8:  64px;
  --ef-space-9:  96px;
  --ef-space-10: 128px;
}