/* ================================================================
   TENDERGlobal Portal — Design Tokens
   Single source of truth for colors, typography, spacing, and
   component tokens. Shared by both Arabic (WebAr) and English (WebEn).
   Loads FIRST in the CSS chain — before bootstrap and style.css.
   ================================================================ */

:root {
    /* ── 1. Brand Colors ──────────────────────────────────────── */
    --tg-primary:            #f5833d;           /* Orange — CTA, highlights */
    --tg-primary-hover:      #e6701a;
    --tg-secondary:          #2e8795;           /* Teal — headers, links, accents */
    --tg-secondary-dark:     #1d5c67;
    --tg-secondary-light:    #e0e7ff;
    --tg-accent:             #01b7f2;           /* Blue — info, accent highlights */

    /* Semantic aliases (consumed by components & pages) */
    --brand-primary:         var(--tg-primary);
    --brand-primary-hover:   var(--tg-primary-hover);
    --brand-secondary:       var(--tg-secondary);
    --brand-secondary-dark:  var(--tg-secondary-dark);
    --brand-secondary-light: var(--tg-secondary-light);
    --brand-accent:          var(--tg-accent);

    /* ── 2. Text Colors ───────────────────────────────────────── */
    --tg-text:               #747474;           /* Body text */
    --tg-text-strong:        #0f172a;           /* Headings, emphasis */
    --tg-text-muted:         #666666;           /* Secondary text */
    --tg-text-light:         #888888;           /* Hints, placeholders */

    --brand-text:            var(--tg-text);
    --brand-text-strong:     var(--tg-text-strong);
    --brand-text-muted:      var(--tg-text-muted);
    --brand-text-light:      var(--tg-text-light);

    /* ── 3. Background & Border ───────────────────────────────── */
    --tg-bg:                 #ffffff;
    --tg-bg-alt:             #f8fafc;           /* Gray-area, cards */
    --tg-border:             #e2e8f0;
    --tg-border-strong:      #cbd5e1;

    --brand-bg:              var(--tg-bg);
    --brand-bg-alt:          var(--tg-bg-alt);
    --brand-border:          var(--tg-border);
    --brand-border-strong:   var(--tg-border-strong);

    /* ── 4. Status Colors ─────────────────────────────────────── */
    --tg-success:            #98ce44;
    --tg-warning:            #f59e0b;
    --tg-danger:             #ef4444;
    --tg-info:               #3b82f6;

    --brand-success:         var(--tg-success);
    --brand-warning:         var(--tg-warning);
    --brand-danger:          var(--tg-danger);
    --brand-info:            var(--tg-info);

    /* ── 5. Typography ────────────────────────────────────────── */
    --tg-font-family:        "Tajawal", "Segoe UI", Roboto, Arial, sans-serif;

    --tg-font-base:          1rem;              /* 16px */
    --tg-font-sm:            0.875rem;          /* 14px */
    --tg-font-xs:            0.8125rem;         /* 13px */
    --tg-font-lg:            1.125rem;          /* 18px */
    --tg-btn:                0.95rem;           /* ~15px — button text */

    --tg-line-height-base:     1.75;            /* ↑ was 1.6 — more breathing room for Arabic diacritics */
    --tg-line-height-tight:    1.5;             /* Compact but still readable */
    --tg-line-height-headings: 1.35;            /* ↑ was 1.2 — less cramped multi-line headings */
    --tg-word-spacing:         0.02em;          /* Subtle word separation for Arabic */
    --tg-letter-spacing-body:  0.01em;          /* Micro letter-spacing for readability */
    --tg-letter-spacing-ui:    0.03em;          /* Labels, buttons, meta text */

    /* Fluid heading scale */
    --tg-h1: clamp(2rem, 2vw + 1.5rem, 2.75rem);
    --tg-h2: clamp(1.75rem, 1.5vw + 1.25rem, 2.25rem);
    --tg-h3: clamp(1.5rem, 1vw + 1.1rem, 1.875rem);
    --tg-h4: 1.25rem;
    --tg-h5: 1.125rem;
    --tg-h6: 1rem;

    /* ── 6. Spacing Scale ─────────────────────────────────────── */
    --tg-space-2xs:          0.125rem;          /* 2px */
    --tg-space-xs:           0.25rem;           /* 4px */
    --tg-space-sm:           0.5rem;            /* 8px */
    --tg-space-md:           1rem;              /* 16px */
    --tg-space-lg:           1.5rem;            /* 24px */
    --tg-space-xl:           2rem;              /* 32px */
    --tg-space-2xl:          3rem;              /* 48px */

    /* ── 7. Component Tokens ──────────────────────────────────── */
    --tg-input-height:       42px;
    --tg-btn-height:         40px;
    --tg-border-radius:      8px;
    --tg-border-radius-sm:   4px;
    --tg-border-radius-lg:   12px;
    --tg-border-radius-pill: 9999px;

    /* ── 8. Elevation / Shadows ───────────────────────────────── */
    --tg-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
    --tg-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
    --tg-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --tg-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --tg-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* ── 9. Transitions ───────────────────────────────────────── */
    --tg-transition-fast:    all 0.15s ease;
    --tg-transition-base:    all 0.2s ease;
    --tg-transition-slow:    all 0.3s ease;

    /* ── 10. Legacy Aliases (backward-compatible) ─────────────── */
    /* These map to existing var references in style.css / page CSS.
       Keep until Phase 4 cleanup replaces all consumers. */
    --bg-light:              var(--tg-bg-alt);
    --border-color:          var(--tg-border);
    --border-radius:         var(--tg-border-radius);
    --shadow:                var(--tg-shadow-sm);
    --transition:            var(--tg-transition-base);
    --primary-blue:          var(--tg-secondary);
    --secondary-blue:        var(--tg-accent);
    --accent-orange:         var(--tg-primary);
    --card-bg:               var(--tg-bg);
    --text-medium:           var(--tg-text-muted);
    --text-light:            var(--tg-text-light);
    --shadow-light:          var(--tg-shadow-xs);
}