/* =============================================================
   tokens.css — Single Source of Truth for Design Tokens
   Multi-SaaS / Multi-Tenant Theming System
   =============================================================
   HOW TO THEME:
   1) Per-tenant: override only  --brand-h / --brand-s / --brand-l  in a
      <style> block before this file, or after in a tenant-skin.css.
   2) Dark mode (future): add   [data-theme="dark"] { ... }
   3) Every semantic token below is derived from those 3 brand primitives.
   ============================================================= */

/* ── 1. BRAND PRIMITIVE  (the only values that change per tenant) ── */
:root {
    /* Deep crimson brand — #8f002b (H=342 S=100% L=28%) */
    --brand-h: 342;
    --brand-s: 100%;
    --brand-l: 28%;
}

/* ── 2. COMPUTED PRIMITIVE SHADES (auto-derived — do not touch) ──── */
:root {
    --_p: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
    /* base */
    --_p-hov: hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) - 6%));
    --_p-act: hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) - 12%));
    --_p-sft: hsl(var(--brand-h), calc(var(--brand-s) - 20%), calc(var(--brand-l) + 32%));
    --_p-xsf: hsl(var(--brand-h), calc(var(--brand-s) - 30%), calc(var(--brand-l) + 40%));
    --_sec: hsl(calc(var(--brand-h) + 145deg), 20%, 42%);
    --_acc: hsl(calc(var(--brand-h) + 32deg), 70%, 55%);
}

/* ── 3. SEMANTIC TOKENS (what all components consume) ─────────────── */
:root {
    /* --- Surfaces --- */
    --color-bg: #F7F7F7;
    --color-bg-2: #F2F0ED;
    --color-surface: #FFFFFF;
    --color-surface-2: #F6F5F3;
    --color-surface-inv: #1A1A1A;

    /* --- Text --- */
    --color-text: #111111;
    --color-text-muted: #6A6E73;
    --color-text-faint: #B1B3B8;
    --color-text-inv: #FFFFFF;

    /* --- Borders --- */
    --color-border: #E4E4E4;
    --color-border-strong: #C8C8C8;
    --color-border-focus: var(--_p);

    /* --- Brand / Primary --- */
    --color-primary: var(--_p);
    --color-primary-hover: var(--_p-hov);
    --color-primary-active: var(--_p-act);
    --color-primary-soft: var(--_p-sft);
    --color-primary-xsoft: var(--_p-xsf);
    --color-primary-contrast: #FFFFFF;

    /* --- Secondary / Accent --- */
    --color-secondary: var(--_sec);
    --color-secondary-soft: hsl(calc(var(--brand-h) + 145deg), 10%, 92%);
    --color-accent: var(--_acc);

    /* --- Semantic States --- */
    --color-danger: #E53E3E;
    --color-danger-soft: rgba(229, 62, 62, .10);
    --color-success: #2F9E44;
    --color-success-soft: rgba(47, 158, 68, .10);
    --color-warning: #E67700;
    --color-warning-soft: rgba(230, 119, 0, .10);

    /* --- Focus Ring --- */
    --color-focus-ring: hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) + 8%));

    /* --- Shadows (3 levels + colored) --- */
    --shadow-1: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .05);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
    --shadow-primary: 0 4px 16px hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) + 10%), .35);

    /* --- Radii --- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* --- Spacing rhythm --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* --- Transitions --- */
    --ease-1: all .15s ease;
    --ease-2: all .22s ease;
    --ease-3: all .32s ease;

    /* --- Typography --- */
    --font-base: "DM Sans", "Helvetica Neue", Arial, sans-serif;
    --font-ar: "Noto Sans Arabic", "Cairo", "Tajawal", sans-serif;

    /* --- backwards-compat aliases (so existing styles.css vars still resolve) --- */
    --white: var(--color-surface);
    --black: #111111;
    --primary: var(--color-primary);
    --secondary: var(--color-secondary);
    --text: var(--color-text);
    --text-2: var(--color-text-muted);
    --text-3: var(--color-text-faint);
    --bg: var(--color-bg);
    --bg-2: var(--color-bg-2);
    --bg-7: var(--color-bg-2);
    --line: var(--color-border);
    --surface: var(--color-surface-2);
    --critical: var(--color-danger);
    --success: var(--color-success);
}

/* ── 4. DARK THEME SCAFFOLD (future use) ──────────────────────────── */
[data-theme="dark"] {
    --color-bg: #111213;
    --color-bg-2: #1A1B1D;
    --color-surface: #1F2022;
    --color-surface-2: #27292C;
    --color-surface-inv: #F5F5F5;
    --color-text: #F0F0F0;
    --color-text-muted: #A0A3A9;
    --color-text-faint: #5C5F67;
    --color-text-inv: #111111;
    --color-border: #2E3035;
    --color-border-strong: #414449;
    --shadow-1: 0 1px 3px rgba(0, 0, 0, .28), 0 1px 2px rgba(0, 0, 0, .20);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .32), 0 2px 4px rgba(0, 0, 0, .20);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, .48), 0 4px 8px rgba(0, 0, 0, .28);
    --white: #1F2022;
    --black: #F0F0F0;
    --bg: #111213;
    --bg-2: #1A1B1D;
    --line: #2E3035;
    --surface: #27292C;
    --text: #F0F0F0;
    --text-2: #A0A3A9;
    --text-3: #5C5F67;
}

/* ── 5. EXAMPLE TENANT OVERRIDES ─────────────────────────────────── */
/*
   Blue tenant:   [data-brand="blue"]  { --brand-h: 210; --brand-s: 75%; --brand-l: 48%; }
   Green tenant:  [data-brand="green"] { --brand-h: 142; --brand-s: 60%; --brand-l: 38%; }
   Gold tenant:   [data-brand="gold"]  { --brand-h: 38;  --brand-s: 85%; --brand-l: 50%; }
   Purple tenant: [data-brand="purple"]{ --brand-h: 265; --brand-s: 65%; --brand-l: 50%; }
*/