/*
================================================================================
  KHOBRAA AL-DHIL (خبراء الظل للمقاولات العامة) - DESIGN SYSTEM & TOKENS
================================================================================
*/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root {
    /* Primary Brand Colors (Dark Luxury Architecture) */
    --background: #161A1D;
    --background-deep: #0C0E11;
    --surface: #1E2124;
    --surface-light: #262B30;
    --surface-glass: rgba(22, 26, 29, 0.75);
    --surface-card: rgba(30, 33, 36, 0.85);

    /* Borders */
    --border: #2F3233;
    --border-light: rgba(237, 233, 225, 0.08);
    --border-accent: rgba(162, 122, 92, 0.4);

    /* Bronze Accents */
    --accent: #A27A5C;
    --accent-light: #B3937A;
    --accent-hover: #C5A48B;
    --accent-glow: rgba(162, 122, 92, 0.18);
    --accent-subtle: rgba(162, 122, 92, 0.08);

    /* Typography Colors */
    --text-primary: #EDE9E1;
    --text-secondary: #A6A5A2;
    --text-muted: #737577;
    --text-inverse: #0C0E11;

    /* Typography Hierarchy */
    --font-primary: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    
    /* Layout & Spacing */
    --container-width: 1340px;
    --container-narrow: 1080px;
    --container-wide: 1520px;
    --gutter: 24px;
    --header-height: 80px;
    --topbar-height: 40px;

    /* Border Radius (Subtle & Architectural - not overly rounded) */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-pill: 9999px;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-luxury: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

    /* Shadows & Elevation */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 8px 30px rgba(162, 122, 92, 0.2);
}