/* =============================================================
 * Zoboox Design System — tokens
 * Color, type, spacing, radii, shadows, motion.
 * Drop this file into any page; it sets up CSS variables only.
 * Fonts load from Google Fonts (Geist + Geist Mono).
 * ============================================================= */

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

:root {
  /* ---------- COLOR — Raw scale ---------- */

  /* Ink — cool navy (rooted in Zoho Books #22263C) */
  --ink-900: #22263C;   /* primary text */
  --ink-800: #2E3247;
  --ink-700: #404557;   /* secondary text on white */
  --ink-600: #555A6A;
  --ink-500: #6F7385;   /* tertiary text, captions */
  --ink-400: #898D9D;
  --ink-300: #ABAEB9;   /* disabled text, very light icons */
  --ink-200: #C8CACF;
  --ink-100: #DEE0E5;   /* hairline borders */
  --ink-50:  #EFF0F2;   /* subtle fills (hover bg, dividers) */
  --ink-25:  #F6F7F8;   /* lightest surface tint */

  /* Canvas / surface */
  --canvas: #F7F8FA;    /* cool off-white — default page bg */
  --surface: #FFFFFF;   /* elevated — cards, modals */
  --surface-tint: #F1F3F7; /* sidebar tint, subtle panels */

  /* Primary — Zoho Books blue (#1570DA) */
  --primary-50:  #E8F1FC;
  --primary-100: #CFE2FA;
  --primary-200: #9BC2F4;
  --primary-300: #5C9CE9;
  --primary-400: #2E7EE0;
  --primary-500: #1570DA;   /* base */
  --primary-600: #1262C0;
  --primary-700: #0F54A4;   /* hover */
  --primary-800: #0C4180;
  --primary-900: #08305F;

  /* Accent — UAE-Green (used only for "fresh / official / verified") */
  --accent-50:  #E6F4EE;
  --accent-100: #C3E6D5;
  --accent-200: #8FCEB0;
  --accent-300: #4FB084;
  --accent-500: #00855E;   /* base */
  --accent-700: #006B4B;

  /* Semantic — all tuned warm */
  --success: #00855E;
  --success-bg: #E6F4EE;
  --success-border: #8FCEB0;

  --warning: #B88317;       /* amber for "stale" rate */
  --warning-bg: #FBF2DC;
  --warning-border: #E9C870;

  --danger: #C0382B;
  --danger-bg: #FBE9E6;
  --danger-border: #ECB1A7;

  --info: #1F5FB5;
  --info-bg: #E5EEFA;
  --info-border: #AAC4EA;

  /* ---------- COLOR — Semantic aliases ---------- */
  --fg-1: var(--ink-900);   /* primary text */
  --fg-2: var(--ink-700);   /* secondary text */
  --fg-3: var(--ink-500);   /* tertiary, meta, captions */
  --fg-disabled: var(--ink-300);
  --fg-inverse: #FFFFFF;
  --fg-link: var(--primary-500);
  --fg-link-hover: var(--primary-700);
  --fg-brand: var(--primary-500);

  --bg-page: var(--canvas);
  --bg-surface: var(--surface);
  --bg-sunken: var(--ink-25);
  --bg-hover: var(--ink-50);
  --bg-active: var(--ink-100);

  --border: var(--ink-100);
  --border-strong: var(--ink-200);
  --border-focus: var(--primary-500);

  /* ---------- TYPE — Families ---------- */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Roboto Mono', monospace;
  --font-display: var(--font-sans); /* same family, just heavier */

  /* ---------- TYPE — Scale (px) ---------- */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base: 15px;
  --text-md:  16px;
  --text-lg:  18px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;
  --text-6xl: 64px;
  --text-display: 80px;

  /* ---------- TYPE — Line heights ---------- */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* ---------- SPACING (8pt scale, with 4) ---------- */
  --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: 80px;
  --space-11: 112px;
  --space-12: 160px;

  /* ---------- RADII ---------- */
  --radius-sm: 6px;     /* inputs, small buttons, chips */
  --radius-md: 10px;    /* cards, modals */
  --radius-lg: 16px;    /* feature panels, marketing surfaces */
  --radius-xl: 24px;    /* large hero containers */
  --radius-pill: 999px; /* status badges only */

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(34,38,60,0.06), 0 1px 1px rgba(34,38,60,0.04);
  --shadow-md: 0 4px 12px rgba(34,38,60,0.08), 0 2px 4px rgba(34,38,60,0.04);
  --shadow-lg: 0 16px 40px rgba(34,38,60,0.14), 0 4px 12px rgba(34,38,60,0.06);
  --shadow-focus: 0 0 0 3px rgba(21, 112, 218, 0.28);

  /* ---------- MOTION ---------- */
  --ease-quiet: cubic-bezier(0.32, 0.72, 0.36, 1);
  --dur-fast:  120ms;
  --dur-base:  160ms;
  --dur-slow:  220ms;

  /* ---------- LAYOUT ---------- */
  --container-marketing: 1200px;
  --container-app:       1280px;
  --container-prose:     64ch;
  --app-topbar-h:   56px;
  --app-sidebar-w:  240px;
  --mkt-topnav-h:   72px;
}

/* =============================================================
 * Semantic element styles
 * Apply when colors_and_type.css is loaded; classes are
 * non-resetting (no global * resets here) — use as building blocks.
 * ============================================================= */

.zb-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv01';
}

.zb-h1, h1.zb {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.025em;
  color: var(--fg-1);
}
.zb-h2, h2.zb {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-4xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.022em;
  color: var(--fg-1);
}
.zb-h3, h3.zb {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.zb-h4, h4.zb {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--fg-1);
}
.zb-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-500);
}
.zb-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.zb-body-base {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
}
.zb-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.zb-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--fg-3);
}
.zb-mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum', 'zero';
}
.zb-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.zb-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-base) var(--ease-quiet);
}
.zb-link:hover { color: var(--fg-link-hover); }
.zb-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-50);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  color: var(--ink-800);
}