@import './components.css';
/*
• 	50–200 are soft tints for backgrounds, subtle highlights, and hover states.
• 	300–400 are mid‑tones for chips, selected states, and light accents.
• 	500 is your brand identity.
• 	600–900 are deep shades ideal for active states, dark mode, and strong accents.
*/
:root {
  /* Primary */
  --color-primary-50:   #f2f7ff;
  --color-primary-100:  #d9e7ff;
  --color-primary-200:  #b0ceff;
  --color-primary-300:  #7faeff;
  --color-primary-400:  #4d8cff;
  --color-primary-500:  #1a6aff;
  --color-primary-600:  #0052e0;
  --color-primary-700:  #003eb3;
  --color-primary-800:  #002b80;
  --color-primary-900:  #001a4d;

  /* Nexus Primary */
  --color-primary-50:  #f4f0ff;
  --color-primary-100: #e6dbff;
  --color-primary-200: #cbb8ff;
  --color-primary-300: #ae94ff;
  --color-primary-400: #9474f7;
  --color-primary-500: #7c59ec;
  --color-primary-600: #6846d4;
  --color-primary-700: #5535b8;
  --color-primary-800: #43279a;
  --color-primary-900: #2e176f;

  /* Secondary */
  --color-secondary-50:  #f7f1ff;
  --color-secondary-100: #ecddff;
  --color-secondary-200: #d9bfff;
  --color-secondary-300: #c6a2f7;
  --color-secondary-400: #b58aef;
  --color-secondary-500: #b88ce7;
  --color-secondary-600: #9f72d0;
  --color-secondary-700: #8659b5;
  --color-secondary-800: #6c4197;
  --color-secondary-900: #4a266a;

  /* Tertiary */
  --color-tertiary-500: #3A3A3C;

  /* Neutrals / Surfaces */
  --color-surface-0:   #ffffff;
  --color-surface-50:  #fafafa;
  --color-surface-100: #f5f5f5;
  --color-surface-200: #eeeeee;
  --color-surface-300: #e0e0e0;
  --color-surface-400: #bdbdbd;
  --color-surface-500: #9e9e9e;
  --color-surface-600: #757575;
  --color-surface-700: #616161;
  --color-surface-800: #424242;
  --color-surface-900: #212121;

  /* Text */
  --color-text-primary:   #1a1a1a;
  --color-text-secondary: #4d4d4d;
  --color-text-tertiary:  #757575;
  --color-text-disabled:  #9e9e9e;
  --color-text-on-primary: #ffffff;

  /* Borders */
  --color-border-light:   #e5e5e5;
  --color-border-default: #cccccc;
  --color-border-strong:  #999999;

  /* Semantic */
  --color-error-50:  #ffe8e8;
  --color-error-500: #e53935;
  --color-error-700: #b71c1c;

  --color-warning-50:  #fff8e1;
  --color-warning-500: #ffb300;
  --color-warning-700: #ff8f00;

  --color-success-50:  #e8f5e9;
  --color-success-500: #43a047;
  --color-success-700: #2e7d32;

  --color-info-50:  #e3f2fd;
  --color-info-500: #1e88e5;
  --color-info-700: #1565c0;

  /* Interaction */
  --color-hover-primary:   #1557d6;
  --color-hover-secondary: #5947d1;
  --color-hover-surface:   #f0f0f0;

  --color-active-primary:  #0f47b8;
  --color-active-secondary:#4a3ab8;

  --color-focus-ring:      #1a6aff;

  --color-disabled-bg:     #f0f0f0;
  --color-disabled-text:   #9e9e9e;
  --color-disabled-border: #d6d6d6;
}

:root[data-theme="dark"] {
  /* Primary */
  --color-primary-50:   #0d1a33;
  --color-primary-100:  #11264d;
  --color-primary-200:  #163366;
  --color-primary-300:  #1c4080;
  --color-primary-400:  #214d99;
  --color-primary-500:  #266bbf; /* main */
  --color-primary-600:  #1f5aa3;
  --color-primary-700:  #194a87;
  --color-primary-800:  #13396b;
  --color-primary-900:  #0d294f;

  /* Secondary */
  --color-secondary-500: #a29bfe;

  /* Tertiary */
  --color-tertiary-500: #55efc4;

  /* Surfaces / Backgrounds */
  --color-surface-0:   #121212;
  --color-surface-50:  #1a1a1a;
  --color-surface-100: #1f1f1f;
  --color-surface-200: #242424;
  --color-surface-300: #2c2c2c;
  --color-surface-400: #333333;
  --color-surface-500: #3d3d3d;
  --color-surface-600: #4a4a4a;
  --color-surface-700: #5c5c5c;
  --color-surface-800: #707070;
  --color-surface-900: #8a8a8a;

  /* Text */
  --color-text-primary:   #ffffff;
  --color-text-secondary: #d1d1d1;
  --color-text-tertiary:  #a8a8a8;
  --color-text-disabled:  #7a7a7a;
  --color-text-on-primary: #ffffff;

  /* Borders */
  --color-border-light:   #2a2a2a;
  --color-border-default: #3a3a3a;
  --color-border-strong:  #5a5a5a;

  /* Semantic */
  --color-error-50:  #3b0f0f;
  --color-error-500: #ef5350;
  --color-error-700: #d32f2f;

  --color-warning-50:  #4a3a0a;
  --color-warning-500: #ffca28;
  --color-warning-700: #ffa000;

  --color-success-50:  #0f2f1a;
  --color-success-500: #66bb6a;
  --color-success-700: #388e3c;

  --color-info-50:  #0d2b3f;
  --color-info-500: #42a5f5;
  --color-info-700: #1e88e5;

  /* Interaction */
  --color-hover-primary:   #1f5aa3;
  --color-hover-secondary: #8e82ff;
  --color-hover-surface:   #2a2a2a;

  --color-active-primary:  #194a87;
  --color-active-secondary:#7a6df0;

  --color-focus-ring:      #266bbf;

  --color-disabled-bg:     #2a2a2a;
  --color-disabled-text:   #7a7a7a;
  --color-disabled-border: #3a3a3a;
}

:root {
  /* Spacing and sizing */
  --hyazs-section-gap-inline: 16px;
  --hyazs-section-gap-block: 24px;
  --hyazs-item-gap-inline: 12px;
  --hyazs-item-gap-block: 12px;

  --hyazs-item-gap-block-small: 8px;
  --hyazs-item-gap-block-medium: 12px;
  --hyazs-item-gap-block-large: 24px;
  --hyazs-item-gap-block-xlarge: 32px;
  --hyazs-item-gap-block-xxlarge: 48px;
  
}