/*
 * Design tokens — DESIGN_SYSTEM_Directory.md + "Resolved design decisions" (CLAUDE.md)
 * Naming: semantic kebab-case (§9). Spacing tokens keep the real px value (§5).
 * Tokens only; nothing here produces visible output on its own.
 *
 * Breakpoints (layout-driven, CLAUDE.md "Approved technical decisions").
 * Custom properties cannot be used inside @media, so they are documented here and in base.css:
 *   mobile   < 640px
 *   tablet   640px – 1023px   -> @media (min-width: 640px)
 *   desktop  >= 1024px        -> @media (min-width: 1024px)
 */

:root {
  /* ---------- Typography (§3.1, §49 Fonts) ---------- */
  --font-family-base: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; /* resolved P1-1 */

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --font-size-h1: 32px;
  --font-size-h2: 26px;
  --font-size-h3: 20px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-size-caption: 12px;
  --font-size-h4: 16px;                     /* resolved P1-3 */
  --font-size-h5: 14px;
  --font-size-h6: 14px;

  /* Below 640px (resolved P1-13); from 640px up the scale above applies */
  --font-size-h1-mobile: 26px;
  --font-size-h2-mobile: 20px;
  --font-size-h3-mobile: 18px;

  --font-weight-h1: var(--font-weight-bold);
  --font-weight-h2: var(--font-weight-bold);
  --font-weight-h3: var(--font-weight-semibold);
  --font-weight-h4: var(--font-weight-semibold);
  --font-weight-h5: var(--font-weight-semibold);
  --font-weight-h6: var(--font-weight-semibold);
  --font-weight-body: var(--font-weight-regular);

  --line-height-body: 1.7;
  --line-height-h1: 1.35;                   /* resolved P1-2 */
  --line-height-h2: 1.35;
  --line-height-h3: 1.4;
  --control-line-height: 1.4;               /* Phase 2 review: buttons, inputs, selects, search */

  /* ---------- Colors: primary (§4.1) ---------- */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-active: #1E40AF;
  --color-primary-soft: #EFF6FF;
  --color-primary-border: #93C5FD;          /* resolved A2: primary border / active filter */
  --color-on-primary: #FFFFFF;              /* text on primary (§10.1, §22) */

  /* ---------- Colors: neutral (§4.2 + resolved A2) ---------- */
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-text: #111827;
  --color-text-strong-secondary: #374151;   /* resolved A2: labels, secondary button text, current breadcrumb */
  --color-text-secondary: #4B5563;
  --color-text-muted: #6B7280;
  --color-placeholder: #9CA3AF;             /* resolved A2 */
  --color-border: #E5E7EB;
  --color-input-border: #D1D5DB;

  /* ---------- Colors: semantic (§4.3, text + borders from §31 per resolved A1/A2) ---------- */
  --color-success: #16A34A;
  --color-success-bg: #F0FDF4;
  --color-success-text: #166534;
  --color-success-border: #BBF7D0;

  --color-warning: #D97706;
  --color-warning-bg: #FFFBEB;
  --color-warning-text: #92400E;
  --color-warning-border: #FDE68A;

  --color-danger: #DC2626;
  --color-danger-bg: #FEF2F2;
  --color-danger-text: #991B1B;
  --color-danger-border: #FECACA;
  --color-danger-hover: #B91C1C;            /* resolved P1-7 (Danger button hover) */

  --color-info: #2563EB;
  --color-info-bg: #EFF6FF;
  --color-info-text: #1E40AF;
  --color-info-border: #BFDBFE;

  --color-rating-star: #F59E0B;             /* resolved A2 */

  --color-overlay: rgba(17, 24, 39, .40);   /* §19 */

  /* ---------- Spacing (§5) ---------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;

  /* ---------- Radius (§6 + resolved B3) ---------- */
  --radius-button: 8px;
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-container: 16px;
  --radius-pill: 999px;
  --radius-search: 10px;                    /* §12 Primary Search, resolved B3 */

  /* ---------- Borders ---------- */
  --border-width: 1px;                      /* §13, §33, §35 */

  /* ---------- Shadows (§7 + resolved B4) ---------- */
  --shadow-dropdown: 0 4px 12px rgba(17, 24, 39, .08);
  --shadow-modal: 0 20px 40px rgba(17, 24, 39, .16);

  /* ---------- Focus (§11, §12, §48 + resolved P1-5) ---------- */
  /* Text inputs, selects, textareas: border + ring */
  --focus-border-color: var(--color-primary);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, .10);
  /* Everything else: outline */
  --focus-outline-width: 2px;
  --focus-outline-color: var(--color-primary);
  --focus-outline-offset: 2px;

  /* ---------- Layout (§8.1) ---------- */
  --container-max-width: 1200px;
  --container-padding-mobile: var(--space-16);
  --container-padding-tablet: var(--space-24);
  --container-padding-desktop: var(--space-24);

  /* ---------- Component: Header (§33) + Logo / wordmark (§34, resolved B3) ---------- */
  --header-height-desktop: 64px;
  --header-height-mobile: 56px;
  --header-bg: var(--color-surface);
  --header-border-color: var(--color-border);
  --wordmark-font-size-desktop: 28px;
  --wordmark-font-size-mobile: 24px;
  --wordmark-font-weight: var(--font-weight-bold);
  --wordmark-color: var(--color-text);

  /* ---------- Component: Footer (§35) ---------- */
  --footer-bg: var(--color-surface);
  --footer-border-color: var(--color-border);
  --footer-padding-block: var(--space-32);

  /* ---------- Component: Button (§10.1) ---------- */
  --button-height-sm: 32px;
  --button-height-md: 40px;
  --button-height-lg: 48px;
  --button-padding-inline-sm: var(--space-12);   /* resolved P1-7 */
  --button-padding-inline-md: var(--space-16);
  --button-padding-inline-lg: var(--space-20);
  --button-font-size-sm: var(--font-size-small);
  --button-font-size-md: var(--font-size-small);
  --button-font-size-lg: var(--font-size-body);
  --button-font-weight: var(--font-weight-semibold);
  --button-radius: var(--radius-button);
  --button-primary-bg: var(--color-primary);
  --button-primary-bg-hover: var(--color-primary-hover);
  --button-primary-bg-active: var(--color-primary-active);
  --button-primary-text: var(--color-on-primary);
  --button-secondary-bg: var(--color-surface);
  --button-secondary-border: var(--color-input-border);
  --button-secondary-text: var(--color-text-strong-secondary);
  --button-ghost-bg-hover: var(--color-primary-soft);
  --button-danger-bg: var(--color-danger);
  --button-danger-bg-hover: var(--color-danger-hover);
  --button-danger-text: var(--color-on-primary);

  /* ---------- Component: Input / FormField (§11, resolved B3) ---------- */
  --input-height: 40px;
  --input-radius: var(--radius-input);
  --input-border: var(--color-input-border);
  --input-bg: var(--color-surface);
  --input-font-size: var(--font-size-body);
  --input-padding-inline: var(--space-12);
  --input-text: var(--color-text);
  --input-placeholder: var(--color-placeholder);
  --input-error-border: var(--color-danger);
  --input-error-text: var(--color-danger-text);
  --label-font-size: var(--font-size-small);
  --label-font-weight: var(--font-weight-semibold);
  --label-color: var(--color-text-strong-secondary);
  --label-gap: 6px;                         /* resolved B3 */
  --helper-font-size: var(--font-size-caption); /* resolved B3 */
  --helper-color: var(--color-text-muted);

  /* ---------- Component: SearchInput (§12, §33, resolved B3) ---------- */
  --search-height: 52px;
  --search-radius: var(--radius-search);
  --search-font-size: var(--font-size-body);
  --search-button-min-width: 88px;
  --search-compact-height: 40px;            /* §33 "~40px", resolved P1-9 */
  --search-mobile-height: 48px;             /* resolved P1-9 */
  --search-mobile-button-size: 48px;        /* square, icon-only, aria-label "بحث" */

  /* ---------- Component: Card (§13) ---------- */
  --card-bg: var(--color-surface);
  --card-border-color: var(--color-border);
  --card-radius: var(--radius-card);
  --card-border-color-hover: var(--color-input-border); /* clickable cards only, resolved P1-8 */

  /* ---------- Component: ResultCard (§14, resolved B3) ---------- */
  --result-card-title-font-size: 18px;
  --result-card-title-font-weight: var(--font-weight-semibold);
  --result-card-title-color: var(--color-text);
  --result-card-meta-font-size: var(--font-size-small);
  --result-card-meta-color: var(--color-text-muted);

  /* ---------- Component: Breadcrumbs (§16, resolved B3) ---------- */
  --breadcrumb-font-size: var(--font-size-small);
  --breadcrumb-link-color: var(--color-text-muted);
  --breadcrumb-current-color: var(--color-text-strong-secondary);
  --breadcrumb-link-hover-color: var(--color-primary);
  --breadcrumb-margin-bottom: var(--space-24);

  /* ---------- Component: Tabs (§18) ---------- */
  --tabs-height: 40px;
  --tabs-font-size: var(--font-size-small);
  --tabs-font-weight: var(--font-weight-semibold);
  --tabs-color: var(--color-text-muted);
  --tabs-active-color: var(--color-primary);
  --tabs-indicator-width: 2px;

  /* ---------- Component: Modal (§19) ---------- */
  --modal-bg: var(--color-surface);
  --modal-radius: var(--radius-card);
  --modal-border-color: var(--color-border);
  --modal-overlay: var(--color-overlay);
  --modal-padding: var(--space-24);
  --modal-width-sm: 400px;
  --modal-width-md: 520px;
  --modal-width-lg: 720px;
  --modal-shadow: var(--shadow-modal);

  /* ---------- Component: FilterBar (§21) ---------- */
  --filter-height: 40px;
  --filter-active-bg: var(--color-primary-soft);
  --filter-active-border: var(--color-primary-border);
  --filter-active-text: var(--color-primary-hover);

  /* ---------- Component: Pagination (§22) ---------- */
  --pagination-current-bg: var(--color-primary);
  --pagination-current-text: var(--color-on-primary);
  --pagination-radius: var(--radius-button);

  /* ---------- Component: ItemHeader (§28, resolved B3) ---------- */
  --item-header-title-font-size: var(--font-size-h2);
  --item-header-title-font-weight: var(--font-weight-bold);
  --item-header-meta-font-size: var(--font-size-small);
  --item-header-meta-color: var(--color-text-muted);
  --item-header-logo-size-desktop: 72px;
  --item-header-logo-size-mobile: 56px;
  --item-header-logo-radius: var(--radius-card);
  --item-header-logo-border-color: var(--color-border); /* resolved P1-10 */

  /* ---------- Component: Badge — states (§17, resolved P1-11) ---------- */
  /* Colors come from the matching state tokens: --color-<state>-bg + --color-<state>-text */
  --badge-height: 24px;
  --badge-padding-inline: var(--space-8);
  --badge-radius: var(--radius-pill);
  --badge-font-size: var(--font-size-caption);
  --badge-font-weight: var(--font-weight-semibold);

  /* ---------- Component: Tag — properties / categories (§17, resolved P1-11) ---------- */
  --tag-height: 28px;
  --tag-padding-inline: var(--space-12);
  --tag-radius: 8px;
  --tag-font-size: var(--font-size-caption);
  --tag-font-weight: var(--font-weight-regular);
  --tag-bg: var(--color-background);
  --tag-border-color: var(--color-border);
  --tag-text: var(--color-text-secondary);

  /* ---------- Component: Alert (§31) ---------- */
  --alert-radius: 8px;
  --alert-padding-block: var(--space-12);
  --alert-padding-inline: var(--space-16);
  --alert-icon-size: 18px;
  --alert-font-size: var(--font-size-small);

  /* =====================================================================
   * Component values added in Phase 2 (approved in the Phase 2 review).
   * Values reuse existing tokens wherever possible.
   * ===================================================================== */

  /* Motion */
  --motion-duration-fast: 150ms;
  --motion-easing: ease-out;

  /* Disabled state (all controls) */
  --opacity-disabled: .5;

  /* Icons */
  --icon-size-sm: var(--space-16);                        /* icons in small/medium buttons, inputs */
  --icon-size-md: var(--alert-icon-size);                 /* = 18px (§31 icon size), large buttons */
  --icon-size-lg: var(--space-40);                        /* Empty/Error state icon */

  /* Spinner (Button is-loading) */
  --spinner-size: var(--space-16);
  --spinner-border-width: 2px;
  --spinner-duration: .8s;

  /* Button */
  --button-gap: var(--space-8);                           /* icon ↔ label */
  --button-secondary-bg-hover: var(--color-background);
  --button-secondary-bg-active: var(--color-border);
  --button-ghost-text: var(--color-primary);
  --button-ghost-text-active: var(--color-primary-active);
  --button-danger-bg-active: var(--color-danger-text);

  /* Link-styled action (ManagementActions) */
  --link-action-font-size: var(--font-size-small);
  --link-action-font-weight: var(--font-weight-semibold);
  --link-action-color: var(--color-text-secondary);
  --link-action-color-hover: var(--color-primary);

  /* Input / Textarea / Select */
  --input-border-hover: var(--color-placeholder);
  --input-disabled-bg: var(--color-background);
  --input-disabled-text: var(--color-text-muted);
  --textarea-min-height: 96px;                            /* = 2 × --space-48 */
  --textarea-padding-block: var(--space-8);

  /* Checkbox / radio (native, accent-color) */
  --check-size: var(--space-16);
  --check-gap: var(--space-8);
  --check-accent: var(--color-primary);

  /* FormField / FormSection */
  --helper-margin-top: var(--space-4);
  --error-text-font-size: var(--font-size-caption);       /* same as helper text */
  --form-field-gap: var(--space-16);                      /* space between fields */
  --form-section-gap: var(--space-32);                    /* space between sections */
  --form-section-title-font-size: var(--font-size-h3);
  --form-section-title-font-weight: var(--font-weight-semibold);
  --form-section-column-gap: var(--space-24);             /* two-column modifier */

  /* SearchInput */
  --search-clear-size: var(--button-height-sm);           /* 32px clear button */
  --search-clear-space: var(--space-40);                  /* input end padding when clear button shown */
  --search-compact-button-size: var(--search-compact-height); /* square icon button, 40px */

  /* Card */
  --card-padding: var(--space-16);                        /* mobile */
  --card-padding-lg: var(--space-24);                     /* ≥640px */

  /* Badge neutral */
  --badge-neutral-bg: var(--color-border);
  --badge-neutral-text: var(--color-text-strong-secondary);

  /* Breadcrumbs */
  --breadcrumb-separator: "/";
  --breadcrumb-separator-color: var(--color-placeholder);
  --breadcrumb-gap: var(--space-8);

  /* Alert */
  --alert-gap: var(--space-12);                           /* icon ↔ text */
  --alert-title-font-weight: var(--font-weight-semibold);

  /* Tabs */
  --tabs-gap: var(--space-24);
  --tabs-border-color: var(--color-border);               /* tab list bottom line */

  /* Pagination */
  --pagination-gap: var(--space-12);
  --pagination-info-font-size: var(--font-size-small);    /* "صفحة N" */
  --pagination-info-color: var(--color-text-secondary);

  /* PageHeader */
  --page-header-padding-block: var(--space-32);
  --page-header-gap: var(--space-8);
  --page-header-description-color: var(--color-text-secondary);

  /* Empty / Error state */
  --state-padding-block: var(--space-32);                 /* PM decision (Phase 2): no card by default, centered */
  --state-gap: var(--space-12);
  --state-max-width: 480px;
  --state-icon-color: var(--color-text-muted);
  --state-error-icon-color: var(--color-danger);

  /* Modal */
  --modal-header-gap: var(--space-16);
  --modal-footer-gap: var(--space-8);
  --modal-viewport-margin: var(--space-16);               /* min space around the panel */
  --modal-title-font-size: var(--font-size-h3);
  --z-index-modal: 1050;                                  /* same layer as Bootstrap 4 modal */

  /* =====================================================================
   * Layout values added in Phase 3b (approved in the Phase 3b review).
   * ===================================================================== */
  --z-index-header: 1020;                                 /* sticky header; below modal (1050), same as Bootstrap 4 sticky-top */
  --header-search-max-width: 400px;                       /* compact search width in the desktop header (= modal S width) */
  --header-search-row-height: calc(var(--search-compact-height) + var(--space-8)); /* PROPOSED (Phase 5): mobile header search row = 40px field + 8px */
  --category-item-min-width: 180px;                       /* PROPOSED (Phase 5): CategoryItem tile min width in the desktop auto-fill grid */
  --home-hero-text-max-width: 60ch;                       /* PROPOSED (Phase 5): hero description measure; with text-wrap: balance */
  --home-hero-search-max-width: 720px;                    /* PROPOSED (Phase 5): primary search width in the Home hero */
  --home-featured-card-width: 300px;                      /* PROPOSED (Phase 5): "اتصل مباشرة" card width in the tablet scroller */
  --home-featured-card-width-mobile: 82%;                 /* PROPOSED (Phase 5): card width on phones so the next card peeks */
  --results-dropdown-width: 260px;                        /* PROPOSED (Results): city / area dropdown panel width */
  --results-action-min-width: 170px;                      /* PROPOSED (Results): call / details button column width from 640px */
  --header-nav-gap: var(--space-24);                      /* space between header links */
  --header-link-color: var(--color-text-secondary);
  --header-link-color-active: var(--color-primary);       /* aria-current / hover */
  --header-menu-item-height: var(--button-height-lg);     /* 48px rows in the mobile menu */
  --header-link-indicator-width: var(--tabs-indicator-width); /* 2px current-page bar (same as Tabs, §18) */
  --header-menu-item-indent: var(--space-12);             /* text inset from the start-side bar in the mobile menu */
  --footer-column-gap: var(--space-32);
  --footer-row-gap: var(--space-24);
  --footer-title-font-size: var(--font-size-small);
  --footer-title-font-weight: var(--font-weight-semibold);
  --footer-link-font-size: var(--font-size-small);
  --footer-link-color: var(--color-text-secondary);
  --footer-link-min-height: var(--button-height-sm);      /* 32px touch target per link */
  --footer-meta-font-size: var(--font-size-caption);      /* "مواقعنا" row + copyright */
  --footer-meta-color: var(--color-text-muted);

  /* =====================================================================
   * Visual upgrade — owner override (replaces the DS §2 "Avoid", §7 Shadows and §13 Card shadow rules;
   * DESIGN_SYSTEM_Directory.md unchanged). Colour direction: COLORFUL & VIVID — every category has its own hue.
   * ===================================================================== */

  /* Category hues (8). Pairs used for text all pass WCAG AA:
     on (#FFF) on base ≥ 4.7:1 · on on strong ≥ 9:1 · strong on tint ≥ 8.7:1 · base on white ≥ 4.7:1.
     vivid is decorative only (glows), never under text. Hue index = FNV-1a hash of the category name % 8 + 1. */
  --hue-blue-tint: #EFF6FF;    --hue-blue-base: #2563EB;    --hue-blue-strong: #1E3A8A;    --hue-blue-vivid: #0EA5E9;
  --hue-violet-tint: #F5F3FF;  --hue-violet-base: #7C3AED;  --hue-violet-strong: #4C1D95;  --hue-violet-vivid: #C026D3;
  --hue-rose-tint: #FFF1F2;    --hue-rose-base: #E11D48;    --hue-rose-strong: #881337;    --hue-rose-vivid: #F97316;
  --hue-orange-tint: #FFF7ED;  --hue-orange-base: #C2410C;  --hue-orange-strong: #7C2D12;  --hue-orange-vivid: #F59E0B;
  --hue-emerald-tint: #ECFDF5; --hue-emerald-base: #047857; --hue-emerald-strong: #064E3B; --hue-emerald-vivid: #10B981;
  --hue-teal-tint: #F0FDFA;    --hue-teal-base: #0F766E;    --hue-teal-strong: #134E4A;    --hue-teal-vivid: #06B6D4;
  --hue-amber-tint: #FFFBEB;   --hue-amber-base: #B45309;   --hue-amber-strong: #78350F;   --hue-amber-vivid: #F59E0B;
  --hue-indigo-tint: #EEF2FF;  --hue-indigo-base: #4F46E5;  --hue-indigo-strong: #312E81;  --hue-indigo-vivid: #8B5CF6;
  --hue-on: #FFFFFF;
  --hue-on-muted: #FFFFFF;                                /* band text stays pure white (≥ 4.7:1 on every base); hierarchy by size/weight */
  --hue-on-subtle: rgba(255, 255, 255, .16);              /* decorative fills/borders on the band */

  /* Surfaces */
  --color-surface-tint: #F4F6FA;                          /* tinted page background */
  --color-surface-raised: #FFFFFF;
  --gradient-primary: linear-gradient(180deg, #3B7BF0 0%, var(--color-primary) 55%, var(--color-primary-hover) 100%);
  --glass-bg: rgba(255, 255, 255, .82);
  --glass-blur: 14px;
  --glass-border: rgba(17, 24, 39, .08);

  /* Elevation scale */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, .06), 0 2px 6px rgba(17, 24, 39, .05);
  --shadow-md: 0 6px 16px -4px rgba(17, 24, 39, .12), 0 2px 6px -2px rgba(17, 24, 39, .08);
  --shadow-lg: 0 22px 44px -16px rgba(17, 24, 39, .28), 0 8px 18px -8px rgba(17, 24, 39, .12);

  /* Shape, type, motion */
  --radius-card-lg: 16px;
  --radius-sheet: 24px;
  --font-weight-name: var(--font-weight-bold);
  --motion-duration-base: 220ms;
  --motion-easing-emphasis: cubic-bezier(.2, .7, .2, 1);
  --motion-lift: -3px;

  /* Results page layout */
  --results-filterbar-height: 64px;                       /* PROPOSED: sticky filter bar height (details panel sticks below it) */
  --results-panel-width: 380px;                           /* PROPOSED: desktop details side panel width */
  --results-drawer-width: 400px;                          /* PROPOSED: "قائمتي" drawer width on desktop */
}