/* =======================================================================
   NutriPetPlan Design Tokens
   Single source of truth for all visual decisions
   Aligned with nutripetplan-wms design system
   ======================================================================= */

:root {
  /* --- Brand Colors (Navy Blue #001B70) --- */
  --brand:           #001B70;  /* Primary brand navy blue */
  --brand-hover:     #002494;  /* Hover state */
  --brand-active:    #00134F;  /* Active/pressed state */
  --brand-subtle:    #EEF1FB;  /* Light background */
  --brand-muted:     #C7CFEE;  /* Muted accent */

  /* Brand RGB (for rgba usage) */
  --brand-rgb:       0, 27, 112;

  /* --- Neutral Scale (Cool-tinted grays aligned with brand hue) --- */
  --gray-50:         #F7F8FC;
  --gray-100:        #EDEFF7;
  --gray-200:        #D8DCF0;
  --gray-300:        #B8BFE0;
  --gray-400:        #8A94C4;
  --gray-500:        #5E6A9E;
  --gray-600:        #3D4878;
  --gray-700:        #2A3260;
  --gray-800:        #1A2050;
  --gray-900:        #0D1236;
  --gray-950:        #060912;

  /* --- Semantic Colors --- */
  /* Success (Green) */
  --success-light:   #E7F7F0;
  --success:         #0E7A4E;
  --success-dark:    #0A5D3A;
  --success-bg:      #E7F7F0;

  /* Warning (Amber) */
  --warning-light:   #FEF3C7;
  --warning:         #B45309;
  --warning-dark:    #92400E;
  --warning-bg:      #FEF3C7;

  /* Error/Danger (Red) */
  --error-light:     #FEE2E2;
  --error:           #B91C1C;
  --error-dark:      #991B1B;
  --error-bg:        #FEE2E2;

  /* Info (Sky Blue) */
  --info-light:      #E0F2FE;
  --info:            #0369A1;
  --info-dark:       #075985;
  --info-bg:         #E0F2FE;

  /* --- Surface Colors (Backgrounds) --- */
  --surface:         #FFFFFF;       /* Card/panel background */
  --surface-page:    #F4F6FC;       /* Page background */
  --surface-card:    #FFFFFF;       /* Card background */
  --surface-overlay: #FFFFFF;       /* Modals, dropdowns */
  --surface-sidebar: var(--brand);  /* Sidebar background (navy) */
  --surface-hover:   var(--gray-50); /* Hover state background */
  --surface-selected: var(--brand-subtle); /* Selected row/item */

  /* --- Border Colors --- */
  --border-subtle:   var(--gray-100);  /* Lightest borders */
  --border-default:  var(--gray-200);  /* Standard borders */
  --border-strong:   var(--gray-300);  /* Emphasized borders */
  --border-focus:    var(--brand);     /* Focus ring color */

  /* --- Text Colors --- */
  --text-primary:    var(--gray-900);  /* Main content text */
  --text-secondary:  var(--gray-600);  /* Supporting text */
  --text-muted:      var(--gray-400);  /* Placeholders, disabled */
  --text-inverse:    #FFFFFF;          /* White text on dark backgrounds */
  --text-brand:      var(--brand);     /* Brand-colored text */
  --text-link:       var(--brand);     /* Link color */

  /* --- Sidebar-specific Colors --- */
  --sidebar-bg:          var(--brand);
  --sidebar-text:        rgba(255, 255, 255, 0.65);
  --sidebar-text-hover:  rgba(255, 255, 255, 0.90);
  --sidebar-text-active: #FFFFFF;
  --sidebar-item-hover:  rgba(255, 255, 255, 0.07);
  --sidebar-item-active: rgba(255, 255, 255, 0.14);
  --sidebar-border:      rgba(255, 255, 255, 0.10);

  /* --- Typography --- */
  /* Font Family - Inter for UI text with system fallback */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;

  /* Font Size Scale (pixel-based for precision, aligned with WMS) */
  --text-xs:   11px;    /* Leading: 16px */
  --text-sm:   13px;    /* Leading: 20px */
  --text-base: 14px;    /* Leading: 22px */
  --text-md:   15px;    /* Leading: 24px */
  --text-lg:   17px;    /* Leading: 26px */
  --text-xl:   20px;    /* Leading: 28px */
  --text-2xl:  24px;    /* Leading: 32px */
  --text-3xl:  30px;    /* Leading: 36px */

  /* Line Heights */
  --leading-xs:     16px;
  --leading-sm:     20px;
  --leading-base:   22px;
  --leading-md:     24px;
  --leading-lg:     26px;
  --leading-xl:     28px;
  --leading-2xl:    32px;
  --leading-3xl:    36px;

  /* Font Weight */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Letter Spacing */
  --tracking-tight:   -0.025em;
  --tracking-normal:   0;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-caps:     0.08em;

  /* --- Spacing Scale (4px base unit, aligned with WMS) --- */
  --sp-0:    0;
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-7:    32px;
  --sp-8:    48px;
  --sp-9:    64px;
  --sp-10:   80px;

  /* Additional spacing aliases for common patterns */
  --space-0:    var(--sp-0);
  --space-1:    var(--sp-1);
  --space-2:    var(--sp-2);
  --space-3:    var(--sp-3);
  --space-4:    var(--sp-4);
  --space-5:    var(--sp-5);
  --space-6:    var(--sp-6);
  --space-8:    var(--sp-7);
  --space-12:   var(--sp-8);
  --space-16:   var(--sp-9);
  --space-20:   var(--sp-10);

  /* --- Border Radius --- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* Radius aliases */
  --radius-sm:   var(--r-sm);
  --radius-md:   var(--r-md);
  --radius-lg:   var(--r-lg);
  --radius-xl:   var(--r-xl);
  --radius-2xl:  var(--r-2xl);
  --radius-full: var(--r-full);

  /* --- Shadows (aligned with WMS elevation system) --- */
  --shadow-xs:  0 1px 2px rgba(13, 18, 54, 0.05);
  --shadow-sm:  0 1px 4px rgba(13, 18, 54, 0.08), 0 0 0 1px rgba(13, 18, 54, 0.04);
  --shadow-md:  0 4px 12px rgba(13, 18, 54, 0.10), 0 0 0 1px rgba(13, 18, 54, 0.04);
  --shadow-lg:  0 8px 24px rgba(13, 18, 54, 0.14);
  --shadow-xl:  0 20px 25px -5px rgba(13, 18, 54, 0.14), 0 8px 10px -6px rgba(13, 18, 54, 0.08);
  --shadow-focus: 0 0 0 3px rgba(var(--brand-rgb), 0.20);

  /* Button-specific shadows */
  --shadow-button-hover: 0 2px 8px rgba(var(--brand-rgb), 0.30);

  /* --- Z-Index Scale --- */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* --- Transitions (aligned with WMS) --- */
  --t-fast:   100ms ease;
  --t-base:   160ms ease;
  --t-slow:   240ms ease;

  /* Duration values */
  --duration-fast:   100ms;
  --duration-normal: 160ms;
  --duration-slow:   240ms;

  /* Easing functions */
  --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-in-out:  cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Layout Constants --- */
  --sidebar-width:           240px;
  --sidebar-collapsed-width: 64px;
  --header-height:           56px;
  --content-max-width:       1400px;
  --page-padding:            var(--sp-6);

  /* --- Component-specific Tokens --- */
  /* Buttons */
  --btn-height-sm:  30px;
  --btn-height-md:  36px;
  --btn-height-lg:  44px;
  --btn-padding-x:  16px;
  --btn-radius:     var(--r-md);

  /* Forms */
  --input-height:   36px;
  --input-bg:       var(--gray-100);
  --input-border:   var(--border-default);
  --input-radius:   6px;
  --input-padding-x: 12px;

  /* Cards */
  --card-padding:   var(--sp-6);
  --card-radius:    var(--r-lg);
  --card-shadow:    var(--shadow-sm);

  /* Status Badge */
  --badge-radius:   20px;
  --badge-padding-x: 12px;
  --badge-padding-y: 4px;
  --badge-dot-size: 6px;

  /* Modal */
  --modal-backdrop: rgba(13, 18, 54, 0.40);
  --modal-width-sm: 400px;
  --modal-width-md: 600px;
  --modal-width-lg: 800px;

  /* Toast */
  --toast-width:  360px;
  --toast-offset: 20px;
}

/* =======================================================================
   Dark Mode Tokens
   Activated when [data-theme="dark"] is set on the body element
   ======================================================================= */

[data-theme="dark"] {
  /* --- Brand Colors (Slightly lighter for dark mode) --- */
  --brand:           #3366CC;  /* Lighter blue for better contrast on dark */
  --brand-hover:     #4D7FE0;
  --brand-active:    #2952A3;
  --brand-subtle:    #1A2850;  /* Dark background instead of light */
  --brand-muted:     #384B7A;

  /* --- Neutral Scale (Inverted for dark mode) --- */
  --gray-50:         #E5E7EB;  /* Light text on dark */
  --gray-100:        #D1D5DB;
  --gray-200:        #9CA3AF;
  --gray-300:        #6B7280;
  --gray-400:        #4B5563;
  --gray-500:        #374151;
  --gray-600:        #9CA3AF;  /* For secondary text */
  --gray-700:        #D1D5DB;
  --gray-800:        #E5E7EB;
  --gray-900:        #F3F4F6;  /* Primary text color */
  --gray-950:        #FFFFFF;

  /* --- Surface Colors (Dark backgrounds) --- */
  --surface:         #1A1F3A;       /* Card/panel background */
  --surface-page:    #0D1236;       /* Page background - darkest */
  --surface-card:    #1A1F3A;       /* Card background */
  --surface-overlay: #1F2542;       /* Modals, dropdowns */
  --surface-sidebar: #001B70;       /* Keep sidebar dark navy */
  --surface-hover:   #252B4F;       /* Hover state background */
  --surface-selected: #2A3260;      /* Selected row/item */

  /* --- Border Colors (Lighter for visibility) --- */
  --border-subtle:   #2A3260;       /* Subtle borders */
  --border-default:  #384B7A;       /* Standard borders */
  --border-strong:   #4B5E93;       /* Emphasized borders */
  --border-focus:    var(--brand);  /* Focus ring color */

  /* --- Text Colors (Light on dark) --- */
  --text-primary:    #F3F4F6;       /* Main content text */
  --text-secondary:  #9CA3AF;       /* Supporting text */
  --text-muted:      #6B7280;       /* Placeholders, disabled */
  --text-inverse:    #0D1236;       /* Dark text on light backgrounds */
  --text-brand:      #5B8FFF;       /* Lighter brand color for text */
  --text-link:       #5B8FFF;       /* Link color */

  /* --- Sidebar-specific Colors (Keep dark, adjust slightly) --- */
  --sidebar-bg:          #001548;   /* Slightly lighter navy */
  --sidebar-text:        rgba(255, 255, 255, 0.70);
  --sidebar-text-hover:  rgba(255, 255, 255, 0.95);
  --sidebar-text-active: #FFFFFF;
  --sidebar-item-hover:  rgba(255, 255, 255, 0.10);
  --sidebar-item-active: rgba(255, 255, 255, 0.18);
  --sidebar-border:      rgba(255, 255, 255, 0.12);

  /* --- Semantic Colors (Adjusted for dark mode) --- */
  /* Success (Green) */
  --success-light:   #064E3B;       /* Dark green background */
  --success:         #34D399;       /* Brighter green */
  --success-dark:    #6EE7B7;
  --success-bg:      #064E3B;

  /* Warning (Amber) */
  --warning-light:   #78350F;       /* Dark amber background */
  --warning:         #FBBF24;       /* Brighter yellow */
  --warning-dark:    #FCD34D;
  --warning-bg:      #78350F;

  /* Error/Danger (Red) */
  --error-light:     #7F1D1D;       /* Dark red background */
  --error:           #F87171;       /* Brighter red */
  --error-dark:      #FCA5A5;
  --error-bg:        #7F1D1D;

  /* Info (Sky Blue) */
  --info-light:      #0C4A6E;       /* Dark blue background */
  --info:            #38BDF8;       /* Brighter blue */
  --info-dark:       #7DD3FC;
  --info-bg:         #0C4A6E;

  /* --- Shadows (Adjusted for dark backgrounds) --- */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.70);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.70), 0 8px 10px -6px rgba(0, 0, 0, 0.50);
  --shadow-focus: 0 0 0 3px rgba(91, 143, 255, 0.40);  /* Lighter brand focus ring */

  /* Button-specific shadows */
  --shadow-button-hover: 0 2px 8px rgba(91, 143, 255, 0.50);

  /* --- Component-specific Tokens --- */
  /* Forms */
  --input-bg:       #252B4F;        /* Darker input background */
  --input-border:   var(--border-default);

  /* Modal */
  --modal-backdrop: rgba(0, 0, 0, 0.70);  /* Darker backdrop */
}