/* =============================================================
   EasyPro Plus — Design Tokens
   Extracted from: site/assets/styles.css (canonical marketing site)
   Date: 2026-05-17
   Use: import these :root vars into the software app to keep
        visual parity with the marketing site.
   ============================================================= */

:root {
  /* ── Brand (Apple-aligned) ──────────────────────────────── */
  --ep-blue:       #007AFF;          /* Primary */
  --ep-blue-600:   #0056b3;          /* Hover / pressed */
  --ep-blue-link:  #0051D5;          /* Link / active toggle */
  --ep-blue-50:    #f0f7ff;
  --ep-blue-100:   #e0ecff;
  --ep-orange:     #FF9500;          /* Immigration */
  --ep-green:      #34C759;          /* Success */
  --ep-red:        #FF3B30;          /* Destructive */

  /* ── Sophia palette ─────────────────────────────────────── */
  --sophia-violet:   #8b5cf6;
  --sophia-purple:   #7c3aed;
  --sophia-electric: #4a8bff;
  --sophia-glow:     rgba(139, 92, 246, 0.35);

  /* ── Module accents (1:1 con UI del producto) ───────────── */
  --acc-taxes:       #007AFF;
  --acc-immigration: #FF9500;
  --acc-explain:     #8b5cf6;
  --acc-legal:       #5856D6;        /* Apple indigo */
  --acc-credit:      #FF3B30;
  --acc-insurance:   #5AC8FA;        /* Apple teal */
  --acc-business:    #FF9500;
  --acc-event:       #FF2D55;        /* Apple pink */
  --acc-marketplace: #6e6e73;
  --acc-partner:     #1d1d1f;

  /* ── Neutrals (Apple) ───────────────────────────────────── */
  --ink:      #1d1d1f;               /* Primary text */
  --ink-2:    #2c2c2e;
  --gray-900: #1d1d1f;
  --gray-700: #424245;               /* Body text */
  --gray-500: #6e6e73;               /* Muted text */
  --gray-400: #a1a1a6;
  --gray-300: #d2d2d7;
  --gray-200: #e8e8ed;
  --gray-150: #efeff2;
  --gray-100: #f5f5f7;
  --gray-50:  #fafafa;
  --paper:    #ffffff;

  /* ── Surfaces & borders ─────────────────────────────────── */
  --surface:        #ffffff;
  --surface-alt:    #fafafa;
  --surface-tinted: #f5f5f7;
  --border:         #e8e8ed;
  --border-strong:  #d2d2d7;

  /* ── Dark surfaces ──────────────────────────────────────── */
  --dark-bg:         #1d1d1f;
  --dark-card:       #2c2c2e;
  --dark-border:     rgba(255, 255, 255, 0.10);
  --dark-text:       #f5f5f7;
  --dark-text-muted: #a1a1a6;

  /* ── Status pills (clients table) ───────────────────────── */
  --status-review-bg:  #fff5e0;  --status-review-fg:  #b8862b;
  --status-intake-bg:  #e8efff;  --status-intake-fg:  #2257ff;
  --status-signed-bg:  #e7f7f0;  --status-signed-fg:  #0aa674;
  --status-draft-bg:   #f3f5fa;  --status-draft-fg:   #6e6e73;
  --status-urgent-bg:  #fde9e6;  --status-urgent-fg:  #d6483a;

  /* ── Radii (Apple) ──────────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-pill: 980px;                   /* Apple capsule */

  /* ── Shadows (Apple soft) ───────────────────────────────── */
  --sh-1: 0 1px 3px rgba(0, 0, 0, 0.04);
  --sh-2: 0 2px 12px rgba(0, 0, 0, 0.04);
  --sh-3: 0 8px 32px rgba(0, 0, 0, 0.08);
  --sh-card:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 16px 48px rgba(0, 0, 0, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.04);

  /* ── Typography (SF Pro stack, matches product) ─────────── */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono",
    "Roboto Mono", monospace;

  /* ── Layout primitives ──────────────────────────────────── */
  --container-max:    1240px;
  --container-gutter: 48px;
  --header-height:    64px;
  --section-pad:      96px;
  --section-pad-tight:64px;
  --section-pad-wide: 120px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-snappy:   0.12s ease;
  --ease-standard: 0.15s ease;
  --ease-card:     0.25s ease;
}

/* Base body — apply to the app shell once */
html, body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}
body {
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.011em;
}

/* Headings (clamped, Apple display-like) */
h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  line-height: 1.05;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 5.4vw, 68px); letter-spacing: -0.035em; }
h2 { font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.03em; line-height: 1.08; }
h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; }
h4 { font-size: 17px; line-height: 1.25; }