/* Mentelize — generated from tokens.json */
:root, [data-theme="light"] {
  --background: hsl(191, 36%, 96%); /* Page background: pearl in light (app --background), near-black in dark. The public site uses white sections (`card`) over it. */
  --foreground: hsl(210, 29%, 24%); /* Headings and body text on `background`, `card`, `muted` (≥10:1 light, ≥17:1 dark). */
  --card: hsl(0, 0%, 100%); /* Cards, product tiles, pricing plans, menus. */
  --card-foreground: var(--foreground); /* Text on `card`. */
  --card-border: hsl(200, 28%, 88%); /* Card outline (decorative). */
  --border: hsl(200, 28%, 83%); /* Hairlines, section dividers. */
  --input: hsl(200, 28%, 83%); /* Input borders. FLAG: about 1.4:1 light / 1.9:1 dark on `background`, under the 3:1 a control edge needs; components use `muted-foreground` for field borders instead. */
  --primary: hsl(0, 0%, 0%); /* Brand black (replaces the app's indigo): main action buttons, active nav, prices, headings in brand colour. Inverts to white in dark. Text on it is `primary-foreground` (21:1 both themes). */
  --primary-foreground: hsl(0, 0%, 100%); /* Text on `primary`: white on black, black on white in dark. */
  --primary-soft: rgba(0, 0, 0, 0.06); /* Icon tiles behind feature icons, icon in `primary` on it. */
  --secondary: hsl(191, 28%, 91%); /* Secondary button fill, chips. */
  --secondary-foreground: var(--foreground); /* Text on `secondary`. */
  --muted: hsl(191, 28%, 91%); /* Muted panels, skeletons, table header rows. */
  --muted-foreground: hsl(205, 17%, 50%); /* Secondary text, captions on `background`, `card`. FLAG: 3.66:1 on `background` and 3.97:1 on `card` in light, below 4.5:1 (dark passes, ≥7:1). */
  --accent: hsl(162, 89%, 49%); /* The mint of the logo: CTA fills on black, selected states, check icons, chart 1. Text on it is `accent-foreground`. Never text on light grounds (1.43:1). */
  --accent-foreground: hsl(0, 0%, 0%); /* Text on `accent`: black (13.6:1). */
  --accent-soft: rgba(6, 243, 176, 0.15); /* Tinted chips (‘Nouveau’, categories) with `black` text, mint text in dark. */
  --destructive: hsl(4, 75%, 57%); /* Delete buttons, form errors, with `destructive-foreground`. FLAG: white on the light value is 3.93:1. */
  --destructive-foreground: hsl(0, 0%, 100%); /* Text on `destructive`. */
  --ring: hsl(162, 89%, 49%); /* Focus ring, 2px solid, offset 3px, on black bands and in dark (≥13:1). On light grounds components use `primary` (black) instead: mint is 1.43:1 there. */
  --sidebar: hsl(0, 0%, 0%); /* App sidebars: black in every product (replaces indigo). */
  --sidebar-foreground: hsl(0, 0%, 98%); /* Text on `sidebar`. */
  --sidebar-border: hsl(0, 0%, 15%); /* Sidebar dividers. */
  --sidebar-primary: hsl(162, 89%, 49%); /* Active item marker in the sidebar (mint). */
  --sidebar-primary-foreground: hsl(0, 0%, 0%); /* Text on `sidebar-primary` (mint): black. */
  --sidebar-accent: hsl(0, 0%, 18%); /* Hovered sidebar item. */
  --sidebar-accent-foreground: hsl(0, 0%, 98%); /* Text on `sidebar-accent`. */
  --chart-1: hsl(162, 89%, 49%); /* Chart series 1 (mint). */
  --chart-2: hsl(204, 62%, 47%); /* Chart series 2 (sky). */
  --chart-3: hsl(175, 100%, 33%); /* Chart series 3 (teal). */
  --chart-4: hsl(37, 90%, 51%); /* Chart series 4 (amber). */
  --chart-5: hsl(210, 29%, 24%); /* Chart series 5 (slate). */
  --status-pending: hsl(210, 8%, 88%); /* Document status ‘En attente’ (badge fill, with text). */
  --status-validated: hsl(210, 85%, 48%); /* Status ‘Validé’. */
  --status-sent: hsl(142, 71%, 45%); /* Status ‘Envoyé’. */
  --status-error: hsl(0, 72%, 50%); /* Status ‘En anomalie’. Status colours always carry their word. */
  --black: #000000; /* Brand black, replaces the former indigo: hero and closing bands, public header (default tone), footer, text on mint. Text on it: white, paragraphs white at 80 %. */
  --black-soft: #141414; /* Raised surfaces on black bands: product screenshot frame, hovered items, cards placed on the hero. */
  --sky: #2e86c1; /* Secondary hue (--color-sky): hero glow, KPI accents. Not for text on white (3.97:1). */
  --teal: #00a896; /* App teal (--color-teal): decorative fills and chart 3. Not for text on light grounds (2.98:1). */
  --mint: #06f3b0; /* The logo's two arrows and the UI accent (--color-accent): header underline, CTA fill, glows, ::selection. Text on it: `black`. */
  --mint-dark: #00d4b4; /* Mint hover/pressed (--color-accent-dark). */
  --pearl: #f0f7f8; /* Alternating section bands of the public site (--color-pearl). */
  --pearl-dark: #e3eef0; /* Borders on pearl (--color-pearl-dark). */
  --slate: #2c3e50; /* Logo wordmark colour (--color-slate), same value as the SVG logo's #2C3E50. */
  --mist: #8fa3b1; /* Scrollbar, disabled icons (--color-mist). Never text (2.8:1 on white). */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06); /* Resting cards. */
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10); /* Hovered cards, menus. */
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.14); /* Dialogs. */
  --shadow-2xl: 0 20px 60px rgba(0,0,0,0.22); /* Product screenshot in the hero (shadow-2xl). */
  --shadow-teal: 0 4px 20px rgba(6,243,176,0.30); /* Glow under mint CTAs. */
}
[data-theme="dark"] {
  --background: hsl(0, 0%, 4%);
  --foreground: hsl(0, 0%, 96%);
  --card: hsl(0, 0%, 8%);
  --card-foreground: var(--foreground);
  --card-border: hsl(0, 0%, 15%);
  --border: hsl(0, 0%, 17%);
  --input: hsl(0, 0%, 24%);
  --primary: hsl(0, 0%, 100%);
  --primary-foreground: hsl(0, 0%, 0%);
  --secondary: hsl(0, 0%, 15%);
  --secondary-foreground: var(--foreground);
  --muted: hsl(0, 0%, 12%);
  --muted-foreground: hsl(0, 0%, 64%);
  --destructive: hsl(4, 75%, 50%);
  --sidebar: hsl(0, 0%, 2%);
  --sidebar-border: hsl(0, 0%, 12%);
  --sidebar-accent: hsl(0, 0%, 14%);
  --chart-1: hsl(162, 89%, 55%);
  --chart-2: hsl(204, 62%, 60%);
  --chart-3: hsl(175, 100%, 45%);
  --chart-4: hsl(37, 90%, 60%);
  --chart-5: hsl(210, 20%, 70%);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-2xl: 0 20px 60px rgba(0,0,0,0.6);
}
:root {
  --space-1: 4px; /* Icon-to-label gap. */
  --space-2: 8px; /* Tight stacks, chip padding. */
  --space-3: 12px; /* Button groups (space-x-3), table cell vertical padding. */
  --space-4: 16px; /* Field spacing, mobile gutter. */
  --space-6: 24px; /* Card padding (p-6), section spacing in the app, gutter from sm. */
  --space-8: 32px; /* Page padding (px-8), gap between cards. */
  --space-12: 48px; /* Gap under a section title; grid gap of the hero. */
  --space-20: 80px; /* Vertical padding of a public section (py-20). */
  --space-28: 112px; /* Hero vertical padding on desktop (md:py-28). */
  --radius-sm: 3px; /* Small tags. */
  --radius-md: 6px; /* Buttons, inputs, nav items. */
  --radius: 8px; /* Base --radius of the shadcn components. */
  --radius-lg: 9px; /* Cards, product tiles, screenshots frames. */
  --radius-pill: 9999px; /* Hero chip, language switch, status badges. */
  --font-sans: "Plus Jakarta Sans", "IBM Plex Sans Arabic", sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Plus Jakarta Sans", sans-serif;
  --font-serif: "Lora", Georgia, serif;
  --font-mono: "JetBrains Mono", monospace;
  --text-hero: 700 60px/1.25 var(--font-sans); /* Hero title (36px on mobile, 48px tablet). White on `black`. */
  --text-section-title: 700 36px/40px var(--font-sans); /* Section title (landing md:text-4xl; 30px/36px on mobile). */
  --text-card-title: 700 20px/28px var(--font-sans); /* Product and plan names (text-xl). */
  --text-lead: 400 18px/28px var(--font-sans); /* Paragraph under hero and section titles (text-lg). */
  --text-body-sm: 400 14px/1.625 var(--font-sans); /* Card and feature descriptions in `muted-foreground` (text-sm leading-relaxed). */
  --text-chip: 500 12px/16px var(--font-sans); /* Hero chip and badges (text-xs font-medium tracking-wide). */
  --text-page-title: 600 24px/32px var(--font-sans); /* App page titles (text-2xl font-semibold). */
  --text-section-header: 500 18px/28px var(--font-sans); /* App section headers (text-lg font-medium). */
  --text-body: 400 16px/24px var(--font-sans); /* Running text (text-base). */
  --text-table-header: 500 14px/20px var(--font-sans); /* Uppercase table headers (text-sm font-medium uppercase tracking-wide). */
  --text-helper: 400 14px/20px var(--font-sans); /* Helper text under fields, in `muted-foreground`. */
  --text-ar-hero: 700 54px/1.5 var(--font-arabic); /* Hero title in Arabic: taller leading than `hero` for the script. */
  --text-ar-section-title: 700 32px/1.5 var(--font-arabic); /* Section title in Arabic. */
  --text-ar-body: 400 17px/1.8 var(--font-arabic); /* Running text in Arabic. */
  --text-ar-small: 400 15px/1.7 var(--font-arabic); /* Card descriptions, captions and chips in Arabic (no uppercase, no tracking). */
  --text-code: 400 14px/20px var(--font-mono); /* Invoice numbers, codes, L4G, domains (text-sm font-mono). Always LTR. */
}
.hero {
  font-family: var(--font-sans);
  font-size: 60px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
}
.section-title {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: 0;
}
.card-title {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
}
.lead {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-sm {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.625;
  font-weight: 400;
  letter-spacing: 0;
}
.chip {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.025em;
}
.page-title {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0;
}
.section-header {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.table-header {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.025em;
}
.helper {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.ar-hero {
  font-family: var(--font-arabic);
  font-size: 54px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0;
}
.ar-section-title {
  font-family: var(--font-arabic);
  font-size: 32px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0;
}
.ar-body {
  font-family: var(--font-arabic);
  font-size: 17px;
  line-height: 1.8;
  font-weight: 400;
  letter-spacing: 0;
}
.ar-small {
  font-family: var(--font-arabic);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
}
.code {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}