@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap');

/* ════════════════════════════════════════════════════════════════════════════
   ARTRIVO BRAND — the ONE design source for every app (gallery · platform · …).
   Plain CSS (no Tailwind directives) → serves at /ds.css and any app just <link>s it.
   = shadcn base tokens (full var set, every var defined) + the Artrivo brand override.
   Edit HERE → the gallery AND every linked app re-skin. WP child-theme model (D250).
   The apps are always .dark; the :root light base is kept only so no var is undefined.
   NOTE: the font @import is NOT here — a nested @import lands after Tailwind's expansion and breaks
   CSS @import ordering. The consumer adds it at the very top (gallery globals.css / the /ds.css route).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── shadcn base (light — dead in our always-.dark apps, kept for var completeness) ── */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── shadcn base (dark) ── */
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

/* ════════════ ARTRIVO brand override (dark — the app is always .dark) ════════════ */
.dark {
  /* ── surfaces (navy) ── */
  --background: #091125;          /* app bg — darkest navy */
  --card: #0C152A;                /* cards / sidebar — one step up */
  --popover: #0C152A;
  --secondary: #182135;
  --muted: #182135;               /* muted SURFACE */
  --accent: #182135;
  --border: #243049;
  --input: #243049;

  /* ── text (dimmed — Supabase aesthetic, never pure white) ── */
  --foreground: #8A93A8;          /* default body text */
  --card-foreground: #C3CAD9;     /* titles — soft */
  --popover-foreground: #C3CAD9;
  --secondary-foreground: #C3CAD9;
  --accent-foreground: #C3CAD9;
  --muted-foreground: #565F73;    /* secondary text — dimmer */

  /* ── brand pink + semantics ── */
  --primary: #FF1853;
  --primary-foreground: #ffffff;
  --ring: #FF1853;
  /* --destructive intentionally NOT overridden → stays stock shadcn (Lahiru: keep non-primary buttons original) */
  --success: #0CCE6B;             /* live / pass (badges, status) */
  --warning: #F59E0B;             /* staging / caution */

  /* ── sidebar = follows the brand (navy card + dimmed text); brighter only on the active row ── */
  --sidebar: #0C152A;
  --sidebar-foreground: #8A93A8;        /* nav text — dimmed like body */
  --sidebar-primary: #FF1853;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #182135;            /* active/hover row bg */
  --sidebar-accent-foreground: #C3CAD9; /* active row text — brighter than idle */
  --sidebar-border: #243049;
  --sidebar-ring: #FF1853;

  /* ── charts (monochrome magenta "glow" — one hue, faded gradient on navy) ── */
  --chart-1: #FF1853;   /* brand pink — most saturated */
  --chart-2: #FF4D78;
  --chart-3: #FF7D9D;
  --chart-4: #FFA8BF;
  --chart-5: #FFD0DC;   /* lightest / most faded */
}

/* ════════════ ARTRIVO brand override (light — accents only; surfaces stay shadcn-light) ════════════ */
/* Keeps the Artrivo pink identity in light mode (stock shadcn light primary is black).
   :root:not(.dark) → light-only, so it can never clobber the .dark brand block. */
:root:not(.dark) {
  --primary: #FF1853;
  --primary-foreground: #ffffff;
  --ring: #FF1853;
  /* --destructive intentionally NOT overridden → stays stock shadcn */
  --success: #0CCE6B;
  --warning: #F59E0B;
  --sidebar-primary: #FF1853;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-ring: #FF1853;
  /* charts — same magenta gradient, darker shades so they read on a white bg */
  --chart-1: #FF1853;
  --chart-2: #D11447;
  --chart-3: #A8103A;
  --chart-4: #800C2C;
  --chart-5: #59081F;
}

/* ── PageSpeed Insights score scale (Google's official traffic-light; mode-independent —
   the report must read green/amber/red, NOT the brand magenta chart palette) ── */
:root {
  --psi-good: #0CCE6B;   /* score ≥90 / metric good       (= --success) */
  --psi-avg:  #FFA400;   /* score 50–89 / needs improvement */
  --psi-poor: #FF4E42;   /* score <50 / poor                */
}

/* ── Artrivo type scale (desktop — overrides Tailwind v4 defaults; both modes, every linked app) ── */
:root {
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-lg:   15px;
  --text-xl:   16px;
  --text-2xl:  17px;
  --text-3xl:  18px;
  --text-4xl:  20px;
  --text-5xl:  22px;
  --text-6xl:  24px;
  --text-7xl:  26px;
}

/* ── Arabic / RTL content only (rtl: true) ──
   Noto Kufi Arabic is NOT in the global --font-sans — it applies ONLY where content is marked
   dir="rtl" (Arabic). MUST be a real `font-family` declaration, not just a --font-sans override:
   `body { font-family: var(--font-sans) }` resolves to Plus Jakarta ONCE at the body, and every
   descendant (incl. the portaled dialog) inherits that already-resolved string — re-setting the
   variable on a descendant is never read. Declaring font-family here actually re-fonts the subtree.
   Inside RTL, latin still renders in Plus Jakarta Sans (Noto Kufi's Google @font-face is
   unicode-range = Arabic glyphs only). The @import in the /ds.css route declares the @font-face
   everywhere, but the binary is fetched only when an RTL Arabic glyph renders — LTR apps never load it. */
[dir="rtl"] {
  font-family: "Noto Kufi Arabic", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-sans: "Noto Kufi Arabic", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── cursor-pointer on interactive controls (Tailwind v4 + shadcn drop it; we keep it) ──
   Theming-mode → survives canonical component re-pulls; never edits button.tsx (which the
   shadcn CLI keeps reverting). */
button:not(:disabled),
[role="button"]:not(:disabled) {
  cursor: pointer;
}

/* ── Artrivo input controls: small radius scale + consistent height (theming → survives
   component merges; overrides the shadcn docs-redesign rounded-lg/h-8/pill on inputs) ── */
[data-slot="input"],
[data-slot="textarea"],
[data-slot="select-trigger"],
[data-slot="native-select"] {
  border-radius: calc(var(--radius) * 0.6) !important;   /* = rounded-sm */
}
[data-slot="input"],
[data-slot="select-trigger"],
[data-slot="native-select"] {
  height: 2.25rem !important;       /* same height across all single-line inputs (h-9) */
  min-height: 2.25rem !important;
}
/* input-group is a container (the docs make it a pill) → bring it + its children to the sm scale */
[data-slot="input-group"] {
  --radius: calc(0.625rem * 0.6) !important;
  border-radius: calc(0.625rem * 0.6) !important;
  height: 2.25rem !important;
}
[data-slot="input-group"]:has([data-slot="input-group-control"][rows]),
[data-slot="input-group"]:has(textarea) {
  height: auto !important;          /* textarea input-groups stay auto-height */
}


/* ── mobile type scale (real narrow viewports ≤640px) ── */
/* Note: viewport-keyed, so it fires on real phones / a narrowed window — NOT the gallery's
   simulated-mobile preview (that's a 375px container inside a wide desktop viewport). */
@media (max-width: 640px) {
  :root {
    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 14px;
    --text-lg:   15px;
    --text-xl:   16px;
    --text-2xl:  17px;
    --text-3xl:  18px;
    --text-4xl:  19px;
    --text-5xl:  20px;
    --text-6xl:  22px;
    --text-7xl:  24px;
  }
  /* iOS zooms the page when a focused input's font is <16px → force all text controls to
     --text-xl (16px) on mobile. !important to beat the inputs' own text-base/text-sm utility. */
  input, textarea, select,
  [data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"],
  [data-slot="native-select"], [data-slot="input-group-control"] {
    font-size: var(--text-xl) !important;
  }
}