/* CyberStrek — brand design tokens */

:root {
  /* Background */
  --neutral-primary-soft: #000000;
  --neutral-primary: #000000;
  --neutral-secondary-medium: #0A0A0A;
  --neutral-tertiary: #111111;
  --neutral-tertiary-medium: #1A1A1A;
  --neutral-quaternary: #232323;
  --gray: #8D98A1;

  /* Brand */
  --brand-softer: rgb(44 168 216 / 0.12);
  --brand-soft: rgb(44 168 216 / 0.2);
  --brand: #2CA8D8;
  --brand-medium: #229BC8;
  --brand-strong: #CE1380;
  --brand-gradient: linear-gradient(135deg, #2CA8D8 0%, #CE1380 100%);
  --surface-gradient: linear-gradient(180deg, #0D0D0D, #050505);

  /* Status */
  --success-soft: rgb(44 168 216 / 0.12);
  --success: #2CA8D8;
  --danger-soft: rgb(206 19 128 / 0.14);
  --danger: #CE1380;
  --warning-soft: rgb(206 19 128 / 0.14);
  --warning: #CE1380;

  /* Button drop shadows */
  --shadow-brand: #AE106C;
  --shadow-success: #229BC8;
  --shadow-danger: #AE106C;
  --shadow-warning: #AE106C;
  --shadow-secondary: #1A1A1A;
  --shadow-dark: #000000;

  /* Utility */
  --dark: #000000;
  --dark-strong: #000000;
  --disabled: #111111;

  /* Accent */
  --purple: #CE1380;
  --sky: #2CA8D8;
  --teal: #2CA8D8;
  --orange: #CE1380;

  /* Text */
  --white: #FFFFFF;
  --heading: #FFFFFF;
  --body: #D5DDE2;
  --body-subtle: #98A5AD;
  --fg-brand: #2CA8D8;
  --fg-brand-strong: #CE1380;
  --fg-danger: #CE1380;
  --fg-warning: #CE1380;
  --fg-disabled: #91A9B8;
  --fg-purple-strong: #CE1380;
  --fg-info: #2CA8D8;

  /* Borders */
  --border-buffer: #000000;
  --border-default: #1F1F1F;
  --border-default-strong: #313131;
  --border-brand-subtle: rgb(44 168 216 / 0.35);
  --border-brand: #2CA8D8;
  --border-success-subtle: rgb(44 168 216 / 0.35);
  --border-danger: #CE1380;
  --border-danger-subtle: rgb(206 19 128 / 0.35);

  /* Shadows */
  --shadow-2xs: 0 2px 0 rgb(0 0 0 / 0.5);
  --shadow-xs: 0 2px 0 rgb(20 20 20 / 1);
  --shadow-sm: 0 4px 0 rgb(20 20 20 / 1), 0 10px 24px -18px rgb(44 168 216 / 0.25);
  --shadow-md: 0 4px 0 rgb(20 20 20 / 1), 0 14px 28px -18px rgb(44 168 216 / 0.22);
  --shadow-lg: 0 6px 0 rgb(20 20 20 / 1), 0 18px 34px -20px rgb(206 19 128 / 0.2);
  --shadow-xl: 0 8px 0 rgb(20 20 20 / 1), 0 22px 40px -22px rgb(44 168 216 / 0.24);

  /* Radius */
  --radius: 12px;
  --radius-full: 9999px;

  /* Type */
  --font-sans: "Nunito", "DIN 2014 Rounded", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --neutral-primary-soft: #000000;
    --neutral-primary: #000000;
    --neutral-secondary-medium: #0A0A0A;
    --neutral-tertiary: #111111;
    --neutral-tertiary-medium: #1A1A1A;
    --neutral-quaternary: #232323;
    --gray: #8D98A1;
    --brand-softer: rgb(44 168 216 / 0.12);
    --brand-soft: rgb(44 168 216 / 0.2);
    --brand: #2CA8D8;
    --brand-medium: #229BC8;
    --brand-strong: #CE1380;
    --success-soft: rgb(44 168 216 / 0.12);
    --success: #2CA8D8;
    --danger-soft: rgb(206 19 128 / 0.14);
    --danger: #CE1380;
    --warning-soft: rgb(206 19 128 / 0.14);
    --warning: #CE1380;
    --heading: #FFFFFF;
    --body: #D5DDE2;
    --body-subtle: #98A5AD;
    --fg-brand: #2CA8D8;
    --fg-brand-strong: #CE1380;
    --fg-danger: #CE1380;
    --fg-warning: #CE1380;
    --fg-disabled: #91A9B8;
    --fg-purple-strong: #CE1380;
    --fg-info: #2CA8D8;
    --border-buffer: #000000;
    --border-default: #1F1F1F;
    --border-default-strong: #313131;
    --border-brand-subtle: rgb(44 168 216 / 0.35);
    --border-brand: #2CA8D8;
    --border-success-subtle: rgb(44 168 216 / 0.35);
    --border-danger: #CE1380;
    --border-danger-subtle: rgb(206 19 128 / 0.35);
  }
}