/* ─────────────────────────────────────────────────────────────────
   Karam Design System — Colors & Type
   Tokens derived from:
   • Brand guide PDF  (assets/brand_guide.pdf)
   • Codebase tokens  (apps/web layout.tsx + packages/ui globals.css)
   • Widget tokens    (apps/widget/src/app.css)
   Primary UI is Arabic / RTL. Fonts ship bundled (see /fonts).
   ───────────────────────────────────────────────────────────────── */

/* ── Fonts ──────────────────────────────────────────────────────── */
/* Karam's published brand guide calls for "DIN Next LT Arabic".
   DIN Next is a licensed typeface — the production codebase ships
   Quicksand (Latin) + Zain (Arabic) from Google Fonts as the
   bundled substitute. This design system uses the same pair so
   artefacts match production pixel-for-pixel. Swap both @font-face
   blocks below for DIN Next LT Arabic if a proper license is held. */

@font-face {
  font-family: "Zain";
  src: url("fonts/Zain-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Zain";
  src: url("fonts/Zain-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Zain";
  src: url("fonts/Zain-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Zain";
  src: url("fonts/Zain-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Quicksand";
  src: url("fonts/Quicksand-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("fonts/Quicksand-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("fonts/Quicksand-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Quicksand";
  src: url("fonts/Quicksand-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ── Brand palette (hex anchors from PDF + production) ────────── */
  --karam-navy:       #164863;  /* primary / kohl navy — trust, stability */
  --karam-steel:      #427D9D;  /* accent / steel blue — product accent */
  --karam-steel-prod: #417C9C;  /* accent as shipped in production theme */
  --karam-surface:    #F1F6F5;  /* surface light */
  --karam-gray:       #E5E5E5;  /* neutral gray divider */
  --karam-bg:         #F6F9F9;  /* app background (production) */
  --karam-card:       #FAFCFC;  /* card surface (production) */
  --karam-ink:        #154762;  /* foreground / body text (production) */
  --karam-muted-ink:  #39637B;  /* muted text */
  --karam-accent-sky: #90D2E1;  /* secondary accent */
  --karam-mint:       #D6F2ED;  /* mint panel — subtle highlight */
  --karam-border:     #CDDFDC;  /* hairline border */
  --karam-input:      #E1E6E5;  /* input outline */
  --karam-danger:     #CF3868;  /* destructive pink-rose */
  --karam-success:    #16A34A;  /* online indicator */
  --karam-warn:       #F59E0B;  /* attention amber */

  /* ── Semantic aliases (shadcn-compatible) ─────────────────────── */
  --background: var(--karam-bg);
  --foreground: var(--karam-ink);
  --card: var(--karam-card);
  --card-foreground: var(--karam-ink);
  --popover: var(--karam-card);
  --popover-foreground: var(--karam-ink);
  --primary: var(--karam-steel-prod);
  --primary-foreground: #ffffff;
  --secondary: var(--karam-surface);
  --secondary-foreground: var(--karam-ink);
  --muted: var(--karam-mint);
  --muted-foreground: var(--karam-muted-ink);
  --accent: var(--karam-accent-sky);
  --accent-foreground: #254A66;
  --destructive: var(--karam-danger);
  --destructive-foreground: #ffffff;
  --border: var(--karam-border);
  --input: var(--karam-input);
  --ring: var(--karam-steel-prod);

  /* Brand-forward primary used for marketing surfaces + deep accents */
  --brand-primary: var(--karam-navy);

  /* ── Typography ──────────────────────────────────────────────── */
  --font-sans: "Zain", "Quicksand", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Zain", "Quicksand", sans-serif; /* same family, heavier weights */
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — tuned for Arabic headings which feel ~10% larger */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;  /* body */
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  60px;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;   /* Arabic needs more than Latin default */
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;

  /* ── Radii — rounded, speech-bubble-adjacent, never sharp ─── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;   /* shadcn default (0.5rem) */
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-bubble: 18px;  /* chat message bubble */
  --radius-pill: 999px;

  /* ── Shadows — soft, cool-navy tinted (matches shipped tokens) ── */
  --shadow-xs:  0px 1px 2px  hsl(234 40% 42% / 0.06);
  --shadow-sm:  0px 3px 0px  hsl(234 40% 42% / 0.06),
                0px 1px 2px  -1px hsl(234 40% 42% / 0.10);
  --shadow-md:  0px 3px 0px  hsl(234 40% 42% / 0.08),
                0px 2px 4px  -1px hsl(234 40% 42% / 0.14);
  --shadow-lg:  0px 4px 10px -2px hsl(234 40% 42% / 0.18);
  --shadow-xl:  0px 10px 24px -6px hsl(234 40% 42% / 0.22);
  --shadow-ring: 0 0 0 3px rgba(65, 124, 156, 0.25);

  /* ── Spacing — 4px base grid ─────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* Dark theme — mirrors production dark tokens */
.dark, [data-theme="dark"] {
  --background: #041525;
  --foreground: #93E3FF;
  --card: #071A2E;
  --card-foreground: #93E3FF;
  --popover: #071A2E;
  --popover-foreground: #93E3FF;
  --primary: #4BB0E4;
  --primary-foreground: #000F1C;
  --secondary: #10364E;
  --secondary-foreground: #93E3FF;
  --muted: #0E2C3F;
  --muted-foreground: #59A9D3;
  --accent: #0E597D;
  --accent-foreground: #93E3FF;
  --destructive: #FC2B75;
  --destructive-foreground: #F8F8F8;
  --border: #133951;
  --input: #10364E;
  --ring: #4BB0E4;
  --brand-primary: #4BB0E4;
}

/* ── Semantic text defaults ─────────────────────────────────── */
html { font-family: var(--font-sans); }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--foreground);
  background: var(--background);
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--karam-navy);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--karam-navy);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--karam-ink);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--karam-ink);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--karam-ink);
}
p, .body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--karam-steel-prod);
}
.caption {
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--muted-foreground);
}
code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

[dir="rtl"] { text-align: start; }
[dir="rtl"] .flip-x { transform: scaleX(-1); }