/* Boostan theme for the standalone prototypes (feed.html, chat.html, index.html).

   Layers 1–2 below are copied verbatim from Boostan's vendored ShokoofaUI suite theme
   (BoostanFrontEnd/src/app/suite-theme.css; Tailwind @theme layer left out), and layer 4 copies Boostan's own
   tokens (BoostanFrontEnd/src/app/theme.css). Mode is the `.dark` class on <html>, the palette is
   <html data-theme="<slug>">, exactly as in Boostan; boostan-theme.js sets both. The pages map their old local
   token names onto these, so when they are ported into Boostan each local name has a Tailwind equivalent. */

/* 1. Palette layer ---------------------------------------------------------------------------------------- */

/* A5 semantic and presence colors; the same in every palette unless a palette below says otherwise. */
:root {
  --semantic-success: #15803d;
  --semantic-warning: #b45309;
  --semantic-danger: #b91c1c;
  --semantic-info: #1d4ed8;
  --semantic-offline: #80868f;
  --palette-presence-available: var(--semantic-success);
  --palette-presence-away: var(--semantic-warning);
  --palette-presence-busy: var(--semantic-danger);
  --palette-presence-offline: var(--semantic-offline);
}

.dark {
  --semantic-success: #4ade80;
  --semantic-warning: #fbbf24;
  --semantic-danger: #f87171;
  --semantic-info: #60a5fa;
  --semantic-offline: #6b7280;
}

:root,
[data-palette-swatch="lagoon"] {
  /* Lagoon Teal, light (the default palette). */
  --palette-primary: #0f766e;
  --palette-primary-hover: #115e59;
  --palette-brand-accent: #f59e0b;
  --palette-brand-accent-foreground: #0f1f1c;
  --palette-background: #ffffff;
  --palette-surface: #f3f7f6;
  --palette-border: #d6e2df;
  --palette-text: #0f1f1c;
  --palette-muted-text: #52635f;
  --palette-chart-3: #155a54;
  --palette-chart-4: #b67c25;
  --palette-chart-5: #2f403c;
}

.dark,
.dark [data-palette-swatch="lagoon"] {
  /* Lagoon Teal, dark. Brand Accent #FBBF24 → #F59E0B: it equalled Warning (A5.1 rule 4, approved D4). */
  --palette-primary: #2dd4bf;
  --palette-primary-hover: #5eead4;
  --palette-brand-accent: #f59e0b;
  --palette-brand-accent-foreground: #0b1513;
  --palette-background: #0b1513;
  --palette-surface: #13211e;
  --palette-border: #23352f;
  --palette-text: #e6f0ee;
  --palette-muted-text: #94a8a3;
  --palette-chart-3: #8de0d2;
  --palette-chart-4: #f2bd78;
  --palette-chart-5: #94a8a3;
}

:root[data-theme="ink-coral"],
[data-palette-swatch="ink-coral"] {
  /* Ink & Coral, light. */
  --palette-primary: #1e3a5f;
  --palette-primary-hover: #162c49;
  --palette-brand-accent: #e8604c;
  --palette-brand-accent-foreground: #111827;
  --palette-background: #ffffff;
  --palette-surface: #f5f7fa;
  --palette-border: #d9e0e8;
  --palette-text: #111827;
  --palette-muted-text: #5b6675;
  --palette-chart-3: #17253c;
  --palette-chart-4: #a24c45;
  --palette-chart-5: #5b6675;
}

:root[data-theme="ink-coral"].dark,
.dark [data-palette-swatch="ink-coral"] {
  /* Ink & Coral, dark. */
  --palette-primary: #7fa7d9;
  --palette-primary-hover: #a3c1e6;
  --palette-brand-accent: #ff8a75;
  --palette-brand-accent-foreground: #0d1520;
  --palette-background: #0d1520;
  --palette-surface: #152030;
  --palette-border: #253448;
  --palette-text: #e5eaf1;
  --palette-muted-text: #93a1b3;
  --palette-chart-3: #c1d3e9;
  --palette-chart-4: #faaea1;
  --palette-chart-5: #abb6c5;
}

:root[data-theme="ocean"],
[data-palette-swatch="ocean"] {
  /* Ocean Cyan, light. */
  --palette-primary: #0369a1;
  --palette-primary-hover: #075985;
  --palette-brand-accent: #f97316;
  --palette-brand-accent-foreground: #0c1a26;
  --palette-background: #ffffff;
  --palette-surface: #f2f7fb;
  --palette-border: #d4e3ee;
  --palette-text: #0c1a26;
  --palette-muted-text: #50606e;
  --palette-chart-3: #0e5079;
  --palette-chart-4: #945131;
  --palette-chart-5: #50606e;
}

:root[data-theme="ocean"].dark,
.dark [data-palette-swatch="ocean"] {
  /* Ocean Cyan, dark. */
  --palette-primary: #38bdf8;
  --palette-primary-hover: #7dd3fc;
  --palette-brand-accent: #fb923c;
  --palette-brand-accent-foreground: #0a141c;
  --palette-background: #0a141c;
  --palette-surface: #111f2a;
  --palette-border: #213444;
  --palette-text: #e3edf4;
  --palette-muted-text: #8fa3b3;
  --palette-chart-3: #8ad1f8;
  --palette-chart-4: #f6b486;
  --palette-chart-5: #8fa3b3;
}

:root[data-theme="cobalt"],
[data-palette-swatch="cobalt"] {
  /* Cobalt Pro, light. Info → violet: Primary equalled Info (A5.1 rule 4, approved D4). */
  --palette-primary: #1d4ed8;
  --palette-primary-hover: #1e40af;
  --palette-brand-accent: #0ea5e9;
  --palette-brand-accent-foreground: #0f172a;
  --palette-background: #ffffff;
  --palette-surface: #f5f7fb;
  --palette-border: #dce2ec;
  --palette-text: #0f172a;
  --palette-muted-text: #55607a;
  --palette-chart-3: #1a40a9;
  --palette-chart-4: #1b7eb5;
  --palette-chart-5: #55607a;
  --semantic-info: #6d28d9;
}

:root[data-theme="cobalt"].dark,
.dark [data-palette-swatch="cobalt"] {
  /* Cobalt Pro, dark. */
  --palette-primary: #60a5fa;
  --palette-primary-hover: #93c5fd;
  --palette-brand-accent: #38bdf8;
  --palette-brand-accent-foreground: #0b1120;
  --palette-background: #0b1120;
  --palette-surface: #131b2e;
  --palette-border: #243049;
  --palette-text: #e2e8f0;
  --palette-muted-text: #94a0b8;
  --palette-chart-3: #497cbd;
  --palette-chart-4: #8bcff6;
  --palette-chart-5: #94a0b8;
  --semantic-info: #a78bfa;
}

:root[data-theme="graphite-lime"],
[data-palette-swatch="graphite-lime"] {
  /* Graphite & Lime, light. */
  --palette-primary: #27272a;
  --palette-primary-hover: #18181b;
  --palette-brand-accent: #4d7c0f;
  --palette-brand-accent-foreground: #ffffff;
  --palette-background: #ffffff;
  --palette-surface: #f6f6f5;
  --palette-border: #e0e0dc;
  --palette-text: #18181b;
  --palette-muted-text: #5e5e66;
  --palette-chart-3: #808082;
  --palette-chart-4: #3f611d;
  --palette-chart-5: #5e5e66;
}

:root[data-theme="graphite-lime"].dark,
.dark [data-palette-swatch="graphite-lime"] {
  /* Graphite & Lime, dark. */
  --palette-primary: #a3e635;
  --palette-primary-hover: #bef264;
  --palette-brand-accent: #d4d4d8;
  --palette-brand-accent-foreground: #0f0f10;
  --palette-background: #0f0f10;
  --palette-surface: #1a1a1c;
  --palette-border: #2c2c30;
  --palette-text: #ededef;
  --palette-muted-text: #9a9aa3;
  --palette-chart-3: #bdea88;
  --palette-chart-4: #7d7d80;
  --palette-chart-5: #9a9aa3;
}

:root[data-theme="evergreen"],
[data-palette-swatch="evergreen"] {
  /* Evergreen, light. Presence colours moved off the brand green and accent yellow (A5 tip, approved D4). */
  --palette-primary: #047857;
  --palette-primary-hover: #065f46;
  --palette-brand-accent: #eab308;
  --palette-brand-accent-foreground: #0e1f17;
  --palette-background: #ffffff;
  --palette-surface: #f3f8f5;
  --palette-border: #d5e5dc;
  --palette-text: #0e1f17;
  --palette-muted-text: #50645a;
  --palette-chart-3: #105b43;
  --palette-chart-4: #ae8b21;
  --palette-chart-5: #2e4037;
  --palette-presence-available: #4d7c0f;
}

:root[data-theme="evergreen"].dark,
.dark [data-palette-swatch="evergreen"] {
  /* Evergreen, dark. */
  --palette-primary: #34d399;
  --palette-primary-hover: #6ee7b7;
  --palette-brand-accent: #facc15;
  --palette-brand-accent-foreground: #0a1510;
  --palette-background: #0a1510;
  --palette-surface: #12211a;
  --palette-border: #22362b;
  --palette-text: #e4f0ea;
  --palette-muted-text: #91a89c;
  --palette-chart-3: #8de0b9;
  --palette-chart-4: #f1de92;
  --palette-chart-5: #91a89c;
  --palette-presence-available: #a3e635;
  --palette-presence-away: #fb923c;
}

:root[data-theme="terracotta"],
[data-palette-swatch="terracotta"] {
  /* Terracotta, light. */
  --palette-primary: #c2410c;
  --palette-primary-hover: #9a3412;
  --palette-brand-accent: #0f766e;
  --palette-brand-accent-foreground: #ffffff;
  --palette-background: #fffbf8;
  --palette-surface: #f8f1ec;
  --palette-border: #e8dad0;
  --palette-text: #1f1410;
  --palette-muted-text: #6b5a50;
  --palette-chart-3: #963715;
  --palette-chart-4: #235c54;
  --palette-chart-5: #6b5a50;
}

:root[data-theme="terracotta"].dark,
.dark [data-palette-swatch="terracotta"] {
  /* Terracotta, dark. */
  --palette-primary: #fb8a5b;
  --palette-primary-hover: #fda67f;
  --palette-brand-accent: #2dd4bf;
  --palette-brand-accent-foreground: #17110e;
  --palette-background: #17110e;
  --palette-surface: #221915;
  --palette-border: #3a2c25;
  --palette-text: #f2e8e2;
  --palette-muted-text: #ae9c91;
  --palette-chart-3: #fbad8c;
  --palette-chart-4: #94ddcd;
  --palette-chart-5: #ae9c91;
}

:root[data-theme="sapphire"],
[data-palette-swatch="sapphire"] {
  /* Sapphire Violet, light. */
  --palette-primary: #4f46e5;
  --palette-primary-hover: #4338ca;
  --palette-brand-accent: #ec4899;
  --palette-brand-accent-foreground: #13122b;
  --palette-background: #ffffff;
  --palette-surface: #f6f6fc;
  --palette-border: #deddf0;
  --palette-text: #13122b;
  --palette-muted-text: #5a5978;
  --palette-chart-3: #3f39b2;
  --palette-chart-4: #b03d7c;
  --palette-chart-5: #5a5978;
}

:root[data-theme="sapphire"].dark,
.dark [data-palette-swatch="sapphire"] {
  /* Sapphire Violet, dark. */
  --palette-primary: #818cf8;
  --palette-primary-hover: #a5b4fc;
  --palette-brand-accent: #f472b6;
  --palette-brand-accent-foreground: #0e0d1c;
  --palette-background: #0e0d1c;
  --palette-surface: #17162b;
  --palette-border: #2a2945;
  --palette-text: #e7e6f5;
  --palette-muted-text: #9d9cbb;
  --palette-chart-3: #9ea8f9;
  --palette-chart-4: #f49dcc;
  --palette-chart-5: #9d9cbb;
}

:root[data-theme="plum"],
[data-palette-swatch="plum"] {
  /* Plum Berry, light. Brand Accent #6366F1 → #5D5FEE: neither foreground reached 4.5:1 (approved D4). */
  --palette-primary: #9d174d;
  --palette-primary-hover: #831843;
  --palette-brand-accent: #5d5fee;
  --palette-brand-accent-foreground: #ffffff;
  --palette-background: #ffffff;
  --palette-surface: #faf5f7;
  --palette-border: #ebdce2;
  --palette-text: #1f0f16;
  --palette-muted-text: #6a5560;
  --palette-chart-3: #74193c;
  --palette-chart-4: #4d4bb2;
  --palette-chart-5: #6a5560;
}

:root[data-theme="plum"].dark,
.dark [data-palette-swatch="plum"] {
  /* Plum Berry, dark. */
  --palette-primary: #f472b6;
  --palette-primary-hover: #f9a8d4;
  --palette-brand-accent: #a5b4fc;
  --palette-brand-accent-foreground: #170d12;
  --palette-background: #170d12;
  --palette-surface: #22141b;
  --palette-border: #3a2530;
  --palette-text: #f3e6ec;
  --palette-muted-text: #b097a3;
  --palette-chart-3: #f79dc9;
  --palette-chart-4: #c8cbf6;
  --palette-chart-5: #b097a3;
}

:root[data-theme="amber"],
[data-palette-swatch="amber"] {
  /* Amber Signal, light. Warning → #854D0E / #FDE047: Primary equalled Warning (A5.1 rule 4, approved D4). */
  --palette-primary: #b45309;
  --palette-primary-hover: #92400e;
  --palette-brand-accent: #1e40af;
  --palette-brand-accent-foreground: #ffffff;
  --palette-background: #fffdf7;
  --palette-surface: #faf5ea;
  --palette-border: #eadfc8;
  --palette-text: #1c1508;
  --palette-muted-text: #6b5e45;
  --palette-chart-3: #733a0e;
  --palette-chart-4: #1e367a;
  --palette-chart-5: #6b5e45;
  --semantic-warning: #854d0e;
}

:root[data-theme="amber"].dark,
.dark [data-palette-swatch="amber"] {
  /* Amber Signal, dark. */
  --palette-primary: #fbbf24;
  --palette-primary-hover: #fcd34d;
  --palette-brand-accent: #93c5fd;
  --palette-brand-accent-foreground: #15110a;
  --palette-background: #15110a;
  --palette-surface: #201a10;
  --palette-border: #3a301e;
  --palette-text: #f3ecdd;
  --palette-muted-text: #ada088;
  --palette-chart-3: #f8d48b;
  --palette-chart-4: #c8dbed;
  --palette-chart-5: #ada088;
  --semantic-warning: #fde047;
}

/* 2. Mapping layer (A6.1, A6.2) ------------------------------------------------------------------------------- */

:root {
  color-scheme: light;
  --background: var(--palette-background);
  --foreground: var(--palette-text);
  --card: var(--palette-background);
  --card-foreground: var(--palette-text);
  --popover: var(--palette-background);
  --popover-foreground: var(--palette-text);
  --primary: var(--palette-primary);
  --primary-foreground: #ffffff;
  --primary-hover: var(--palette-primary-hover);
  --secondary: var(--palette-surface);
  --secondary-foreground: var(--palette-text);
  --muted: var(--palette-surface);
  --muted-foreground: var(--palette-muted-text);
  --accent: color-mix(in oklab, var(--primary) 8%, var(--card));
  --accent-foreground: var(--palette-text);
  --destructive: var(--semantic-danger);
  --destructive-foreground: #ffffff;
  --border: var(--palette-border);
  /* A6.1 maps --input to Border, which is 1.25–1.45:1; mixed toward the muted text it reaches 3:1 (WCAG 1.4.11). */
  --input: color-mix(in oklab, var(--muted-foreground) 65%, var(--border));
  --ring: var(--primary);
  --chart-1: var(--palette-primary);
  --chart-2: var(--palette-brand-accent);
  --chart-3: var(--palette-chart-3);
  --chart-4: var(--palette-chart-4);
  --chart-5: var(--palette-chart-5);
  --sidebar: var(--palette-surface);
  --sidebar-foreground: var(--palette-text);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: color-mix(in oklab, var(--primary) 10%, var(--sidebar));
  --sidebar-accent-foreground: var(--palette-text);
  --sidebar-border: var(--palette-border);
  --sidebar-ring: var(--primary);

  /* Suite extras (A6.2). Brand Accent never marks status (A5.1 rule 2). */
  --brand-accent: var(--palette-brand-accent);
  --brand-accent-foreground: var(--palette-brand-accent-foreground);
  --success: var(--semantic-success);
  --success-foreground: #ffffff;
  --warning: var(--semantic-warning);
  --warning-foreground: #ffffff;
  --info: var(--semantic-info);
  --info-foreground: #ffffff;
  --presence-available: var(--palette-presence-available);
  --presence-away: var(--palette-presence-away);
  --presence-busy: var(--palette-presence-busy);
  --presence-offline: var(--palette-presence-offline);
  --mention: color-mix(in oklab, var(--primary) 12%, transparent);
  /* Soft status surfaces for badges and notices that put status text on a tint (`bg-success-soft text-success`).
     A 10% tint takes success, warning and primary text below 4.5:1 in light mode; 6% keeps every palette at AA on
     card, popover and background (tools/validate-palettes.mjs). */
  --destructive-soft: color-mix(in oklab, var(--destructive) 6%, var(--card));
  --success-soft: color-mix(in oklab, var(--success) 6%, var(--card));
  --warning-soft: color-mix(in oklab, var(--warning) 6%, var(--card));
  --info-soft: color-mix(in oklab, var(--info) 6%, var(--card));
  --primary-soft: color-mix(in oklab, var(--primary) 6%, var(--card));

  /* Shared surfaces of the suite shell and media. */
  --topbar: var(--card);
  --topbar-foreground: var(--card-foreground);
  --overlay: color-mix(in srgb, var(--palette-text) 35%, transparent);
  --media: #0a0a0a;
  --on-media: #ffffff;
  --scrim: color-mix(in srgb, #000000 55%, transparent);
  --shadow-color: var(--palette-text);

  /* Shape, depth and type. */
  --radius: 0.75rem;
  --elevation-card:
    0 1px 2px color-mix(in srgb, var(--shadow-color) 5%, transparent),
    0 2px 12px color-mix(in srgb, var(--shadow-color) 4%, transparent);
  --elevation-popover:
    0 4px 12px color-mix(in srgb, var(--shadow-color) 10%, transparent),
    0 12px 32px color-mix(in srgb, var(--shadow-color) 8%, transparent);
  /* Inter for Latin, Vazirmatn for Arabic script (next/font sets the two variables on <html>). The first family
     follows the page language, so a Latin word inside Farsi text keeps Vazirmatn's matching Latin glyphs.
     --font-inter-face is Inter's real family alone (suiteFontFaces): next/font's metric fallback is a local(Arial)
     face with no unicode-range, which would catch Persian text on English pages before Vazirmatn. */
  --suite-font-stack:
    var(--font-inter-face, var(--font-inter, ui-sans-serif)), var(--font-vazirmatn, Tahoma), system-ui,
    sans-serif;
  --suite-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root:lang(fa) {
  --suite-font-stack:
    var(--font-vazirmatn, Tahoma), var(--font-inter-face, var(--font-inter, ui-sans-serif)), system-ui,
    sans-serif;
}

.dark {
  color-scheme: dark;
  --card: var(--palette-surface);
  --popover: var(--palette-surface);
  --primary-foreground: var(--palette-background);
  --accent: color-mix(in oklab, var(--primary) 14%, var(--card));
  --destructive-foreground: var(--palette-background);
  --input: color-mix(in oklab, var(--muted-foreground) 56%, var(--border));
  --sidebar-accent: color-mix(in oklab, var(--primary) 16%, var(--sidebar));
  --success-foreground: var(--palette-background);
  --warning-foreground: var(--palette-background);
  --info-foreground: var(--palette-background);
  --mention: color-mix(in oklab, var(--primary) 18%, transparent);
  --overlay: color-mix(in srgb, var(--palette-background) 60%, transparent);
  --shadow-color: #000000;
}


/* 4. Boostan tokens (BoostanFrontEnd/src/app/theme.css) ----------------------------------------------------- */

/* The pages keep their own --muted and --accent names (muted text and primary), which shadow the suite's tokens of the
   same name. So the suite surfaces are written out here instead of read through --muted / --accent: --muted equals
   --secondary, and the primary tint is the suite's --accent formula. */
:root {
  --primary-subtle: color-mix(in oklab, var(--primary) 8%, var(--card));
  --primary-subtle-foreground: color-mix(in oklab, var(--primary) 72%, var(--foreground));
  --secondary-hover: color-mix(in oklab, var(--secondary) 90%, var(--foreground));
  --destructive-subtle: var(--destructive-soft);
  --success-subtle: var(--success-soft);
  --warning-subtle: var(--warning-soft);
  --info-subtle: var(--info-soft);
  --gold: var(--brand-accent);
  --gold-foreground: var(--brand-accent-foreground);
  --rating: color-mix(in oklab, var(--brand-accent) 62%, var(--foreground));
  --violet: var(--chart-4);
  --violet-subtle: color-mix(in oklab, var(--violet) 6%, var(--card));
  --avatar-ring: var(--card);
  --presence-online: var(--presence-available);
  --badge-unread: var(--destructive);
  --badge-unread-foreground: var(--destructive-foreground);
  --sidebar-primary: var(--brand-accent);
  --sidebar-primary-foreground: var(--brand-accent-foreground);
  --elevation-elevated: 0 30px 80px -30px color-mix(in srgb, var(--shadow-color) 45%, transparent);

  /* Tailwind's radius scale (rounded-sm … rounded-4xl) as plain variables. */
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);

  /* Fonts load from Google Fonts here instead of next/font. */
  --font-vazirmatn: "Vazirmatn";
  --font-inter: "Inter";
  --font-sans: var(--suite-font-stack);
}

.dark {
  --primary-subtle: color-mix(in oklab, var(--primary) 14%, var(--card));
}

/* 5. Base (suite-theme @layer base, written out) ------------------------------------------------------------- */

*,
::before,
::after {
  border-color: var(--border);
}
html {
  font-family: var(--font-sans);
}
body {
  background: var(--background);
  color: var(--foreground);
}
:focus-visible {
  outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 6. Prototype-only: the theme switcher boostan-theme.js shows with ?dev in the URL. */

.bt-dev {
  position: fixed;
  inset-block-end: 12px;
  inset-inline-start: 12px;
  z-index: 200;
  display: flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: var(--elevation-popover);
  font: 500 12px/1 var(--font-sans);
}
.bt-dev select {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--input);
  border-radius: var(--radius-md);
  background: var(--background);
  color: inherit;
  font: inherit;
}