/* =============================================================================
   LAMHAH — DESIGN TOKENS  v2
   Single source of truth for the entire platform.

   Load order (every layout):
     1. design-tokens.css   ← this file
     2. style.css / admin/css/style.css
     3. page-specific CSS files

   DO NOT define :root variables anywhere else.
   DO NOT duplicate this block in style.css or any other file.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {

    /* =========================================================================
       🎨  PALETTE — raw scale (use semantic tokens in components, not these)
       ========================================================================= */

    /* Neutrals */
    --gray-50:  #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;
    --gray-950: #020617;

    /* Brand — deep navy charcoal */
    --brand-50:  #eef1f6;
    --brand-100: #dfe5ee;
    --brand-200: #c4cedd;
    --brand-300: #9eacc5;
    --brand-400: #6f7f9a;
    --brand-500: #111826;   /* ← base brand */
    --brand-600: #0f1622;
    --brand-700: #0c121c;
    --brand-800: #090d15;
    --brand-900: #06080f;
    --brand-950: #03050a;

    /* Accent — cool muted lift */
    --accent-400: #7b8fb3;
    --accent-500: #5f769c;
    --accent-600: #4b5f82;

    /* Status */
    --green-400: #6ee7b7;
    --green-500: #2fbf86;
    --green-600: #23936a;

    --yellow-400: #f5d27a;
    --yellow-500: #cfa247;
    --yellow-600: #a77d2e;

    --red-400:  #f19a9a;
    --red-500:  #d35f5f;
    --red-600:  #b34545;

    --blue-400: #8ab4e6;
    --blue-500: #4f7fbf;
    --blue-600: #3e66a0;

    /* Pure */
    --color-white: #ffffff;
    --color-black: #000000;


    /* =========================================================================
       🎯  SEMANTIC — backgrounds
       ========================================================================= */

    --bg-primary:   #0b0f18;
    --bg-secondary: #111826;
    --bg-surface:   #151c2a;
    --bg-elevated:  #1b2435;
    --bg-overlay:   rgba(5, 8, 14, 0.75);
    --bg-navbar:    rgba(17, 24, 38, 0.85);
    --bg-sidebar:   #0d121d;


    /* =========================================================================
       🔤  SEMANTIC — text
       ========================================================================= */

    --text-primary:   #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted:     #94a3b8;
    --text-inverse:   #0f172a;
    --text-disabled:  #64748b;


    /* =========================================================================
       🔲  SEMANTIC — borders
       ========================================================================= */

    --border-default: #243043;
    --border-subtle:  #1a2333;
    --border-focus:   rgba(111, 127, 154, 0.35);
    --border-accent:  rgba(111, 127, 154, 0.25);


    /* =========================================================================
       ⚡  SEMANTIC — interactions / accent
       ========================================================================= */

    --accent-primary:        var(--brand-500);
    --accent-hover:          var(--brand-400);
    --accent-active:         var(--brand-600);
    --accent-muted:          rgba(17, 24, 38, 0.35);
    --accent-secondary:      var(--accent-500);
    --accent-secondary-muted: rgba(95, 118, 156, 0.12);


    /* =========================================================================
       🌈  SEMANTIC — gradients
       ========================================================================= */

    --gradient-brand:   linear-gradient(90deg, #faeaf9, #ffffff, #f1ffff);
    --gradient-surface: linear-gradient(180deg, rgba(111,127,154,0.05) 0%, rgba(255,255,255,0) 100%);


    /* =========================================================================
       🚦  SEMANTIC — status
       ========================================================================= */

    --success:        var(--green-500);
    --success-bg:     rgba(47, 191, 134, 0.10);
    --success-border: rgba(47, 191, 134, 0.20);

    --warning:        var(--yellow-500);
    --warning-bg:     rgba(207, 162, 71, 0.10);
    --warning-border: rgba(207, 162, 71, 0.20);

    --danger:         var(--red-500);
    --danger-bg:      rgba(211, 95, 95, 0.10);
    --danger-border:  rgba(211, 95, 95, 0.20);

    --info:           var(--blue-500);
    --info-bg:        rgba(79, 127, 191, 0.10);
    --info-border:    rgba(79, 127, 191, 0.20);


    /* =========================================================================
       📐  SPACING — 8-point grid (--space-N = N×4px)
       ========================================================================= */

    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;


    /* =========================================================================
       🔤  TYPOGRAPHY
       ========================================================================= */

    --font-family-base:    "Rubik", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-display: "Clash Display", sans-serif;

    --text-xs:   12px;
    --text-sm:   14px;
    --text-base: 16px;
    --text-md:   18px;
    --text-lg:   20px;
    --text-xl:   24px;
    --text-2xl:  30px;
    --text-3xl:  36px;
    --text-4xl:  48px;

    --font-light:     300;
    --font-regular:   400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --font-extrabold: 800;

    --line-height-tight:   1.2;
    --line-height-snug:    1.375;
    --line-height-normal:  1.5;
    --line-height-relaxed: 1.75;


    /* =========================================================================
       🔲  BORDER RADIUS
       ========================================================================= */

    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-full: 9999px;


    /* =========================================================================
       🌫  SHADOWS
       ========================================================================= */

    --shadow-xs: 0 1px 2px  rgba(0,0,0,0.20);
    --shadow-sm: 0 1px 3px  rgba(0,0,0,0.30);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
    --shadow-lg: 0 10px 30px rgba(0,0,0,0.40);
    --shadow-xl: 0 20px 50px rgba(0,0,0,0.50);

    --shadow-accent: 0 8px 24px rgba(99,102,241,0.35);
    --shadow-danger: 0 8px 24px rgba(239,68,68,0.30);


    /* =========================================================================
       ⏱  TRANSITIONS
       ========================================================================= */

    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   400ms;

    --transition-fast:   all var(--duration-fast)   var(--ease-default);
    --transition-normal: all var(--duration-normal) var(--ease-default);
    --transition-slow:   all var(--duration-slow)   var(--ease-default);


    /* =========================================================================
       📐  LAYOUT
       ========================================================================= */

    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1280px;
    --container-2xl: 1536px;

    --sidebar-width:            280px;
    --sidebar-width-collapsed:  80px;
    --sidebar-width-mobile:     320px;
    --navbar-height:            70px;
    --navbar-height-mobile:     60px;
    --settings-sidebar-width:   280px;

    /* Z-index scale */
    --z-base:     0;
    --z-raised:   10;
    --z-dropdown: 1000;
    --z-sticky:   1010;
    --z-overlay:  1050;
    --z-modal:    1100;
    --z-toast:    1200;
    --z-tooltip:  1300;


    /* =========================================================================
       🖊  FORM TOKENS
       ========================================================================= */

    --input-height:        44px;
    --input-height-sm:     36px;
    --input-height-lg:     52px;
    --input-padding-x:     16px;
    --input-padding-y:     10px;
    --input-border-radius: var(--radius-sm);
    --input-border:        1px solid var(--border-default);
    --input-bg:            var(--bg-secondary);
    --input-focus-shadow:  0 0 0 3px var(--accent-muted);


    /* =========================================================================
       🔗  LEGACY ALIASES
       Maps old variable names used in component files to semantic tokens above.
       Keep these here — do NOT re-declare them in any component file.
       ========================================================================= */

    /* General admin/component aliases */
    --primary-bg:    var(--bg-primary);
    --secondary-bg:  var(--bg-secondary);
    --card-bg:       var(--bg-surface);
    --sidebar-bg:    var(--bg-sidebar);
    --navbar-bg:     var(--bg-navbar);

    --accent-color:  var(--accent-primary);
    --border-color:  var(--border-default);

    --success-color: var(--success);
    --error-color:   var(--danger);
    --warning-color: var(--warning);
    --info-color:    var(--info);

    --transition:         var(--transition-normal);
    --gradient-primary:   var(--gradient-brand);
    --mobile-sidebar-width: var(--sidebar-width-mobile);

    /* Dashboard aliases */
    --bg-dark:      var(--bg-primary);
    --bg-light:     var(--bg-surface);
    --primary:      var(--accent-primary);
    --primary-dark: var(--accent-hover);

    /* Auth aliases */
    --color-bg:           var(--bg-primary);
    --color-surface:      var(--bg-surface);
    --color-surface-alt:  var(--bg-elevated);
    --color-border:       var(--border-default);
    --color-border-focus: var(--border-focus);
    --color-text-primary:   var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-muted:     var(--text-muted);
    --color-accent:       var(--accent-primary);
    --color-accent-hover: var(--accent-hover);
    --color-error:        var(--danger);
    --color-error-bg:     var(--danger-bg);
    --color-error-border: var(--danger-border);
    --color-success:        var(--success);
    --color-success-bg:     var(--success-bg);
    --color-success-border: var(--success-border);
    --color-warning:        var(--warning);
    --color-warning-bg:     var(--warning-bg);
    --color-warning-border: var(--warning-border);
    --font-sans: var(--font-family-base);
}