/* =============================================================================
   tokens.css — single source of truth for design tokens.

   Loaded FIRST on every page (public + app). Every other CSS file references
   these variables — they MUST be available before any styles that consume them.

   Structure:
     1. Brand palette (raw colour values)
     2. Typography
     3. Semantic tokens (--bg, --surface, --text, --border, --primary, …)
     4. Legacy aliases (pages written against old names)
     5. Dark-mode overrides
   ========================================================================== */

/* ---- 1. Brand palette -------------------------------------------------- */
:root {
    --primary-color: #1e5a4f;      /* Deep green-teal */
    --secondary-color: #2a3d4a;    /* Dark slate-blue */
    --accent-color: #4a6b6f;       /* Muted teal-gray */
    --warm-brown: #a65f2f;         /* Rich burnt sienna */
    --dark-brown: #3f2215;         /* Deep espresso brown */
    --white: #ffffff;
    --light-gray: #f2f4f5;         /* Soft neutral gray */
    --gray: #7a8288;
    --dark-gray: #2d3135;
    --success: #2dba63;
    --warning: #e5b100;
    --danger: #d44c47;
    --info: #2a99a3;

    /* ---- 2. Typography ------------------------------------------------- */
    --font-sans: "Inter", "Estedad", system-ui, -apple-system, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-rtl: "Estedad", "Yekan", "Vazirmatn", "Vazir",
                "Noto Naskh Arabic", Tahoma, "Segoe UI", sans-serif;
    --font-family: var(--font-sans);

    /* ---- 3. Semantic design tokens ------------------------------------- */
    --bg: var(--light-gray);
    --surface: var(--white);
    --surface-2: #e9ecef;
    --text: var(--dark-gray);
    --text-muted: var(--gray);
    --border: #e3e7ea;
    --border-strong: #cdd4d9;
    --primary: var(--primary-color);
    --primary-hover: #17463d;
    --secondary-hover: #3d565d;
    --on-primary: #ffffff;
    --on-surface: var(--dark-gray);
    --ring: rgba(30, 90, 79, 0.18);
    --shadow-sm: 0 1px 3px rgba(15, 23, 28, 0.08);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 30px rgba(15, 23, 28, 0.12);

    /* ---- 3b. Luxury / glassmorphism tokens ----------------------------- */
    /* Rich brand gradient (per-palette override below) and frosted-glass
       surfaces. These are purely cosmetic — every page still reads the plain
       semantic tokens above, so old pages degrade gracefully. */
    --primary-gradient: linear-gradient(135deg, #2a6a63 0%, #1e5a4f 55%, #17463d 100%);
    --primary-soft: rgba(30, 90, 79, 0.12);
    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-bg-strong: rgba(255, 255, 255, 0.82);
    --glass-border: rgba(255, 255, 255, 0.72);
    --glass-shadow: 0 8px 32px rgba(15, 23, 28, 0.14);
    --glass-blur: 18px;
    --glow: rgba(30, 90, 79, 0.28);

    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* ---- 4. Legacy aliases (pages written against older names) ---------- */
    --border-radius: 8px;
    --box-shadow: var(--shadow-md);
    --transition: all 0.3s ease;

    --accent-primary: var(--primary-color);
    --accent-secondary: var(--accent-color);
    --text-primary: var(--text);
    --text-secondary: var(--text-muted);
    --card-bg: var(--surface);
    --bg-primary: var(--bg);
    --bg-secondary: var(--surface);
    --border-color: var(--border);
    --placeholder: #7a8288;
    --status-info: #1976d2;
    --status-success: #2e7d32;
    --status-warning: #b06a00;
}

/* ---- 5. Dark theme ----------------------------------------------------- */
[data-theme="dark"] {
    /* Flip the legacy palette so pages using raw colour names still work. */
    --white: #161b1e;
    --light-gray: #11161a;
    --gray: #9aa6ad;
    --dark-gray: #e8eef3;

    /* Neutral dark palette. */
    --bg: #0f1417;
    --surface: #171d21;
    --surface-2: #222a30;
    --text: #e8eef3;
    --text-muted: #9aa6ad;
    --border: #2a323a;
    --border-strong: #3a444c;
    --primary: #2fa78f;
    --primary-hover: #3cc1a6;
    --secondary-hover: #5a7d83;
    --on-primary: #04201b;
    --on-surface: #e8eef3;
    --ring: rgba(47, 167, 143, 0.35);
    --primary-color: #2fa78f;
    --secondary-color: #263942;
    --accent-color: #6f9da0;
    --placeholder: #aebbc2;
    --status-info: #74b9ff;
    --status-success: #65d391;
    --status-warning: #ffc857;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);

    /* Luxury / glassmorphism (dark) */
    --primary-gradient: linear-gradient(135deg, #35b69c 0%, #2fa78f 50%, #1f7a6a 100%);
    --primary-soft: rgba(47, 167, 143, 0.16);
    --glass-bg: rgba(23, 29, 33, 0.55);
    --glass-bg-strong: rgba(23, 29, 33, 0.82);
    --glass-border: rgba(255, 255, 255, 0.10);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
    --glow: rgba(47, 167, 143, 0.35);

    color-scheme: dark;
}

[data-theme="dark"] {
    --accent-primary: var(--primary);
    --accent-secondary: var(--accent-color);
    --text-primary: var(--text);
    --text-secondary: var(--text-muted);
    --card-bg: var(--surface);
    --bg-primary: var(--bg);
    --bg-secondary: var(--surface-2);
    --border-color: var(--border);
}

/* =============================================================================
   6. Colour palettes — "accent axis".

   The mode (light/dark) is driven by `data-theme`; the palette (brand hue)
   is driven by `data-palette` (defaults to `emerald`, the original brand).

   Each palette overrides only the brand/hue tokens. Neutral tokens
   (--bg, --surface, --text, --border, …) keep following the mode above, and
   the legacy aliases (--accent-primary, --card-bg, …) resolve these lazily
   via var(), so a single override here re-skins the whole site.

   Selector order matters: light blocks come first (they only need to beat
   :root), the combined [data-palette][data-theme=dark] blocks come last so
   they beat the generic dark block in section 5.
   ========================================================================== */

/* ---- Emerald (default brand — also declared in :root for light) -------- */
[data-palette="emerald"][data-theme="dark"] {
    --primary: #2fa78f;
    --primary-hover: #3cc1a6;
    --primary-color: #2fa78f;
    --accent-color: #6f9da0;
    --secondary-color: #263942;
    --on-primary: #04201b;
    --ring: rgba(47, 167, 143, 0.35);
    --primary-gradient: linear-gradient(135deg, #35b69c 0%, #2fa78f 50%, #1f7a6a 100%);
    --primary-soft: rgba(47, 167, 143, 0.16);
    --glow: rgba(47, 167, 143, 0.35);
}

/* ---- Ocean — deep sapphire to bright cyan ------------------------------ */
[data-palette="ocean"] {
    --primary: #1d5f8a;
    --primary-hover: #16496b;
    --primary-color: #1d5f8a;
    --accent-color: #3f82a6;
    --secondary-color: #1f3a4d;
    --ring: rgba(29, 95, 138, 0.20);
    --primary-gradient: linear-gradient(135deg, #2a7bb0 0%, #1d5f8a 55%, #16496b 100%);
    --primary-soft: rgba(29, 95, 138, 0.12);
    --glow: rgba(29, 95, 138, 0.28);
}

[data-palette="ocean"][data-theme="dark"] {
    --primary: #4fb3e8;
    --primary-hover: #70c6f2;
    --primary-color: #4fb3e8;
    --accent-color: #7fb9d6;
    --secondary-color: #16313f;
    --on-primary: #06202e;
    --ring: rgba(79, 179, 232, 0.35);
    --primary-gradient: linear-gradient(135deg, #6cc4f2 0%, #4fb3e8 50%, #2f8fc4 100%);
    --primary-soft: rgba(79, 179, 232, 0.16);
    --glow: rgba(79, 179, 232, 0.35);
}

/* ---- Rose — warm raspberry, blush & cosy ------------------------------- */
[data-palette="rose"] {
    --primary: #b0446d;
    --primary-hover: #8c3456;
    --primary-color: #b0446d;
    --accent-color: #c2658a;
    --secondary-color: #4a2736;
    --ring: rgba(176, 68, 109, 0.20);
    --primary-gradient: linear-gradient(135deg, #c65a85 0%, #b0446d 55%, #8c3456 100%);
    --primary-soft: rgba(176, 68, 109, 0.12);
    --glow: rgba(176, 68, 109, 0.28);
}

[data-palette="rose"][data-theme="dark"] {
    --primary: #f17ba3;
    --primary-hover: #ff94b6;
    --primary-color: #f17ba3;
    --accent-color: #dc90ac;
    --secondary-color: #3a1f2b;
    --on-primary: #2b0d17;
    --ring: rgba(241, 123, 163, 0.35);
    --primary-gradient: linear-gradient(135deg, #ff9cbb 0%, #f17ba3 50%, #c9577f 100%);
    --primary-soft: rgba(241, 123, 163, 0.16);
    --glow: rgba(241, 123, 163, 0.35);
}

/* ---- Gold — luxurious bronze & amber ----------------------------------- */
[data-palette="gold"] {
    --primary: #a96b1d;
    --primary-hover: #8a5515;
    --primary-color: #a96b1d;
    --accent-color: #b9863c;
    --secondary-color: #4a3a1f;
    --ring: rgba(169, 107, 29, 0.22);
    --primary-gradient: linear-gradient(135deg, #c8902f 0%, #a96b1d 55%, #8a5515 100%);
    --primary-soft: rgba(169, 107, 29, 0.14);
    --glow: rgba(169, 107, 29, 0.30);
}

[data-palette="gold"][data-theme="dark"] {
    --primary: #e2b04c;
    --primary-hover: #f2c66e;
    --primary-color: #e2b04c;
    --accent-color: #d8aa6e;
    --secondary-color: #3a2d18;
    --on-primary: #2a1e07;
    --ring: rgba(226, 176, 76, 0.35);
    --primary-gradient: linear-gradient(135deg, #f4cf7c 0%, #e2b04c 50%, #b8862b 100%);
    --primary-soft: rgba(226, 176, 76, 0.16);
    --glow: rgba(226, 176, 76, 0.35);
}