/**
 * Arbo Project CSS Variables
 * Updated to match the modern Arbo company site (www.goarbo.com)
 * Centralized design tokens and variables for consistent styling
 */

:root {
  /* =============================================================================
     PRIMARY BRAND COLORS (Updated to match goarbo.com)
     ============================================================================= */
  
  /* Core brand colors from Arbo website */
  --arbo-primary: #3B82F6;           /* Primary brand color (alias for secondary blue) */
  --arbo-primary-blue: #1E3A8A;      /* Dark blue - primary brand color */
  --arbo-primary-dark: #1E3A8A;      /* Primary dark (alias for primary blue) */
  --arbo-secondary-blue: #3B82F6;    /* Blue - secondary brand color */
  --arbo-light-blue: #60A5FA;        /* Light blue - tertiary brand color */
  --arbo-electric-peach: #FF6B35;    /* Electric peach/orange - accent color */
  
  /* Additional brand colors from goarbo.com */
  --arbo-navy: #0F172A;              /* Deep navy from header */
  --arbo-slate: #334155;             /* Slate gray from text */
  --arbo-stone: #78716C;             /* Stone gray from secondary text */
  --arbo-orange: #EA580C;            /* Orange from CTAs */
  --arbo-orange-light: #F97316;      /* Light orange for hover states */
  
  /* =============================================================================
     NEUTRAL COLORS (Updated to match goarbo.com)
     ============================================================================= */
  
  /* Grays and neutrals */
  --arbo-white: #FFFFFF;
  --arbo-black: #000000;
  --arbo-black-400: #0D1728;         /* Dark charcoal */
  --arbo-charcoal: #334155;          /* Updated to match goarbo.com */
  --arbo-mid-gray: #64748B;          /* Updated to match goarbo.com */
  --arbo-slate-gray: #94A3B8;        /* Updated to match goarbo.com */
  --arbo-pale-gray: #F1F5F9;         /* Updated to match goarbo.com */
  --arbo-grey-400: #F8FAFC;          /* Updated to match goarbo.com */
  
  /* =============================================================================
     BACKGROUND COLORS (Updated to match goarbo.com)
     ============================================================================= */
  
  /* Dark theme backgrounds */
  --arbo-dark-background: #0F172A;   /* Updated to match goarbo.com header */
  --arbo-dark-paper: #1E293B;        /* Dark paper background */
  --arbo-navy-400: #1E293B;          /* Navy background */
  --arbo-black-400: #0D1728;         /* Dark black background */
  
  /* Light theme backgrounds */
  --arbo-light-background: #FFFFFF;
  --arbo-background-subtle: #F8FAFC; /* Subtle background color */
  --arbo-light-peach: #FFF7ED;       /* Updated light peach background */
  --arbo-light-blue-bg: #EFF6FF;     /* Updated light blue background */
  --arbo-washed-blue: #F1F5F9;       /* Updated washed blue background */
  --arbo-beige-400: #FEF3C7;         /* Updated beige background */
  
  /* =============================================================================
     TEXT COLORS (Updated to match goarbo.com)
     ============================================================================= */
  
  /* Text colors for dark backgrounds */
  --arbo-text-white: #FFFFFF;        /* White text for dark backgrounds */
  --arbo-text-light: #F1F5F9;        /* Light text for dark backgrounds */
  
  /* Text colors for light backgrounds */
  --arbo-text-dark: #0F172A;         /* Updated dark text */
  --arbo-text-charcoal: #334155;     /* Updated charcoal text */
  --arbo-text-strong: #EA580C;       /* Updated strong orange text */
  --arbo-text-muted: #64748B;        /* Muted text color */
  
  /* =============================================================================
     BORDER COLORS (Updated to match goarbo.com)
     ============================================================================= */
  
  --arbo-border-light: #FFFFFF;
  --arbo-border-subtle: #E2E8F0;     /* Updated subtle border */
  --arbo-border-dark: #CBD5E1;       /* Updated dark border */
  --arbo-border-strong: #EA580C;     /* Updated strong border */
  --arbo-border-beige: #FEF3C7;      /* Updated beige border */
  
  /* =============================================================================
     HOVER AND INTERACTION COLORS (Updated to match goarbo.com)
     ============================================================================= */
  
  --arbo-hover-orange: #F97316;      /* Updated hover orange */
  --arbo-hover-blue: #2563EB;        /* Updated hover blue */
  --arbo-focus-ring: rgba(59, 130, 246, 0.5); /* Focus ring color */
  
  /* =============================================================================
     THEME-SPECIFIC COLORS (Updated to match goarbo.com)
     ============================================================================= */
  
  /* Pipeline theme colors */
  --pipeline-primary: var(--arbo-secondary-blue);
  --pipeline-secondary: var(--arbo-light-blue);
  --pipeline-accent: var(--arbo-primary-blue);
  --pipeline-hover: var(--arbo-hover-blue);
  --pipeline-light: rgba(59, 130, 246, 0.1);
  
  /* LNG theme colors */
  --lng-primary: var(--arbo-electric-peach);
  --lng-secondary: #FF8A65;
  --lng-accent: #E65739;
  --lng-hover: var(--arbo-hover-orange);
  --lng-light: rgba(255, 107, 53, 0.1);
  
  /* =============================================================================
     SPACING AND LAYOUT (Updated to match goarbo.com)
     ============================================================================= */
  
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 4rem;      /* 64px */
  --spacing-4xl: 5rem;      /* 80px */
  
  /* =============================================================================
     BORDER RADIUS (Updated to match goarbo.com)
     ============================================================================= */
  
  --border-radius-sm: 6px;   /* Updated to match goarbo.com */
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 24px; /* For large cards */
  
  /* =============================================================================
     SHADOWS (Updated to match goarbo.com)
     ============================================================================= */
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* =============================================================================
     TYPOGRAPHY (Updated to match goarbo.com)
     ============================================================================= */
  
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px - Base font size */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */
  --font-size-5xl: 2.5rem;  /* 40px */
  --font-size-6xl: 3rem;  /* 48px */
  
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* =============================================================================
     TRANSITIONS (Updated to match goarbo.com)
     ============================================================================= */
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* =============================================================================
     BREAKPOINTS (Updated to match goarbo.com)
     ============================================================================= */
  
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* =============================================================================
     LAYOUT (Updated to match goarbo.com)
     ============================================================================= */
  
  --container-max-width: 1280px;
  --header-height: 80px;
  --sidebar-width: 280px;
  --border-width: 1px;
  --border-width-thick: 2px;
  
  /* =============================================================================
     Z-INDEX (Updated to match goarbo.com)
     ============================================================================= */
  
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* =============================================================================
   DARK THEME OVERRIDES (Updated to match goarbo.com)
   ============================================================================= */

[data-theme="dark"] {
  --arbo-light-background: var(--arbo-dark-background);
  --arbo-text-dark: var(--arbo-text-light);
  --arbo-border-subtle: var(--arbo-slate-gray);
  --arbo-grey-400: var(--arbo-black-400);
  --arbo-text-muted: var(--arbo-slate-gray);
}

/* =============================================================================
   UTILITY CLASSES (Updated to match goarbo.com)
   ============================================================================= */

/* Color utilities */
.text-primary { color: var(--arbo-secondary-blue) !important; }
.text-secondary { color: var(--arbo-charcoal) !important; }
.text-accent { color: var(--arbo-electric-peach) !important; }
.text-light { color: var(--arbo-text-light) !important; }
.text-dark { color: var(--arbo-text-dark) !important; }
.text-muted { color: var(--arbo-text-muted) !important; }

.bg-primary { background-color: var(--arbo-secondary-blue) !important; }
.bg-secondary { background-color: var(--arbo-light-blue) !important; }
.bg-accent { background-color: var(--arbo-electric-peach) !important; }
.bg-light { background-color: var(--arbo-grey-400) !important; }
.bg-dark { background-color: var(--arbo-dark-background) !important; }
.bg-navy { background-color: var(--arbo-navy) !important; }

.border-primary { border-color: var(--arbo-secondary-blue) !important; }
.border-secondary { border-color: var(--arbo-light-blue) !important; }
.border-accent { border-color: var(--arbo-electric-peach) !important; }
.border-light { border-color: var(--arbo-border-subtle) !important; }

/* Spacing utilities */
.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }
.p-2xl { padding: var(--spacing-2xl) !important; }

.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }
.m-2xl { margin: var(--spacing-2xl) !important; }

/* Border radius utilities */
.rounded-sm { border-radius: var(--border-radius-sm) !important; }
.rounded-md { border-radius: var(--border-radius-md) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-xl { border-radius: var(--border-radius-xl) !important; }
.rounded-2xl { border-radius: var(--border-radius-2xl) !important; }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }

/* Transition utilities */
.transition-fast { transition: all var(--transition-fast) !important; }
.transition-normal { transition: all var(--transition-normal) !important; }
.transition-slow { transition: all var(--transition-slow) !important; }
.transition-bounce { transition: all var(--transition-bounce) !important; }

/* Typography utilities */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-md { font-size: var(--font-size-md) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }

.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }

.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; } 


html {
   --white: #fff;
   --black: #000;
   --black-400: #0D1728;
   --electric-peach-400: #FE8065;
   --light-peach-400: #FFF4E9;
   --navy-400: #162947;
   --cobalt-400: #2579FF;
   --gold-400: #AA8B4B;
   --white-400: #FFFFFF;
   --blue-400: #126DFF;
   --orange-400: #E65739;
   --grey-400: #F8F8F8;
   --charcoal-400: #535455;
   --mid-gray-400: #8C9096;
   --slate-gray-400: #9CA5B4;
   --pale-gray-400: #EDEEEF;
   --mid-blue-400: #2D538E;
   --azure-400: #336BC4;
   --deep-brown-400: #1E1A17;
   --umber-400: #6C5020;
   --tan-400: #D3C598;
   --beige-400: #F1EEE7;
   --light-blue: #EBF5FF;
   --washed-blue: #ECF2FB;
   --surface-enabled: var(--white-400);
   --surface-hover: var(--orange-400);
   --surface-active: var(--orange-400);
   --surface-disabled: var(--slate-gray-400);
   --surface-subtle-peach: var(--light-peach-400);
   --surface-strong-orange: var(--orange-400);
   --surface-inverse-navy: var(--navy-400);
   --surface-inverse-black: var(--black-400);
   --button-orange: var(--orange-400);
   --button-light: var(--white-400);
   --button-dark: var(--black-400);
   --button--light-peach: var(--light-peach-400);
   --text-default: var(--black-400);
   --text-inverse: var(--white-400);
   --text-strong: var(--orange-400);
   --text-subtle: var(--charcoal-400);
   --bg-default: var(--white-400);
   --bg-neutral: var(--grey-400);
   --bg-subtle-peach: var(--light-peach-400);
   --bg-subtle-beige: var(--beige-400);
   --bg-strong-orange: var(--orange-400);
   --bg-strong-blue: var(--cobalt-400);
   --bg-inverse-navy: var(--navy-400);
   --bg-inverse-black: var(--black-400);
   --border-light: var(--white-400);
   --border-subtle: var(--slate-gray-400);
   --border-dark: var(--charcoal-400);
   --border-black: var(--black-400);
   --border-strong: var(--orange-400);
   --border-beige: var(--beige-400);
   --ps: 0.75em;
   --s1: 8rem;
   --s2: 12rem;
   --s3: 16rem;
   --s4: 24rem;
   --s5: 32rem;
   --s6: 48rem;
   --s7: 64rem;
   --s8: 96rem;
   --s9: 128rem;
   --s10: 192rem;
   --s11: 256rem;
   --s12: 384rem;
   --ns1: -8rem;
   --ns2: -12rem;
   --ns3: -16rem;
   --ns4: -24rem;
   --ns5: -32rem;
   --ns6: -48rem;
   --ns7: -64rem;
   --ns8: -96rem;
   --ns9: -128rem;
   --ns10: -192rem;
   --ns11: -256rem;
   --ns12: -384rem;
   --col-width: 72rem;
   --col-gutter: 32rem;
   --col-1: calc((var(--col-width) + var(--col-gutter)) * 1 - var(--col-gutter));
   --col-2: calc((var(--col-width) + var(--col-gutter)) * 2 - var(--col-gutter));
   --col-3: calc((var(--col-width) + var(--col-gutter)) * 3 - var(--col-gutter));
   --col-4: calc((var(--col-width) + var(--col-gutter)) * 4 - var(--col-gutter));
   --col-5: calc((var(--col-width) + var(--col-gutter)) * 5 - var(--col-gutter));
   --col-6: calc((var(--col-width) + var(--col-gutter)) * 6 - var(--col-gutter));
   --col-7: calc((var(--col-width) + var(--col-gutter)) * 7 - var(--col-gutter));
   --col-8: calc((var(--col-width) + var(--col-gutter)) * 8 - var(--col-gutter));
   --col-9: calc((var(--col-width) + var(--col-gutter)) * 9 - var(--col-gutter));
   --col-10: calc((var(--col-width) + var(--col-gutter)) * 10 - var(--col-gutter));
   --col-11: calc((var(--col-width) + var(--col-gutter)) * 11 - var(--col-gutter));
   --col-12: calc((var(--col-width) + var(--col-gutter)) * 12 - var(--col-gutter));
   --frame-width: var(--col-12);
   --page-head-height: var(--s8);
   --page-head-height-compressed: var(--s8);
   --scrollbar-width: 0px;
   --page-width: calc(100vw - var(--scrollbar-width));
   --notification-height: var(--s6);
   --radius-sm: var(--s1);
   --radius-md: var(--s2);
   --radius-lg: var(--s4);
   --radius-xl: var(--s5)
}