/*
 | TAJ Design Tokens
 | Single source of truth for ALL static colors and font stacks.
 | Other CSS files must use these variables instead of literal color values.
 */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@300;400;500;600;700&family=Cairo:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=El+Messiri:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&family=Reem+Kufi:wght@400;500;600;700&display=swap');

:root {
    /* Typography — webfont system (no Office/default document fonts) */
    --font-ar: 'Cairo', sans-serif;
    --font-ar-body: 'Cairo', sans-serif;
    --font-ar-display: 'Alexandria', sans-serif;
    --font-ar-kufi: 'Reem Kufi', sans-serif;
    --font-ar-editorial: 'El Messiri', sans-serif;
    --font-en-serif: 'Cormorant Garamond', serif;
    --font-en-sans: 'Manrope', sans-serif;
    --font-en-display: 'Cormorant Garamond', serif;
    --font-en-ui: 'Manrope', sans-serif;

    /* Landing typography */
    --font-ar-luxury-display: 'El Messiri', sans-serif;
    --font-ar-luxury-body: 'Cairo', sans-serif;
    --font-ar-luxury-meta: 'Reem Kufi', sans-serif;
    --font-en-luxury-display: 'Cormorant Garamond', serif;
    --font-en-luxury-body: 'Manrope', sans-serif;

    /* Type scale — only small UI copy was lifted; titles keep restrained proportions. */
    --type-micro: 11px;
    --type-xs: 12px;
    --type-sm: 13px;
    --type-base: 15px;
    --type-md: 16px;
    --type-lg: 18px;
    --type-xl: 22px;
    --type-2xl: 28px;
    --type-3xl: 36px;

    /* Brand palette */
    --taj-ink: #120e0b;
    --taj-ink-soft: #211813;
    --taj-coffee: #38261d;
    --taj-gold: #c79a55;
    --taj-gold-soft: #dfbd84;
    --taj-amber: #b86728;
    --taj-ivory: #f5eee3;
    --taj-cream: #e9ddcd;
    --taj-stone: #9a8d80;
    --taj-success: #607c62;
    --taj-danger: #a64b40;
    --taj-warning: #a77732;
    --taj-info: #607788;

    /* Base surfaces */
    --surface-page: #0e0b09;
    --surface-panel: #17110e;
    --surface-elevated: #201814;
    --surface-light: #f3ece2;
    --surface-admin: #efe7db;
    --surface-admin-card: #f8f3ec;
    --surface-admin-card-soft: #f4ede4;
    --surface-admin-sidebar: #120d0a;
    --surface-input: #fbf8f3;
    --surface-white-soft: rgba(255, 255, 255, 0.54);
    --surface-white-faint: rgba(255, 255, 255, 0.34);
    --surface-dark-glass: rgba(18, 13, 10, 0.84);
    --surface-topbar: rgba(239, 231, 219, 0.9);
    --surface-overlay: rgba(14, 11, 9, 0.52);

    /* Text */
    --text-primary: #f6efe5;
    --text-secondary: #b9aa9d;
    --text-dark: #1a130f;
    --text-dark-soft: #5f554e;
    --text-dark-muted: #75685f;
    --text-dark-faint: #95867a;
    --text-gold-dark: #806649;
    --text-success: #415c44;
    --text-danger: #7d2f29;
    --text-warning: #715226;

    /* Borders */
    --border-soft: rgba(223, 189, 132, 0.18);
    --border-strong: rgba(223, 189, 132, 0.42);
    --border-admin: rgba(78, 57, 43, 0.12);
    --border-admin-strong: rgba(78, 57, 43, 0.2);
    --border-danger: rgba(166, 75, 64, 0.24);
    --border-success: rgba(96, 124, 98, 0.24);
    --border-warning: rgba(167, 119, 50, 0.25);

    /* Tints */
    --gold-tint: rgba(199, 154, 85, 0.1);
    --gold-tint-strong: rgba(199, 154, 85, 0.16);
    --gold-focus: rgba(199, 154, 85, 0.15);
    --success-tint: rgba(96, 124, 98, 0.09);
    --danger-tint: rgba(166, 75, 64, 0.08);
    --warning-tint: rgba(167, 119, 50, 0.09);
    --info-tint: rgba(96, 119, 136, 0.09);

    /* Product/site visual tokens */
    --site-hero-glow: rgba(184, 103, 40, 0.2);
    --site-card-start: rgba(32, 24, 20, 0.95);
    --site-card-end: rgba(15, 11, 9, 0.88);
    --site-bottle-shine: rgba(255, 255, 255, 0.09);
    --site-bottle-gloss: rgba(255, 255, 255, 0.06);
    --site-bottle-start: #3a2114;
    --site-bottle-mid: #8b4b1f;
    --site-bottle-end: #24150f;
    --site-footer: #0b0908;
    --site-header: rgba(14, 11, 9, 0.7);
    --site-header-solid: rgba(14, 11, 9, 0.94);
    --site-header-border: rgba(245, 238, 227, 0.1);
    --site-mobile-menu: rgba(14, 11, 9, 0.98);
    --site-hero-overlay-start: rgba(14, 11, 9, 0.08);
    --site-hero-overlay-end: rgba(14, 11, 9, 0.78);
    --site-hero-edge: rgba(223, 189, 132, 0.18);
    --site-hero-copy-shadow: rgba(0, 0, 0, 0.32);
    --site-section-line: rgba(245, 238, 227, 0.12);
    --site-section-soft: rgba(245, 238, 227, 0.055);
    --site-section-softer: rgba(245, 238, 227, 0.025);
    --site-gold-line: rgba(199, 154, 85, 0.46);
    --site-gold-soft-line: rgba(223, 189, 132, 0.26);
    --site-card-border: rgba(245, 238, 227, 0.1);
    --site-card-overlay: rgba(14, 11, 9, 0.18);
    --site-card-overlay-deep: rgba(14, 11, 9, 0.56);
    --site-paper: #efe6da;
    --site-paper-soft: #e4d7c8;
    --site-paper-text: #1e1510;
    --site-paper-muted: #6a5a4d;
    --site-field: rgba(245, 238, 227, 0.045);
    --site-field-hover: rgba(245, 238, 227, 0.075);
    --site-field-border: rgba(245, 238, 227, 0.16);
    --site-danger-bg: rgba(166, 75, 64, 0.14);
    --site-success-bg: rgba(96, 124, 98, 0.16);
    --site-shadow-image: 0 34px 84px rgba(0, 0, 0, 0.34);
    --site-shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.18);
    --site-progress-track: rgba(245, 238, 227, 0.1);
    --site-progress-fill: #c79a55;
    --site-catalog-surface: #15100d;
    --site-catalog-alt: #1c1511;
    --site-skip-bg: #f5eee3;
    --site-skip-text: #120e0b;

    /* Authentication visual tokens */
    --auth-glow: rgba(199, 154, 85, 0.16);
    --auth-start: #1b120e;
    --auth-end: #090706;
    --auth-bottle-border: rgba(223, 189, 132, 0.26);
    --auth-bottle-start: rgba(184, 103, 40, 0.44);
    --auth-bottle-end: rgba(31, 18, 12, 0.5);
    --auth-input-border: #cabdae;
    --auth-input-text: #19120e;
    --auth-input-bg: rgba(255, 255, 255, 0.58);
    --auth-focus-border: #a97d40;
    --auth-button: #1b130f;
    --auth-button-hover: #322219;
    --auth-button-text: #f7efe3;
    --auth-accent: #7a552d;

    /* Redesign v2 neutral UI tokens */
    --surface-admin-sidebar-alt: #18120f;
    --surface-admin-hover: rgba(199, 154, 85, 0.075);
    --surface-admin-active: rgba(199, 154, 85, 0.13);
    --surface-admin-topbar: rgba(248, 243, 236, 0.94);
    --surface-table-head: rgba(78, 57, 43, 0.045);
    --surface-table-hover: rgba(199, 154, 85, 0.055);
    --surface-table-card: #fbf7f1;
    --border-table: rgba(78, 57, 43, 0.13);
    --border-table-strong: rgba(78, 57, 43, 0.22);
    --site-panel-warm: #1b1410;
    --site-panel-deep: #100c0a;
    --site-panel-paper: #eee4d7;
    --site-gold-faint: rgba(199, 154, 85, 0.08);
    --site-gold-hover: rgba(199, 154, 85, 0.14);
    --site-dark-rule: rgba(245, 238, 227, 0.13);
    --site-dark-rule-strong: rgba(245, 238, 227, 0.22);
    --site-copy-muted: #c7b9ab;

    /* Landing v4 editorial surfaces */
    --landing-v4-black: #090706;
    --landing-v4-black-soft: #110d0b;
    --landing-v4-panel: #18110e;
    --landing-v4-panel-soft: #211813;
    --landing-v4-paper: #eee3d5;
    --landing-v4-paper-soft: #dfcfbd;
    --landing-v4-gold: #c99a55;
    --landing-v4-gold-light: #e2c58f;
    --landing-v4-warm: #9b5d2c;
    --landing-v4-text: #f7efe4;
    --landing-v4-muted: #c0b0a1;
    --landing-v4-ink: #18100c;
    --landing-v4-line: rgba(247, 239, 228, 0.14);
    --landing-v4-line-strong: rgba(247, 239, 228, 0.28);
    --landing-v4-gold-line: rgba(201, 154, 85, 0.5);
    --landing-v4-overlay-deep: rgba(9, 7, 6, 0.78);
    --landing-v4-overlay-mid: rgba(9, 7, 6, 0.48);
    --landing-v4-overlay-soft: rgba(9, 7, 6, 0.16);
    --landing-v4-paper-line: rgba(24, 16, 12, 0.16);
    --landing-v4-paper-muted: rgba(24, 16, 12, 0.64);
    --landing-v4-glow: rgba(201, 154, 85, 0.18);
    --landing-v4-grain: rgba(255, 255, 255, 0.035);

    /* Shadow tokens */
    --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.18);
    --shadow-deep: 0 30px 90px rgba(0, 0, 0, 0.34);
    --shadow-floating: 0 18px 50px rgba(34, 24, 18, 0.12);
    --shadow-auth-bottle: 0 40px 100px rgba(0, 0, 0, 0.38);

    /* Radius & motion */
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 36px;

    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --transition-fast: 160ms var(--ease-out);
    --transition-base: 260ms var(--ease-out);
    --transition-slow: 420ms var(--ease-out);

    /* Global layout rhythm */
    --layout-max: 1440px;
    --layout-gutter: clamp(36px, 4.4vw, 68px);

    /* Custom scrollbar */
    --scrollbar-track: #0d0a08;
    --scrollbar-thumb: #6f5235;
    --scrollbar-thumb-hover: #c79a55;
    --scrollbar-thumb-active: #dfbd84;
    --scrollbar-edge: rgba(245, 238, 227, 0.10);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--surface-page);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

body {
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-ar-body);
    font-optical-sizing: auto;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
    font: inherit;
}

html[lang="en"] body {
    font-family: var(--font-en-ui);
}

body,
button,
input,
select,
textarea,
table,
th,
td,
label,
option {
    font-family: var(--font-ar-body);
}

html[lang="en"] body,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea,
html[lang="en"] table,
html[lang="en"] th,
html[lang="en"] td,
html[lang="en"] label,
html[lang="en"] option {
    font-family: var(--font-en-ui);
}

/* Arabic editorial hierarchy */
h1,
h2,
h3,
.page-title,
.admin-page-title {
    font-family: var(--font-ar-display);
}

html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] .page-title,
html[lang="en"] .admin-page-title {
    font-family: var(--font-en-display);
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
}

:focus-visible {
    outline: 2px solid var(--taj-gold-soft);
    outline-offset: 3px;
}

::selection {
    background: var(--taj-gold);
    color: var(--taj-ink);
}

/* TAJ custom scrollbar — global, including nested tables/panels */
*::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-inline-start: 1px solid var(--scrollbar-edge);
}

*::-webkit-scrollbar-thumb {
    min-height: 56px;
    border: 3px solid var(--scrollbar-track);
    border-radius: 999px;
    background: var(--scrollbar-thumb);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active);
}

*::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

@media (max-width: 900px) {
    :root {
        --layout-gutter: 26px;
    }
}

@media (max-width: 560px) {
    :root {
        --layout-gutter: 18px;
    }

    *::-webkit-scrollbar {
        width: 7px;
        height: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Phase 8 — product-specific themes. Static color definitions remain centralized here. */
.product-experience-page {
    --product-bg: var(--surface-page);
    --product-surface: var(--surface-panel);
    --product-text: var(--text-primary);
    --product-accent: var(--taj-gold);
    --product-secondary: var(--taj-amber);
}
.product-theme--paradise { --product-bg: #0e0b09; --product-surface: #120e0b; --product-text: #f6efe5; --product-accent: #b86728; --product-secondary: #c79a55; }
.product-theme--desire { --product-bg: #042a4b; --product-surface: #063a67; --product-text: #f6efe5; --product-accent: #2d8ba5; --product-secondary: #c79a55; }
.product-theme--soulmate { --product-bg: #120906; --product-surface: #1c0e08; --product-text: #f0d8b6; --product-accent: #b86a24; --product-secondary: #7e5e36; }
.product-theme--patron { --product-bg: #f0d8bc; --product-surface: #e7c8a4; --product-text: #21140f; --product-accent: #a8713e; --product-secondary: #2a1710; }
.product-theme--nobility { --product-bg: #5a1c17; --product-surface: #8d551b; --product-text: #fff1d7; --product-accent: #c79a55; --product-secondary: #b77a2d; }
.product-theme--elegance { --product-bg: #e8d1b5; --product-surface: #d6b999; --product-text: #281a13; --product-accent: #4a352b; --product-secondary: #c79a55; }

/* Accord palette used by product accord visualization. */
.accord-theme--warm-spicy { --accord-color: #c94e16; }
.accord-theme--fresh-spicy { --accord-color: #78a92f; }
.accord-theme--amber { --accord-color: #c56b20; }
.accord-theme--vanilla { --accord-color: #e9d889; }
.accord-theme--sweet { --accord-color: #dd3655; }
.accord-theme--cinnamon { --accord-color: #b65b21; }
.accord-theme--powdery { --accord-color: #d5ae88; }
.accord-theme--balsamic { --accord-color: #9b7a54; }
.accord-theme--woody { --accord-color: #6e3d1e; }
.accord-theme--aromatic { --accord-color: #4a9b8f; }
.accord-theme--citrus { --accord-color: #f0c72d; }
.accord-theme--floral { --accord-color: #de7a93; }
.accord-theme--oud { --accord-color: #5e473a; }
.accord-theme--earthy { --accord-color: #7d6b60; }
.accord-theme--green { --accord-color: #609a62; }
.accord-theme--musky { --accord-color: #c8b6d7; }
.accord-theme--leather { --accord-color: #925f3e; }
.accord-theme--animalic { --accord-color: #9a620c; }
.accord-theme--metallic { --accord-color: #a9bac6; }
.accord-theme--tobacco { --accord-color: #b58a45; }

/* Dashboard v3 + Landing v3 tokens */
:root {
    --dash-line: rgba(78, 57, 43, 0.14);
    --dash-line-strong: rgba(78, 57, 43, 0.24);
    --dash-muted-bg: rgba(78, 57, 43, 0.035);
    --dash-hover-bg: rgba(199, 154, 85, 0.065);
    --dash-gold-bg: rgba(199, 154, 85, 0.11);
    --dash-danger-bg: rgba(166, 75, 64, 0.08);
    --dash-success-bg: rgba(96, 124, 98, 0.1);
    --dash-gauge-track: rgba(78, 57, 43, 0.1);
    --dash-gauge-value: #b28648;
    --landing-v3-black: #0a0807;
    --landing-v3-black-soft: #110d0b;
    --landing-v3-paper: #eee3d4;
    --landing-v3-paper-2: #e2d3c0;
    --landing-v3-ink: #17100d;
    --landing-v3-copy: #c8b9aa;
    --landing-v3-line: rgba(245, 238, 227, 0.14);
    --landing-v3-line-light: rgba(23, 16, 13, 0.16);
    --landing-v3-gold-wash: rgba(199, 154, 85, 0.13);
    --landing-v3-overlay: rgba(10, 8, 7, 0.56);
    --landing-v3-overlay-deep: rgba(10, 8, 7, 0.8);
    --landing-v3-card: rgba(245, 238, 227, 0.035);
    --landing-v3-glow: rgba(184, 103, 40, 0.22);
    --landing-v3-shadow: 0 32px 90px rgba(0, 0, 0, 0.38);
    --landing-v3-transition: #0b0908;
}