/* Font files: Fontsource 5.3.0 (Inter, Readex Pro Variable), SIL Open Font License 1.1; licenses in ../fonts/. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-wght-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-wght-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url(../fonts/readex-pro-arabic-wght-normal.woff2) format('woff2-variations'), url(../fonts/readex-pro-arabic-wght-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/*
 * FLLO VISUAL IDENTITY - edit shared branding here.
 * Brand: Fllo.pro; three journey dots (lead > qualified > sale).
 * Voice: Flow. Analyze. Grow. Arabic and English, with RTL/LTR support.
 * CRM: blue action color, pale blue canvas, white glass surfaces.
 * Public/auth: navy canvas, violet/blue/cyan accents, light text.
 * Keep status colors meaningful: qualified violet, visit amber, sold green,
 * lost red. Layout, responsive behavior and feature styles stay in page CSS.
 * Self-hosted Inter (Latin) and Readex Pro (Arabic, variable 160-700) provide consistent text.
 * Existing component-specific radii/shadows are intentionally preserved.
 */
:root {
  --fllo-blue: #1877f2;
  --fllo-blue-strong: #0f62d6;
  --fllo-night-blue: #3b82f6;
  --fllo-violet: #8b5cf6;
  --fllo-qualified: #7c4dff;
  --fllo-cyan: #22d3ee;
  --fllo-ink: #17212f;
  --fllo-muted: #667085;
  --fllo-line: #e5ebf3;
  --fllo-success: #16b364;
  --fllo-warning: #f79009;
  --fllo-danger: #f04438;
  --fllo-canvas: #f4f8ff;
  --fllo-navy: #061226;
  --fllo-navy-raised: #0b1733;
  --fllo-night-ink: #eaf2ff;
  --fllo-night-muted: #9daac2;
  --font-ui: "Inter", "Readex Pro", sans-serif;
  --font-landing: var(--font-ui);
  --font-arabic: var(--font-ui);
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --fllo-positive-ink: #086a3d;
  --fllo-positive-surface: #ecfdf3;
  --fllo-positive-line: #abefc6;
  --fllo-caution-ink: #854a0e;
  --fllo-caution-surface: #fffaeb;
  --fllo-caution-line: #fedf89;
  --fllo-info-surface: #eff8ff;
  --fllo-info-line: #b2ddff;
  --fllo-neutral-ink: #475467;
  --fllo-neutral-surface: #f2f4f7;
  --fllo-neutral-line: #d0d5dd;
  --fllo-caption-size: 13px;
  --fllo-caption-line: 1.55;
  --fllo-space-unit: 4px;
  --fllo-radius-control: 16px;
  --fllo-radius-card: 28px;
  --fllo-radius-pill: 999px;
  --fllo-brand-gradient: linear-gradient(135deg, var(--fllo-violet), var(--fllo-night-blue), var(--fllo-cyan));
}

/* Form controls and menus follow the same script-aware family as page text. */
html, body { font-family: var(--font-ui); }
button, input, select, textarea, optgroup, option { font-family: inherit; }
code, pre, kbd, samp { font-family: var(--font-mono); }

/* Default CRM theme and compatibility aliases used by existing components. */
:root {
  --bg: var(--fllo-canvas);
  --card: #fff;
  --text: var(--fllo-ink);
  --muted: var(--fllo-muted);
  --line: var(--fllo-line);
  --blue: var(--fllo-blue);
  --blue2: var(--fllo-blue-strong);
  --green: var(--fllo-success);
  --yellow: var(--fllo-warning);
  --red: var(--fllo-danger);
  --purple: var(--fllo-qualified);
  --shadow: 0 18px 45px rgba(16,24,40,.08);
}

/* Standalone authentication pages. */
:root[data-fllo-theme="auth"]{
  --bg:var(--fllo-navy);
  --card:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.16);
  --text:var(--fllo-night-ink);
  --muted:var(--fllo-night-muted);
  --blue:var(--fllo-night-blue);
  --purple:var(--fllo-violet);
  --cyan:var(--fllo-cyan);
  --shadow:0 26px 90px rgba(0,0,0,.34);
}

/* Public landing and its authentication overlays. */
:root[data-fllo-theme="landing"]{
      --navy:var(--fllo-navy); --navy2:var(--fllo-navy-raised); --ink:var(--fllo-night-ink); --muted:var(--fllo-night-muted);
      --blue:var(--fllo-night-blue); --purple:var(--fllo-violet); --cyan:var(--fllo-cyan); --glass:rgba(255,255,255,.08);
      --line:rgba(255,255,255,.14); --shadow:0 22px 80px rgba(0,0,0,.34); --radius:28px;
    }

/* Native date controls retain browser keyboard/calendar behavior and ISO values. */
.fllo-native-date{display:grid;gap:6px;min-width:0;max-width:100%;flex:1 1 170px}
.fllo-native-date[hidden]{display:none!important}
.fllo-native-date input[type="date"]{box-sizing:border-box;min-width:0;width:100%;max-width:100%}
.fllo-date-hint,.fllo-date-preview{display:block;min-width:0;white-space:normal;overflow-wrap:anywhere;color:var(--fllo-muted);font-size:var(--fllo-caption-size);font-weight:500;line-height:var(--fllo-caption-line);text-align:start}
.fllo-date-preview{color:var(--fllo-ink);font-weight:650}

/* ---- HIG design tokens (2026-10-16): spacing, radius, type, glass, elevation, motion.
   Applied by fllo-hig.css; reuse them in new UI work. ---- */
:root {
  /* Spacing — 4pt grid */
  --hig-space-1: 4px; --hig-space-2: 8px; --hig-space-3: 12px; --hig-space-4: 16px;
  --hig-space-5: 24px; --hig-space-6: 32px;
  /* Radius — concentric: outer = inner + padding */
  --hig-radius-xs: 8px; --hig-radius-sm: 10px; --hig-radius-md: 12px; --hig-radius-lg: 16px;
  --hig-radius-xl: 20px; --hig-radius-2xl: 28px; --hig-radius-pill: 999px;
  /* Type scale (Apple text styles, px) */
  --hig-text-caption: 12px; --hig-text-footnote: 13px; --hig-text-subhead: 15px;
  --hig-text-body: 16px; --hig-text-title3: 20px; --hig-text-title2: 22px; --hig-text-title1: 28px;
  /* Touch */
  --hig-hit: 44px;
  /* Motion */
  --hig-ease: cubic-bezier(.32, .72, 0, 1);
  --hig-dur-fast: 120ms; --hig-dur: 220ms; --hig-dur-slow: 340ms;
  /* Elevation */
  --hig-shadow-1: 0 1px 2px rgba(16, 24, 40, .05);
  --hig-shadow-2: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -8px rgba(16, 24, 40, .12);
  --hig-shadow-3: 0 2px 6px rgba(16, 24, 40, .06), 0 24px 48px -16px rgba(16, 24, 40, .22);
  /* Glass material (chrome only) — same recipe as the Edit Lead dialog */
  --hig-glass-bg: rgba(255, 255, 255, .72);
  --hig-glass-solid: #f7f9fc;
  --hig-glass-edge: rgba(255, 255, 255, .7);
  --hig-glass-line: rgba(15, 23, 42, .08);
  --hig-glass-blur: blur(20px) saturate(180%);
  --hig-focus: var(--fllo-blue, #1877f2);
}
html[data-theme="dark"] {
  --hig-shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --hig-shadow-2: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -10px rgba(0, 0, 0, .5);
  --hig-shadow-3: 0 2px 6px rgba(0, 0, 0, .35), 0 28px 56px -18px rgba(0, 0, 0, .6);
  --hig-glass-bg: rgba(17, 25, 44, .72);
  --hig-glass-solid: #111a2e;
  --hig-glass-edge: rgba(255, 255, 255, .1);
  --hig-glass-line: rgba(255, 255, 255, .08);
  --hig-focus: #84caff;
}