/* ============================================================
   Wholix Design System — Colors & Type
   ------------------------------------------------------------
   Source of truth for color and typographic tokens.
   Derived from the Email Campaigns product screenshot.
   ============================================================ */

/* ---------- Fonts ----------
   Wholix brand font: **Inter** (variable, weights 100–900).
   Served locally from fonts/Inter-VariableFont_opsz_wght.ttf.
   JetBrains Mono kept from Google Fonts for code tokens only.
---------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============== BRAND ============== */
  --wholix-amber-50:   #FFF8E6;
  --wholix-amber-100:  #FFF0CC;
  --wholix-amber-200:  #FFE299;
  --wholix-amber-300:  #FFD166;
  --wholix-amber-400:  #FFC04A;
  --wholix-amber-500:  #FFB61F;  /* primary brand amber (buttons, logo accents) */
  --wholix-amber-600:  #F5A810;  /* hover */
  --wholix-amber-700:  #D98E00;  /* press / emphasis */
  --wholix-amber-800:  #A86C00;
  --wholix-amber-900:  #7A4E00;

  /* Warm info banner yellow (from screenshot's alert strip) */
  --wholix-cream-bg:   #FFF3D3;
  --wholix-cream-border: #FFE0A1;

  /* ============== NEUTRALS ============== */
  /* Warm-tinted greys. UI is near-white with subtle beige undertone
     in the app chrome and cooler neutrals in the content area. */
  --wholix-ink-950:    #0A0A0A;  /* near-black titles */
  --wholix-ink-900:    #111317;
  --wholix-ink-800:    #1E2128;
  --wholix-ink-700:    #2C303A;
  --wholix-ink-600:    #474C57;
  --wholix-ink-500:    #6B7280;  /* body secondary */
  --wholix-ink-400:    #9AA0A9;  /* placeholder / disabled */
  --wholix-ink-300:    #C7CBD1;  /* borders strong */
  --wholix-ink-200:    #E5E7EB;  /* borders default */
  --wholix-ink-100:    #F2F3F5;  /* surfaces subtle */
  --wholix-ink-50:     #F9FAFB;  /* app wash */
  --wholix-white:      #FFFFFF;

  /* ============== SEMANTIC — SURFACES ============== */
  --surface-app:       var(--wholix-ink-50);   /* outer page wash */
  --surface-canvas:    var(--wholix-white);    /* main content background */
  --surface-raised:    var(--wholix-white);    /* cards, panels */
  --surface-sunken:    var(--wholix-ink-100);  /* nested wells, input bg */
  --surface-nav:       var(--wholix-white);    /* sidebar */
  --surface-accent:    var(--wholix-cream-bg); /* info/announcement */

  /* ============== SEMANTIC — FG ============== */
  --fg-1: var(--wholix-ink-950);   /* headlines */
  --fg-2: var(--wholix-ink-700);   /* body */
  --fg-3: var(--wholix-ink-500);   /* secondary body, labels */
  --fg-4: var(--wholix-ink-400);   /* placeholder, meta, disabled text */
  --fg-on-amber: #1A1204;          /* dark text on amber button */
  --fg-inverse: var(--wholix-white);

  /* ============== SEMANTIC — BORDERS ============== */
  --border-subtle:  var(--wholix-ink-200);
  --border-default: var(--wholix-ink-200);
  --border-strong:  var(--wholix-ink-300);
  --border-focus:   var(--wholix-amber-500);
  --border-input:   #E8E9EC;

  /* ============== SEMANTIC — ACCENT (brand) ============== */
  --accent:           var(--wholix-amber-500);
  --accent-hover:     var(--wholix-amber-600);
  --accent-press:     var(--wholix-amber-700);
  --accent-soft:      var(--wholix-cream-bg);
  --accent-soft-fg:   var(--wholix-amber-800);
  --accent-soft-border: var(--wholix-cream-border);

  /* ============== STATUS ============== */
  --success-500:  #16A34A;
  --success-soft: #DCFCE7;
  --warning-500:  #F59E0B;
  --warning-soft: #FEF3C7;
  --danger-500:   #EF4444;
  --danger-soft:  #FEE2E2;
  --info-500:     #3B82F6;
  --info-soft:    #DBEAFE;

  /* ============== RADII ============== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ============== SPACING (4-pt base) ============== */
  --space-0: 0;
  --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: 48px;
  --space-10: 64px;

  /* ============== SHADOWS ============== */
  /* Wholix uses airy, diffuse shadows on floating panels. Panels sit
     mostly flush with a 1px hairline, with a secondary soft bloom. */
  --shadow-hairline: 0 0 0 1px var(--border-subtle);
  --shadow-xs:  0 1px 2px rgba(16, 18, 24, 0.04);
  --shadow-sm:  0 2px 6px rgba(16, 18, 24, 0.05), 0 1px 2px rgba(16, 18, 24, 0.04);
  --shadow-md:  0 6px 18px rgba(16, 18, 24, 0.06), 0 2px 4px rgba(16, 18, 24, 0.04);
  --shadow-lg:  0 20px 40px -12px rgba(16, 18, 24, 0.12), 0 6px 14px rgba(16, 18, 24, 0.06);
  --shadow-focus: 0 0 0 4px rgba(255, 182, 31, 0.22);
  --shadow-inset-well: inset 0 1px 2px rgba(16, 18, 24, 0.04);

  /* ============== TYPE — FAMILIES ============== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============== TYPE — SCALE ============== */
  /* A tight, practical scale for a CRM app. Body is 14px (compact) */
  --fs-11: 11px;  /* micro / uppercase eyebrows */
  --fs-12: 12px;  /* caption, meta */
  --fs-13: 13px;  /* dense UI label */
  --fs-14: 14px;  /* body */
  --fs-15: 15px;  /* comfortable body */
  --fs-16: 16px;  /* body large */
  --fs-18: 18px;  /* h5 */
  --fs-20: 20px;  /* h4 / panel title */
  --fs-24: 24px;  /* h3 / screen title */
  --fs-30: 30px;  /* h2 */
  --fs-36: 36px;  /* h1 */
  --fs-48: 48px;  /* display */

  /* ============== TYPE — LINE HEIGHT ============== */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ============== TYPE — WEIGHTS ============== */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extrabold: 800;

  /* ============== Z ============== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ============== SEMANTIC TYPE CLASSES ============== */

html, body { font-family: var(--font-sans); color: var(--fg-2); background: var(--surface-app); }

.wx-display {
  font-family: var(--font-display);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  color: var(--fg-1);
}
.wx-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-36);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.wx-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.wx-h3 {
  /* screen titles like "Email Campaigns" */
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.wx-h4 {
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.wx-h5 {
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
.wx-body {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  color: var(--fg-2);
}
.wx-body-lg {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.wx-caption {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.wx-label {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--fg-2);
  letter-spacing: 0;
}
.wx-eyebrow {
  /* Section labels in sidebar like "CRM", "E-MAIL CAMPAIGN", "WORKSPACE" */
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--fg-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wx-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--fg-2);
}

/* Element defaults so plain h1/p etc. render sensibly */
h1 { @apply wx-h1; }