/* Reportia design tokens — the one shared source for colour, type, spacing,
   radius, shadow and motion across the Reportia-branded frontends
   (input-service, webpage-service's FA site, calendar-service).
   webpage-service's EN site (styles-en.css, and the EN blog) is a second
   brand, "ink": same semantic names, its own values, under
   :root[data-brand="ink"] near the end of this file.

   Three layers, each only referencing the one above it:
     1. Primitives  (--rp-slate-500, --rp-blue-600 …)  raw values. Component
                    CSS uses them only for one-off illustration (a mock
                    window's traffic-light dots, a hero gradient's stops) and
                    for identity colours defined in a service's own :root
                    (a category's label hue).
     2. Semantic    (--rp-text, --rp-surface, --rp-action …)  what a value is
                    FOR. Components use these. A dark theme would redefine
                    only these (see the note at the end of this file).
     3. Component   tokens stay in each service's own stylesheet and point at
                    the semantic layer (e.g. calendar's --accent: var(--rp-action-border)).

   Everything is prefixed --rp- so it can load alongside a service's existing
   :root without colliding while that service migrates.

   Values were consolidated from what the services already used (2026-10-01
   audit), so adopting this file is meant to be visually neutral.

   Served to each service the same way as shared/domain-pairs.js: the service's
   Dockerfile copies it in, and the server falls back to ../shared locally. */

:root {
  /* ── 1. Primitives ──────────────────────────────────────────────── */

  /* Neutrals: cool slate, biased toward the brand blue. */
  --rp-white: #ffffff;
  --rp-slate-50: #f8fafc;
  --rp-slate-100: #f1f5f9;
  --rp-slate-150: #eef2f8; /* app canvas; between 50 and 100 */
  --rp-slate-200: #e2e8f0;
  --rp-slate-250: #dbe3ee; /* section dividers */
  --rp-slate-300: #cbd5e1;
  --rp-slate-350: #b8c5d6; /* strong borders */
  --rp-slate-400: #94a3b8;
  --rp-slate-500: #64748b;
  --rp-slate-600: #475569;
  --rp-slate-700: #334155;
  --rp-slate-800: #1e293b;
  --rp-slate-900: #0f172a;

  /* Warm grey: inactive / "coming soon". */
  --rp-stone-50: #fafaf9;
  --rp-stone-100: #f5f5f4;
  --rp-stone-500: #78716c;

  /* Ink: the EN site's near-black neutrals. */
  --rp-ink-50: #fafafa;
  --rp-ink-100: #f2f3f5;
  --rp-ink-150: #ececec;
  --rp-ink-190: #e9eaee;
  --rp-ink-200: #e7e8ec;
  --rp-ink-210: #e6e7eb;
  --rp-ink-300: #d7d9de;
  --rp-ink-500: #868990;
  --rp-ink-600: #565a63;
  --rp-ink-800: #242e3f; /* EN blog reading text */
  --rp-ink-875: #1c1d22;
  --rp-ink-900: #1b1c20;
  --rp-ink-925: #17181c;
  --rp-ink-950: #101114;
  /* Electric blue: the EN site's single accent. */
  --rp-electric-50: #ebf0ff;
  --rp-electric-500: #2f5eff;
  --rp-electric-900: #17347a;

  /* Brand blue. */
  --rp-blue-50: #eff6ff;
  --rp-blue-100: #dbeafe;
  --rp-blue-200: #bfdbfe;
  --rp-blue-300: #93c5fd;
  --rp-blue-400: #60a5fa;
  --rp-blue-500: #3b82f6;
  --rp-blue-600: #2563eb;
  --rp-blue-700: #1d4ed8;
  --rp-blue-800: #1e40af;
  --rp-blue-900: #1e3a8a;
  --rp-indigo-900: #312e81;

  /* Navy: headings and the deep brand ground. */
  --rp-navy-700: #334b78; /* desaturated; illustrative previews */
  --rp-navy-800: #1a3d73;
  --rp-navy-850: #1e3a5f; /* credits, Gamma */
  --rp-navy-900: #0f2b5b;
  --rp-navy-925: #0f2744;
  --rp-navy-950: #0a1f42;
  --rp-navy-975: #0a1628;

  /* Status. */
  --rp-red-50: #fef2f2;
  --rp-red-100: #fee2e2;
  --rp-red-200: #fecaca;
  --rp-red-300: #fca5a5;
  --rp-red-400: #f87171;
  --rp-red-500: #ef4444;
  --rp-red-600: #dc2626;
  --rp-red-700: #b42318;
  --rp-red-800: #991b1b;
  --rp-green-50: #ecfdf5;
  --rp-green-100: #d1fae5;
  --rp-green-200: #a7f3d0;
  --rp-green-300: #86efac;
  --rp-green-500: #10b981;
  --rp-green-600: #059669;
  --rp-green-700: #047857;
  --rp-green-800: #065f46;
  --rp-amber-50: #fffbeb;
  --rp-amber-200: #fde68a;
  --rp-amber-300: #fcd34d;
  --rp-amber-500: #f59e0b;
  --rp-amber-600: #d97706;
  --rp-amber-700: #b45309;
  --rp-amber-800: #854d0e;
  --rp-yellow-700: #a16207; /* "mid" score tier */
  --rp-gold-600: #b7791f;
  --rp-umber-800: #6b5324;
  --rp-orange-50: #fff7ed;
  --rp-orange-200: #fed7aa;
  --rp-orange-600: #ea580c;
  --rp-orange-700: #c2410c;
  --rp-orange-800: #9a3412;
  --rp-sky-50: #f0f9ff;
  --rp-sky-400: #38bdf8;
  --rp-sky-500: #0ea5e9;
  --rp-sky-600: #0284c7;
  --rp-sky-700: #0369a1;
  --rp-cyan-50: #ecfeff;
  /* Dusty violet: user-personalized solutions, kept quiet. */
  --rp-violet-50: #f7f6fb;
  --rp-violet-100: #eeeef8;
  --rp-violet-500: #7a7494;

  /* Monochrome (the app's dark theme, html[data-theme="monochrome"]). */
  --rp-mono-950: #141414;
  --rp-mono-900: #1c1c1c;
  --rp-mono-850: #242424;
  --rp-mono-810: #2c2c2c;
  --rp-mono-800: #2e2e2e;
  --rp-mono-750: #383838;
  --rp-mono-500: #5c6370;
  --rp-mono-400: #8b939e;
  --rp-mono-350: #a3a3a3;
  --rp-mono-300: #b8b8b8;
  --rp-mono-200: #d6d6d6;

  /* ── 2. Semantic ────────────────────────────────────────────────── */

  /* Grounds */
  --rp-canvas: var(--rp-slate-150);          /* the app page behind cards */
  --rp-surface: var(--rp-white);             /* cards, inputs, dialogs */
  --rp-surface-sunken: var(--rp-slate-50);   /* wells, hover rows, marketing ground */
  --rp-surface-muted: var(--rp-slate-100);
  --rp-inverse-surface: var(--rp-navy-950);  /* dark brand panels and heroes */
  --rp-inverse-surface-raised: var(--rp-navy-900);
  --rp-fill: var(--rp-slate-200);            /* tracks, skeleton bars */
  --rp-fill-strong: var(--rp-slate-300);
  --rp-fill-bold: var(--rp-slate-400);       /* neutral dots, disabled knobs */

  /* Text */
  --rp-text: var(--rp-slate-900);
  --rp-text-soft: var(--rp-slate-800);
  --rp-text-secondary: var(--rp-slate-700);
  --rp-text-muted: var(--rp-slate-600);      /* secondary copy; AA on canvas */
  --rp-text-subtle: var(--rp-slate-500);     /* captions, meta; AA on white only */
  --rp-text-faint: var(--rp-slate-400);      /* eyebrows, arrows; decorative only */
  --rp-text-disabled: var(--rp-slate-400);
  --rp-heading: var(--rp-navy-900);
  --rp-heading-soft: var(--rp-navy-800);
  --rp-text-on-action: var(--rp-white);
  --rp-text-inverse: var(--rp-white);        /* on --rp-inverse-surface */
  --rp-text-inverse-accent: var(--rp-blue-300);

  /* Lines */
  --rp-border-subtle: var(--rp-slate-150);   /* row and section hairlines */
  --rp-border: var(--rp-slate-200);
  --rp-border-control: var(--rp-slate-300);  /* hovered cards, table heads */
  --rp-border-bold: var(--rp-slate-400);     /* dashed drop zones, emphasis */
  --rp-border-section: var(--rp-slate-250);
  --rp-border-strong: var(--rp-slate-350);

  /* Brand + action. Brand is identity (logo, category accents); action is
     what you click. They are deliberately different blues. */
  --rp-brand: var(--rp-blue-800);
  --rp-brand-strong: var(--rp-blue-900);
  --rp-brand-soft: var(--rp-blue-50);
  --rp-brand-border: var(--rp-blue-200);
  --rp-brand-border-strong: var(--rp-blue-300);  /* highlighted, focused */
  --rp-brand-fill: var(--rp-blue-200);
  --rp-brand-bright: var(--rp-blue-400);     /* on dark grounds, live dots */
  --rp-brand-ink: var(--rp-indigo-900);      /* headline figures, active tabs */
  --rp-action: var(--rp-blue-600);
  --rp-action-hover: var(--rp-blue-700);
  --rp-action-border: var(--rp-blue-500);    /* hover/selected outlines */
  --rp-action-soft: var(--rp-blue-100);      /* focus ring, selected inset */
  --rp-action-tint: var(--rp-blue-50);       /* selected/hover fill */
  --rp-focus: var(--rp-blue-600);

  /* Status. Every hue has the same ladder:
     -soft (tinted ground) → -fill → -border → base → -text → -strong,
     plus -indicator for dots and icons that must read at a glance. */
  --rp-danger-soft: var(--rp-red-50);
  --rp-danger-fill: var(--rp-red-100);
  --rp-danger-border: var(--rp-red-200);
  --rp-danger-border-strong: var(--rp-red-300);
  --rp-danger-focus: var(--rp-red-400);
  --rp-danger-indicator: var(--rp-red-500);
  --rp-danger: var(--rp-red-600);
  --rp-danger-text: var(--rp-red-700);
  --rp-danger-strong: var(--rp-red-800);

  --rp-success-soft: var(--rp-green-50);
  --rp-success-fill: var(--rp-green-100);
  --rp-success-border: var(--rp-green-200);
  --rp-success-indicator: var(--rp-green-500);
  --rp-success: var(--rp-green-600);
  --rp-success-text: var(--rp-green-700);
  --rp-success-strong: var(--rp-green-800);

  --rp-warning-soft: var(--rp-amber-50);
  --rp-warning-border: var(--rp-amber-200);
  --rp-warning-indicator: var(--rp-amber-500);
  --rp-warning: var(--rp-amber-600);
  --rp-warning-text: var(--rp-amber-700);
  --rp-warning-strong: var(--rp-amber-800);

  /* Caution (orange): low balance, soft errors, tier limits. */
  --rp-caution-soft: var(--rp-orange-50);
  --rp-caution-border: var(--rp-orange-200);
  --rp-caution: var(--rp-orange-600);
  --rp-caution-text: var(--rp-orange-700);
  --rp-caution-strong: var(--rp-orange-800);

  --rp-info-soft: var(--rp-sky-50);
  --rp-info-indicator: var(--rp-sky-400);
  --rp-info: var(--rp-sky-600);
  --rp-info-text: var(--rp-sky-700);

  /* Not available yet / switched off. */
  --rp-inactive: var(--rp-stone-500);
  --rp-inactive-soft: var(--rp-stone-100);
  --rp-text-on-inactive: var(--rp-stone-50);

  /* Identity: brand moments that keep their colour in every theme (the
     login gate's panel). Never redefined by a dark theme. */
  --rp-identity-start: var(--rp-blue-900);
  --rp-identity-mid: var(--rp-blue-800);
  --rp-identity-end: var(--rp-blue-600);
  --rp-identity-text: var(--rp-white);

  --rp-personalized: var(--rp-violet-500);
  --rp-personalized-soft: var(--rp-violet-50);
  --rp-favorite: var(--rp-gold-600);

  /* App chrome: the dark sidebar, account menu and dark tooltips. A fixed
     dark region in every theme. */
  --rp-chrome-surface: var(--rp-slate-900);
  --rp-chrome-surface-raised: var(--rp-slate-800);
  --rp-chrome-surface-hover: var(--rp-slate-700);
  --rp-chrome-track: var(--rp-slate-600);
  --rp-chrome-border: var(--rp-slate-800);
  --rp-chrome-border-strong: var(--rp-slate-700);
  --rp-chrome-text-strong: var(--rp-slate-50);
  --rp-chrome-text: var(--rp-slate-200);
  --rp-chrome-text-muted: var(--rp-slate-300);
  --rp-chrome-text-subtle: var(--rp-slate-400);
  --rp-chrome-text-disabled: var(--rp-slate-500);
  --rp-chrome-text-active: var(--rp-white);
  --rp-chrome-focus: var(--rp-blue-400);
  --rp-chrome-danger: var(--rp-red-300);
  --rp-chrome-danger-hover: var(--rp-red-200);

  /* ── Type ──────────────────────────────────────────────────────── */
  /* Yekan Bakh and Vazirmatn are self-hosted per service (input-service
     ships the woff2 files); a service that doesn't load Yekan Bakh falls
     through to Vazirmatn. */
  --rp-font-en: "Plus Jakarta Sans", "Vazirmatn", "Segoe UI", system-ui, sans-serif;
  --rp-font-fa: "Yekan Bakh", "Vazirmatn", Tahoma, "Segoe UI", system-ui, sans-serif;
  --rp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --rp-font-display: var(--rp-font-en);

  --rp-text-2xs: 0.6875rem; /* 11px  uppercase micro-labels */
  --rp-text-xs: 0.75rem;    /* 12px */
  --rp-text-sm: 0.8125rem;  /* 13px  dense UI default */
  --rp-text-md: 0.875rem;   /* 14px  inputs, body in panels */
  --rp-text-base: 1rem;     /* 16px  reading body */
  --rp-text-lg: 1.125rem;
  --rp-text-xl: 1.25rem;
  --rp-text-2xl: 1.5rem;
  --rp-text-3xl: 1.875rem;

  --rp-weight-regular: 400;
  --rp-weight-medium: 500;
  --rp-weight-semibold: 600;
  --rp-weight-bold: 700;

  --rp-leading-tight: 1.25;
  --rp-leading-ui: 1.5;
  --rp-leading-body: 1.7;   /* Farsi needs the extra room */
  --rp-tracking-label: 0.02em;

  /* ── Space (4px grid) ──────────────────────────────────────────── */
  --rp-space-1: 4px;
  --rp-space-2: 8px;
  --rp-space-3: 12px;
  --rp-space-4: 16px;
  --rp-space-5: 20px;
  --rp-space-6: 24px;
  --rp-space-8: 32px;
  --rp-space-10: 40px;
  --rp-space-12: 48px;

  /* ── Radius ────────────────────────────────────────────────────── */
  --rp-radius-sm: 6px;     /* chips, small controls */
  --rp-radius-md: 10px;    /* inputs, buttons-in-forms, slots */
  --rp-radius-lg: 12px;    /* tiles, pills with content */
  --rp-radius-xl: 16px;    /* top-level cards */
  --rp-radius-pill: 999px; /* primary CTA */

  /* ── Elevation (tinted with navy, never pure black) ────────────── */
  --rp-shadow-sm: 0 6px 18px rgba(15, 43, 91, 0.08);
  --rp-shadow-md: 0 16px 40px rgba(15, 43, 91, 0.12);
  --rp-shadow-lg: 0 34px 70px -18px rgba(15, 43, 91, 0.32);
  --rp-shadow-action: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 10px 24px -10px rgba(37, 99, 235, 0.7);
  --rp-shadow-action-hover: 0 1px 0 rgba(255, 255, 255, 0.28) inset, 0 16px 34px -12px rgba(37, 99, 235, 0.72);

  /* ── Motion ────────────────────────────────────────────────────── */
  --rp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rp-duration-fast: 150ms;
  --rp-duration-base: 250ms;
}

/* Dark theme (input-service's monochrome). Only the semantic layer is
   redefined; monochrome.css still carries the component-level overrides.
   Left alone on purpose: --rp-chrome-* (already dark), --rp-identity-*
   (the login panel stays brand blue), and the status hues.
   Audited 2026-10-01 on every view: fixes the near-invisible drawer text,
   brand-blue buttons and white panels that monochrome.css never covered. */
html[data-theme="monochrome"] {
  color-scheme: dark;
  --rp-canvas: var(--rp-mono-950);
  --rp-surface: var(--rp-mono-900);
  --rp-surface-sunken: var(--rp-mono-850);
  --rp-surface-muted: var(--rp-mono-800);
  --rp-fill: var(--rp-mono-800);
  --rp-fill-strong: var(--rp-mono-750);
  --rp-fill-bold: var(--rp-mono-500);
  --rp-text: var(--rp-mono-200);
  --rp-text-soft: var(--rp-mono-200);
  --rp-text-secondary: var(--rp-mono-200);
  --rp-text-muted: var(--rp-mono-400);
  --rp-text-subtle: var(--rp-mono-400);
  --rp-text-faint: var(--rp-mono-500);
  --rp-text-disabled: var(--rp-mono-500);
  --rp-heading: var(--rp-mono-200);
  --rp-heading-soft: var(--rp-mono-200);
  --rp-text-on-action: var(--rp-mono-900);
  --rp-border-subtle: var(--rp-mono-810);
  --rp-border: var(--rp-mono-750);
  --rp-border-section: var(--rp-mono-750);
  --rp-border-control: var(--rp-mono-500);
  --rp-border-strong: var(--rp-mono-500);
  --rp-border-bold: var(--rp-mono-400);
  --rp-brand: var(--rp-mono-200);
  --rp-brand-strong: var(--rp-mono-200);
  --rp-brand-soft: var(--rp-mono-850);
  --rp-brand-fill: var(--rp-mono-800);
  --rp-brand-border: var(--rp-mono-750);
  --rp-brand-border-strong: var(--rp-mono-500);
  --rp-brand-ink: var(--rp-mono-200);
  --rp-action: var(--rp-mono-300);
  --rp-action-hover: var(--rp-mono-350);
  --rp-action-border: var(--rp-mono-400);
  --rp-action-soft: var(--rp-mono-800);
  --rp-action-tint: var(--rp-mono-850);
  --rp-focus: var(--rp-mono-200);
}

/* Ink: the EN marketing site and blog (<html data-brand="ink">). A second
   brand, not a dark theme: the same semantic names carry the EN site's own
   near-black ink, electric-blue accent, black pill CTAs and Geist / Space
   Grotesk type. Values match styles-en.css as it was before the move
   (computed-style A/B, 2026-10-01). */
:root[data-brand="ink"] {
  --rp-canvas: var(--rp-ink-50);
  --rp-surface: var(--rp-white);
  --rp-surface-sunken: var(--rp-ink-100);
  --rp-surface-muted: var(--rp-ink-150);
  --rp-inverse-surface: var(--rp-ink-950);
  --rp-inverse-surface-raised: var(--rp-ink-900);
  --rp-fill: var(--rp-ink-200);

  --rp-text: var(--rp-ink-950);
  --rp-text-soft: var(--rp-ink-800);
  --rp-text-muted: var(--rp-ink-600);
  --rp-text-faint: var(--rp-ink-500);
  --rp-heading: var(--rp-ink-950);
  --rp-text-on-action: var(--rp-white);
  --rp-text-inverse: var(--rp-white);

  --rp-border: var(--rp-ink-200);
  --rp-border-control: var(--rp-ink-300);

  --rp-brand: var(--rp-electric-500);
  --rp-brand-strong: var(--rp-electric-900);
  --rp-brand-soft: var(--rp-electric-50);
  --rp-action: var(--rp-ink-950);       /* black pill CTA */
  --rp-action-hover: var(--rp-ink-900);
  --rp-focus: var(--rp-electric-500);

  --rp-font-en: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rp-font-display: "Space Grotesk", "Geist", ui-sans-serif, system-ui, sans-serif;
  --rp-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --rp-shadow-sm: 0 2px 10px rgba(16, 17, 20, 0.05);
  --rp-shadow-md: 0 16px 32px -12px rgba(16, 17, 20, 0.16);
  --rp-shadow-lg: 0 30px 60px -20px rgba(16, 17, 20, 0.22);
}