/**
 * Expanso Brand Colors
 * Generated from brand.expanso.io
 *
 * Usage:
 *   @import url('colors.css');
 *   or <link rel="stylesheet" href="colors.css">
 *
 * Then use: var(--violet-500), var(--blue-600), etc.
 */

:root {
  /* ============================================
     PRIMARY BRAND COLORS (Violet)
     Creativity, innovation, forward-thinking
     Primary: #501E99 (violet-800)
     ============================================ */
  --violet-950: #140034;
  --violet-900: #27065B;
  --violet-800: #501E99;  /* Primary Base */
  --violet-700: #6823CD;
  --violet-600: #883FFD;
  --violet-500: #9259ED;
  --violet-400: #B087F1;
  --violet-300: #C8A9FA;
  --violet-200: #DFCBFD;
  --violet-100: #F0E6FF;
  --violet-50:  #FAF6FF;

  /* ============================================
     OPEN SOURCE / BACALHAU COLORS (Blue)
     Trust, reliability, ocean
     Primary: #0055FF (blue-600)
     ============================================ */
  --blue-950: #000924;
  --blue-900: #000F3B;
  --blue-800: #001C70;
  --blue-700: #0037A6;
  --blue-600: #0055FF;
  --blue-500: #256EFF;
  --blue-400: #5A91FF;
  --blue-300: #8CB2FF;
  --blue-200: #BED3FF;
  --blue-100: #DAE6FF;
  --blue-50:  #EFF4FF;

  /* ============================================
     OPEN SOURCE / BACALHAU COLORS (Ice)
     Innovation, freshness, ocean
     Primary: #33CCFF (ice-500)
     ============================================ */
  --ice-900: #0A2731;
  --ice-800: #005A79;
  --ice-700: #008CBB;
  --ice-600: #00B8F6;
  --ice-500: #33CCFF;
  --ice-400: #68D9FF;
  --ice-300: #95E5FF;
  --ice-200: #AFEBFF;
  --ice-100: #D0F4FF;
  --ice-50:  #F1FCFF;

  /* ============================================
     NEUTRAL COLORS (Grey)
     ============================================ */
  --grey-900: #000000;
  --grey-800: #454545;
  --grey-700: #727272;
  --grey-600: #9F9F9F;
  --grey-500: #CFCFCF;
  --grey-400: #E3E3E3;
  --grey-300: #ECECEC;
  --grey-200: #F6F6F6;
  --grey-100: #FCFCFC;
  --grey-50:  #FFFFFF;

  /* ============================================
     SECONDARY COLORS - Full Palettes
     ============================================ */

  /* Green - Success, growth */
  --green-900: #122D0F;
  --green-800: #2A6A22;
  --green-700: #42A435;
  --green-600: #52CD42;
  --green-500: #59E248;
  --green-400: #6DF15D;
  --green-300: #96FA89;
  --green-200: #B7FCAE;
  --green-100: #DEFDDA;
  --green-50:  #F2FFF0;

  /* Orange - Energy, warmth */
  --orange-900: #321600;
  --orange-800: #672E00;
  --orange-700: #B5570B;
  --orange-600: #FF7B0F;
  --orange-500: #FF953F;
  --orange-400: #FFA861;
  --orange-300: #FFC698;
  --orange-200: #FFD6B5;
  --orange-100: #FFECDB;
  --orange-50:  #FFF7F0;

  /* Yellow - Optimism, attention */
  --yellow-900: #2B2A0D;
  --yellow-800: #69661E;
  --yellow-700: #B2AC18;
  --yellow-600: #D4CD00;
  --yellow-500: #EDE633;
  --yellow-400: #F9F348;
  --yellow-300: #FBF784;
  --yellow-200: #FCF9AB;
  --yellow-100: #FDFCC8;
  --yellow-50:  #FEFEED;

  /* Red - Urgency, errors */
  --red-900: #4E1603;
  --red-800: #982D09;
  --red-700: #E63A02;
  --red-600: #FF4A0E;
  --red-500: #FF7244;
  --red-400: #FF9470;
  --red-300: #FFB197;
  --red-200: #FFCCBA;
  --red-100: #FFE4DA;
  --red-50:  #FFF3EF;

  /* Cyan - Clarity, calm */
  --cyan-900: #0C3433;
  --cyan-800: #134E4C;
  --cyan-700: #066D6A;
  --cyan-600: #009D97;
  --cyan-500: #00BBB4;
  --cyan-400: #00DFD8;
  --cyan-300: #00FFF7;
  --cyan-200: #79FFFB;
  --cyan-100: #B5FFFC;
  --cyan-50:  #ECFFFE;

  /* Magenta - Creativity, uniqueness */
  --magenta-900: #4A1848;
  --magenta-800: #7D207A;
  --magenta-700: #BB32B6;
  --magenta-600: #F84FF2;
  --magenta-500: #F972F5;
  --magenta-400: #FA89F6;
  --magenta-300: #FCAEF9;
  --magenta-200: #FDC8FB;
  --magenta-100: #FDE7FF;
  --magenta-50:  #FFF3FF;

  /* Brown - Stability, earthiness */
  --brown-900: #301804;
  --brown-800: #522401;
  --brown-700: #72390A;
  --brown-600: #965826;
  --brown-500: #BF895E;
  --brown-400: #D3AE90;
  --brown-300: #E2C9B5;
  --brown-200: #EBDACD;
  --brown-100: #F1E6DF;
  --brown-50:  #F9F3EF;

  /* ============================================
     SEMANTIC ALIASES
     ============================================ */

  /* Expanso Brand */
  --color-expanso-primary: var(--violet-800);
  --color-expanso-secondary: var(--violet-600);
  --color-expanso-dark: var(--violet-950);

  /* Bacalhau / Open Source Brand */
  --color-bacalhau-primary: var(--blue-600);
  --color-bacalhau-secondary: var(--ice-500);
  --color-bacalhau-dark: var(--blue-900);

  /* Text */
  --color-text: var(--grey-900);
  --color-text-secondary: var(--grey-600);
  --color-text-muted: var(--grey-700);

  /* Backgrounds */
  --color-background: var(--grey-50);
  --color-background-alt: var(--grey-200);
  --color-surface: var(--grey-100);
  --color-dark-bg: var(--blue-900);
  --color-dark-bg-alt: var(--violet-950);

  /* Borders */
  --color-border: var(--grey-400);
  --color-border-light: var(--grey-300);

  /* ============================================
     DATA VISUALIZATION
     Expanso = Violet, Competitors = Grey
     ============================================ */
  --chart-primary: var(--blue-600);
  --chart-primary-alt: var(--violet-600);
  --chart-accent-red: var(--red-600);
  --chart-accent-green: var(--green-600);
  --chart-grid: var(--grey-500);
  --chart-baseline: var(--grey-900);
  --chart-label: var(--grey-600);
  --chart-bg-1: var(--grey-400);
  --chart-bg-2: var(--grey-300);
  --chart-bg-3: var(--grey-200);

  /* ============================================
     DESIGN SYSTEM CONSTANTS
     ============================================ */
  --grid-unit: 40px;
  --node-border-radius: 20%;  /* of side length */
  --chart-template-size: 704px;
  --chart-clearance: 25px;
  --chart-margin: 10px;
  --chart-title-height: 45px;
  --chart-subtitle-height: 23px;
  --line-weight-box: 1px;
  --line-weight-grid: 1px;
  --line-weight-baseline: 1px;
  --line-weight-data: 2px;
  --marker-size: 8px;
}

/* ============================================
   THEME COMBINATIONS (as CSS classes)
   ============================================ */

/* Violet Themes */
.theme-violet-light {
  --theme-bg: var(--violet-700);
  --theme-fg: var(--grey-50);
}
.theme-violet-mid {
  --theme-bg: var(--violet-900);
  --theme-fg: var(--grey-50);
}
.theme-violet-dark {
  --theme-bg: var(--violet-900);
  --theme-fg: var(--cyan-200);
}
.theme-violet-inverted {
  --theme-bg: var(--violet-100);
  --theme-fg: var(--grey-900);
}

/* Blue Themes */
.theme-blue-light {
  --theme-bg: var(--blue-600);
  --theme-fg: var(--grey-50);
}
.theme-blue-mid {
  --theme-bg: var(--blue-800);
  --theme-fg: var(--grey-50);
}
.theme-blue-dark {
  --theme-bg: var(--blue-900);
  --theme-fg: var(--cyan-200);
}
.theme-blue-inverted {
  --theme-bg: var(--blue-50);
  --theme-fg: var(--grey-900);
}

/* Neutral Themes */
.theme-neutral-light {
  --theme-bg: var(--grey-50);
  --theme-fg: var(--grey-900);
}
.theme-neutral-mid {
  --theme-bg: var(--grey-500);
  --theme-fg: var(--grey-900);
}
.theme-neutral-dark {
  --theme-bg: var(--grey-900);
  --theme-fg: var(--grey-50);
}

/* Ice Themes */
.theme-ice-light {
  --theme-bg: var(--ice-100);
  --theme-fg: var(--violet-700);
}
.theme-ice-mid {
  --theme-bg: var(--ice-500);
  --theme-fg: var(--grey-50);
}
.theme-ice-dark {
  --theme-bg: var(--ice-700);
  --theme-fg: var(--grey-50);
}

/* Cyan Themes */
.theme-cyan-light {
  --theme-bg: var(--cyan-100);
  --theme-fg: var(--violet-700);
}
.theme-cyan-mid {
  --theme-bg: var(--cyan-300);
  --theme-fg: var(--violet-900);
}
.theme-cyan-dark {
  --theme-bg: var(--cyan-800);
  --theme-fg: var(--violet-200);
}

/* Red Themes */
.theme-red-light {
  --theme-bg: var(--red-100);
  --theme-fg: var(--yellow-800);
}
.theme-red-mid {
  --theme-bg: var(--red-600);
  --theme-fg: var(--yellow-300);
}
.theme-red-dark {
  --theme-bg: var(--red-800);
  --theme-fg: var(--yellow-400);
}

/* Green Themes */
.theme-green-light {
  --theme-bg: var(--green-100);
  --theme-fg: var(--violet-700);
}
.theme-green-mid {
  --theme-bg: var(--green-500);
  --theme-fg: var(--violet-900);
}
.theme-green-dark {
  --theme-bg: var(--green-900);
  --theme-fg: var(--violet-300);
}

/* Magenta Themes */
.theme-magenta-light {
  --theme-bg: var(--magenta-100);
  --theme-fg: var(--green-800);
}
.theme-magenta-mid {
  --theme-bg: var(--magenta-600);
  --theme-fg: var(--grey-900);
}
.theme-magenta-dark {
  --theme-bg: var(--magenta-800);
  --theme-fg: var(--green-300);
}

/* Yellow Themes */
.theme-yellow-light {
  --theme-bg: var(--yellow-100);
  --theme-fg: var(--blue-600);
}
.theme-yellow-mid {
  --theme-bg: var(--yellow-400);
  --theme-fg: var(--grey-900);
}
.theme-yellow-dark {
  --theme-bg: var(--yellow-900);
  --theme-fg: var(--blue-200);
}

/* Brown Themes */
.theme-brown-light {
  --theme-bg: var(--brown-100);
  --theme-fg: var(--violet-700);
}
.theme-brown-mid {
  --theme-bg: var(--brown-600);
  --theme-fg: var(--grey-50);
}
.theme-brown-dark {
  --theme-bg: var(--brown-800);
  --theme-fg: var(--violet-300);
}

/* Orange Themes */
.theme-orange-light {
  --theme-bg: var(--orange-100);
  --theme-fg: var(--blue-600);
}
.theme-orange-mid {
  --theme-bg: var(--orange-600);
  --theme-fg: var(--grey-50);
}
.theme-orange-dark {
  --theme-bg: var(--orange-900);
  --theme-fg: var(--blue-300);
}

/* Theme application helper */
[class^="theme-"],
[class*=" theme-"] {
  background-color: var(--theme-bg);
  color: var(--theme-fg);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: var(--grey-50);
    --color-text-secondary: var(--grey-400);
    --color-text-muted: var(--grey-500);

    --color-background: var(--grey-900);
    --color-background-alt: var(--grey-800);
    --color-surface: var(--grey-800);

    --color-border: var(--grey-700);
    --color-border-light: var(--grey-800);
  }
}