/**
 * MAKTOUB Design System - CSS Variables (Design Tokens)
 * Version: 1.0.0
 * Author: WEBDEV
 * Reference: /docs/design/DESIGN_CHANGE_REQUIREMENTS.md
 *
 * This file contains all design tokens for the Maktoub web application.
 * All values are derived from the approved Figma design system.
 */

:root {
  /* ========================================
   * BRAND COLORS
   * Monochromatic maroon palette (Gold removed)
   * ======================================== */
  --brand: #6C0F0F;
  --brand-hover: #4D0A0A;
  --brand-pressed: #3D0808;
  --brand-light: rgba(108, 15, 15, 0.08);
  --brand-lighter: rgba(108, 15, 15, 0.04);

  /* ========================================
   * BACKGROUND COLORS
   * ======================================== */
  --bg: #EDE2DD;
  --bg-gradient-end: #DAC3BE;
  --bg-gradient: linear-gradient(180deg, var(--bg) 0%, var(--bg-gradient-end) 100%);

  /* ========================================
   * TEXT COLORS
   * ======================================== */
  --text: #231F20;
  --text-light: #5C5758;
  --text-muted: rgba(35, 31, 32, 0.6);
  --white: #FFFFFF;

  /* ========================================
   * FORM COLORS
   * ======================================== */
  --input-fill: #F7F2EF;
  --border: rgba(0, 0, 0, 0.08);
  --border-focus: var(--brand);
  --placeholder: rgba(35, 31, 32, 0.4);

  /* ========================================
   * STATUS COLORS
   * ======================================== */
  --success: #2E8C4D;
  --success-bg: #E8F5EC;
  --success-border: rgba(46, 140, 77, 0.2);

  --error: #C71F1F;
  --error-bg: #FDECEC;
  --error-border: rgba(199, 31, 31, 0.2);

  --warning: #E09800;
  --warning-bg: #FFF8E6;
  --warning-border: rgba(224, 152, 0, 0.2);

  --info: #0066CC;
  --info-bg: #E6F2FF;
  --info-border: rgba(0, 102, 204, 0.2);

  /* ========================================
   * TYPOGRAPHY
   * Font: Tajawal (Arabic-optimized)
   * ======================================== */
  --font-family: 'Tajawal', sans-serif;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Font Sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 48px;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.75;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;

  /* ========================================
   * SPACING SCALE
   * Based on 4px base unit
   * ======================================== */
  --space-0: 0;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 80px;
  --space-6xl: 96px;

  /* ========================================
   * BORDER RADIUS
   * ======================================== */
  --radius-none: 0;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ========================================
   * SHADOWS
   * Brand-tinted shadows for depth
   * ======================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-input: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 16px 40px rgba(108, 15, 15, 0.08);
  --shadow-card-hover: 0 20px 48px rgba(108, 15, 15, 0.12);
  --shadow-button: 0 10px 24px rgba(108, 15, 15, 0.25);
  --shadow-button-hover: 0 12px 28px rgba(108, 15, 15, 0.3);
  --shadow-focus: 0 0 0 3px rgba(108, 15, 15, 0.16);
  --shadow-modal: 0 24px 64px rgba(108, 15, 15, 0.16);
  --shadow-dropdown: 0 8px 24px rgba(108, 15, 15, 0.12);

  /* ========================================
   * TRANSITIONS
   * Smooth, consistent animations
   * ======================================== */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-colors: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
  --transition-transform: transform 250ms ease;
  --transition-opacity: opacity 250ms ease;
  --transition-shadow: box-shadow 250ms ease;

  /* ========================================
   * Z-INDEX SCALE
   * Layering hierarchy
   * ======================================== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* ========================================
   * LAYOUT
   * Page structure dimensions
   * ======================================== */
  --max-width: 1200px;
  --max-width-wide: 1440px;
  --max-width-narrow: 960px;
  --sidebar-width: 280px;
  --header-height: 72px;
  --header-height-mobile: 64px;
  --footer-height: auto;
  --mobile-nav-height: 72px;

  /* Container padding */
  --container-padding: var(--space-md);
  --container-padding-md: var(--space-lg);
  --container-padding-lg: var(--space-2xl);

  /* ========================================
   * BREAKPOINTS (Reference Only)
   * Use in media queries: @media (min-width: 768px)
   *
   * Mobile:  0 - 767px   (base styles)
   * Tablet:  768 - 1023px
   * Desktop: 1024 - 1439px
   * Wide:    1440px+
   * ======================================== */

  /* ========================================
   * COMPONENT-SPECIFIC TOKENS
   * ======================================== */

  /* Buttons */
  --btn-padding-y: 14px;
  --btn-padding-x: 28px;
  --btn-padding-y-sm: 10px;
  --btn-padding-x-sm: 20px;
  --btn-padding-y-lg: 18px;
  --btn-padding-x-lg: 36px;
  --btn-font-size: var(--text-base);
  --btn-font-weight: var(--font-bold);
  --btn-border-radius: var(--radius-md);

  /* Inputs */
  --input-padding-y: 16px;
  --input-padding-x: 20px;
  --input-font-size: 15px;
  --input-border-radius: var(--radius-md);
  --input-border-width: 1px;

  /* Cards */
  --card-padding: var(--space-xl);
  --card-padding-sm: var(--space-lg);
  --card-padding-lg: var(--space-2xl);
  --card-border-radius: var(--radius-xl);

  /* Modals */
  --modal-padding: var(--space-xl);
  --modal-border-radius: var(--radius-xl);
  --modal-max-width: 480px;

  /* Navigation */
  --nav-item-padding-y: 12px;
  --nav-item-padding-x: 16px;
  --nav-item-border-radius: var(--radius-sm);
}

/* ========================================
 * DARK MODE (Future Implementation)
 * ======================================== */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1617;
    --bg-gradient-end: #2D2627;
    --text: #F5F0ED;
    --text-light: #B0ABAC;
    --input-fill: #2D2627;
    --border: rgba(255, 255, 255, 0.08);
    --white: #1A1617;
  }
}
*/