/* ══════════════════════════════════════════════════════════════════════════════════════════════
   tokens.css — THE design tokens of Floody. Single source of truth for every colour, radius,
   type size, shadow, motion curve and control height in the product.

   Who reads it
     • The panels (tenant + owner): Tailwind utilities resolve against these variables. The
       inline theme in views/shared/layouts/_theme.ejs is only a REGISTRY of names
       (`@theme inline reference`); it holds no values of its own.
     • ui.css (the component layer), app.css, the two full-screen builders, the public
       questionnaire pages, the toast, the tooltip and the feedback widget — directly, as var().

   Rules
     1. No literal colour, radius, shadow or font-size anywhere else. If a value is missing,
        add a token HERE, give it a semantic name, and use that.
     2. Semantic names only (what it is FOR, not what it looks like): `danger`, not `red`.
     3. Every tone ships four steps:  base (fills, icons, dots) · strong (text on light, ≥ 4.5:1)
        · soft (tinted background) · line (tinted border).
     4. The variable names match Tailwind's namespaces (--color-*, --radius-*, --text-*,
        --shadow-*, --font-*), so `bg-danger-soft` and `var(--color-danger-soft)` are the same thing.
   See docs/design-system.md for usage.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Typeface ─────────────────────────────────────────────────────────────────────────────── */
  --font-sans: 'Vazirmatn', 'Sahel', Tahoma, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ── Brand & ink ──────────────────────────────────────────────────────────────────────────── */
  --color-white: #ffffff;
  --color-black: #000000;
  /* The product's ink: primary buttons, the selected item, headings. A near-black navy, not a
     hue — the panel reads as a calm instrument, and colour is reserved for meaning. */
  --color-primary: #0f172a;
  --color-primary-hover: #1e293b;
  --color-on-primary: #ffffff;
  /* The ONE accent: links, focus, selection, «in progress», information. */
  --color-accent: #2563eb;
  --color-accent-strong: #1d4ed8;
  --color-accent-soft: #eff4ff;
  --color-accent-line: #c7d7fd;
  /* Legacy name, kept because templates still say `text-secondary` for slate ink. */
  --color-secondary: #64748b;

  /* ── Text ─────────────────────────────────────────────────────────────────────────────────── */
  --color-text-primary: #0f172a;   /* 17.9:1 on white */
  --color-text-secondary: #475569; /*  7.6:1 */
  --color-text-muted: #64748b;     /*  4.8:1 — the floor for readable small text */
  --color-text-disabled: #94a3b8;  /*  decorative / disabled only */
  --color-text-inverse: #ffffff;

  /* ── Surfaces ─────────────────────────────────────────────────────────────────────────────── */
  --color-canvas: #f4f5f7;         /* the page behind every card */
  --color-bg-primary: #ffffff;     /* cards, dialogs, inputs */
  --color-bg-secondary: #f8fafc;   /* subtle fill inside a card: table head, tiles, rails */
  --color-bg-tertiary: #f1f4f8;    /* hover / pressed state of a subtle fill */
  --color-bg-soft: #f8fafc;        /* legacy alias of bg-secondary */
  --color-bg-label: #f8fafc;       /* legacy alias of bg-secondary */
  --color-overlay: rgba(15, 23, 42, 0.56);

  /* ── Borders ──────────────────────────────────────────────────────────────────────────────── */
  --color-border-light: #e9edf2;   /* dividers, card edges */
  --color-border-medium: #dde2e9;  /* inputs, secondary buttons */
  --color-border-dark: #c4ccd7;    /* hover edge, emphasised outline */

  /* ── Semantic tones ───────────────────────────────────────────────────────────────────────── */
  --color-success: #059669;
  --color-success-strong: #047857;
  --color-success-soft: #ecfdf5;
  --color-success-line: #a7f3d0;

  --color-warning: #d97706;
  --color-warning-strong: #b45309;
  --color-warning-soft: #fffbeb;
  --color-warning-line: #fcd9a0;

  --color-danger: #dc2626;
  --color-danger-strong: #b91c1c;
  --color-danger-soft: #fef2f2;
  --color-danger-line: #fecaca;

  --color-info: var(--color-accent);
  --color-info-strong: var(--color-accent-strong);
  --color-info-soft: var(--color-accent-soft);
  --color-info-line: var(--color-accent-line);

  --color-neutral: #64748b;
  --color-neutral-strong: #475569;
  --color-neutral-soft: #f1f4f8;
  --color-neutral-line: #dde2e9;

  /* Process state — aliases of the tones above, kept for the views that speak in task terms. */
  --color-status-todo: var(--color-neutral);
  --color-status-doing: var(--color-accent);
  --color-status-done: var(--color-success);
  --color-status-blocked: var(--color-danger);
  --color-status-pending: var(--color-warning);

  /* ── Data visualisation ───────────────────────────────────────────────────────────────────── */
  /* Categorical: distinct, equally weighted, all ≥ 3:1 on white. Use in this order. */
  --color-chart-1: #2563eb;
  --color-chart-2: #0d9488;
  --color-chart-3: #d97706;
  --color-chart-4: #db2777;
  --color-chart-5: #7c3aed;
  --color-chart-6: #64748b;
  /* Sequential (one hue, dark → light): funnels, ordered steps, heat. */
  --color-seq-1: #1e3a8a;
  --color-seq-2: #1d4ed8;
  --color-seq-3: #3b82f6;
  --color-seq-4: #93c5fd;
  --color-seq-5: #dbeafe;

  /* ── Channel identity ───────────────────────────────────────────────────────────────────────
     The recognisable hue of each outbound channel (app.css → [data-channel]). Brand colours of
     third parties, so they are the one place a hue is not semantic. Email is sky, not Gmail red:
     red means failure in this product. */
  --color-channel-sms: var(--color-primary);
  --color-channel-bale: #00b894;
  --color-channel-whatsapp: #1faa54;
  --color-channel-email: #0284c7;
  --color-channel-voice: #7c3aed;

  /* ── File identity ──────────────────────────────────────────────────────────────────────────
     The badge of a file a visitor downloads (a questionnaire's gift): the hue people already
     associate with the format (PDF red, Word blue, Excel green…), so they recognise it before
     they read it. Like the channel hues, these are identity, not status. Every one clears AA
     against white, because the extension («PDF», «ZIP») is written on it in white. */
  --color-file-pdf: #c62828;
  --color-file-word: #2b579a;
  --color-file-excel: #1d6f42;
  --color-file-slides: #c2410c;
  --color-file-archive: #a16207;
  --color-file-ebook: #0369a1;
  --color-file-image: #0f766e;
  --color-file-audio: #be185d;
  --color-file-video: #6d28d9;
  --color-file-other: #475569;

  /* ── Radius ───────────────────────────────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;    /* controls: buttons, inputs, selects */
  --radius-2xl: 12px;   /* tiles and panels inside a card */
  --radius-3xl: 14px;   /* cards */
  --radius-4xl: 18px;   /* dialogs */
  --radius-control: var(--radius-xl);
  --radius-card: var(--radius-3xl);
  --radius-dialog: var(--radius-4xl);

  /* ── Type scale (size + its own line-height; Persian needs room for its marks) ───────────── */
  --text-3xs: 11px;  --text-3xs--line-height: 1.6;
  --text-2xs: 12px;  --text-2xs--line-height: 1.6;
  --text-xs: 13px;   --text-xs--line-height: 1.65;
  --text-sm: 14px;   --text-sm--line-height: 1.7;
  --text-base: 15px; --text-base--line-height: 1.7;
  --text-md: 16px;   --text-md--line-height: 1.7;
  --text-lg: 18px;   --text-lg--line-height: 1.6;
  --text-xl: 20px;   --text-xl--line-height: 1.5;
  --text-2xl: 24px;  --text-2xl--line-height: 1.4;
  --text-3xl: 30px;  --text-3xl--line-height: 1.3;
  --text-4xl: 36px;  --text-4xl--line-height: 1.25;
  --text-5xl: 48px;  --text-5xl--line-height: 1.15;

  /* ── Elevation ────────────────────────────────────────────────────────────────────────────── */
  /* Cards are FLAT: the border draws the edge, the shadow only seats it. Lift is reserved for
     things that genuinely float — menus, popovers, dialogs, toasts. */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 16px 40px -12px rgba(15, 23, 42, 0.22), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-popover: 0 12px 32px -8px rgba(15, 23, 42, 0.18), 0 2px 6px -2px rgba(15, 23, 42, 0.08);
  --shadow-button: 0 1px 2px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.24);
  --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.18);

  /* ── Motion ───────────────────────────────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  /* A screen arriving (the public questionnaire): one calm rise, its parts following a breath
     apart. Opacity and transform only. */
  --duration-reveal: 440ms;
  --duration-stagger: 40ms;
  /* Loops, not transitions: one turn of a loading spinner, and one breath of the «in progress»
     pulse on whatever is waiting right now (the automation builder's live test). */
  --duration-spin: 800ms;
  --duration-pulse: 1600ms;
  /* A count that runs up to its value when it first appears (the import dialog's tally). */
  --duration-count: 700ms;

  /* ── Sizing ───────────────────────────────────────────────────────────────────────────────── */
  --control-h-sm: 34px;
  --control-h: 38px;
  --control-h-lg: 44px;
  --sidebar-w: 16rem;
  --content-max: 80rem;

  /* ── Layering ─────────────────────────────────────────────────────────────────────────────── */
  --z-sticky: 20;
  --z-drawer: 40;
  --z-popover: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-tooltip: 80;
}

/* ── Dark theme ─────────────────────────────────────────────────────────────────────────────────
   Not switched on anywhere yet; kept complete so turning it on is one class on <html>. */
.theme-dark {
  --color-primary: #e2e8f0;
  --color-primary-hover: #f1f5f9;
  --color-on-primary: #0f172a;
  --color-accent: #60a5fa;
  --color-accent-strong: #93c5fd;
  --color-accent-soft: rgba(96, 165, 250, 0.12);
  --color-accent-line: rgba(96, 165, 250, 0.32);
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-text-disabled: #64748b;
  --color-canvas: #0b1220;
  --color-bg-primary: #0f172a;
  --color-bg-secondary: #1e293b;
  --color-bg-tertiary: #253247;
  --color-bg-soft: #1e293b;
  --color-bg-label: #1e293b;
  --color-border-light: #1e293b;
  --color-border-medium: #334155;
  --color-border-dark: #475569;
  --color-success: #34d399; --color-success-strong: #6ee7b7; --color-success-soft: rgba(52, 211, 153, 0.12); --color-success-line: rgba(52, 211, 153, 0.32);
  --color-warning: #fbbf24; --color-warning-strong: #fcd34d; --color-warning-soft: rgba(251, 191, 36, 0.12); --color-warning-line: rgba(251, 191, 36, 0.32);
  --color-danger: #f87171;  --color-danger-strong: #fca5a5; --color-danger-soft: rgba(248, 113, 113, 0.12); --color-danger-line: rgba(248, 113, 113, 0.32);
  --color-neutral: #94a3b8; --color-neutral-strong: #cbd5e1; --color-neutral-soft: #1e293b; --color-neutral-line: #334155;
  --color-channel-bale: #00d6ac;
  --color-channel-whatsapp: #25d366;
  --color-channel-email: #38bdf8;
  --color-channel-voice: #a78bfa;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-popover: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}