/* colors */
:root {
    --error: #FF0022;
    --success: #22C55E;
    --focus: #6366F1;
    --text-emphasis: #FFF;
    --text: #DDD;
    --text-gray: #AAA;
    --text-light: #DDD;
    --text-button: #FFF;
    --text-button-outline: #FFF;
    --text-mega-title: #FFF;
    --code-background: #000;
    --code-green: #b3ffb3;
    --code-blue: #b1fffc;
    --text-white: #FFF;
    --text-dark-gray: #121212;

    --geoblazor-primary: #693CB2;
    --geoblazor-primary-hover: #7845CC;
    --geoblazor-primary-disabled: #504660;
    --geoblazor-secondary: #928AC1;
    --geoblazor-secondary-hover: #B7ADF2;
    --geoblazor-accent: #E76439;
    --geoblazor-accent-hover: #FF8861;
    --geoblazor-gradient-dark-hover: #121212;
    --color-midnightblue: #12002F;

    --background-grey-1: #121212;
    --background-grey-1-alpha: rgba(18, 18, 18, 0.9);
    --background-grey-1-alpha-2: rgba(18, 18, 18, 0.8);
    --background-grey-2: #252525;
    --background-grey-3: #46414C;
    --background-grey-4: #696969;
    --background-grey-4-alpha: rgba(105, 105, 105, 0.9);

    /* Code highlight specific colors - Dark mode defaults */
    --code-button-bg: rgba(255, 255, 255, 0.1);
    --code-button-bg-hover: rgba(255, 255, 255, 0.2);
    --code-button-border: rgba(255, 255, 255, 0.2);
    --code-button-border-hover: rgba(255, 255, 255, 0.3);
    --code-button-text: rgba(255, 255, 255, 0.9);
    --code-button-bg-success: rgba(34, 197, 94, 0.2);
    --code-button-border-success: rgba(34, 197, 94, 0.4);
    --code-scrollbar-track: rgba(255, 255, 255, 0.1);
    --code-scrollbar-thumb: rgba(255, 255, 255, 0.3);
    --code-scrollbar-thumb-hover: rgba(255, 255, 255, 0.5);
    --code-shadow: rgba(0, 0, 0, 0.3);
    --focus-outline: rgba(99, 102, 241, 0.5);

    /* Warning state (distinct from --error) - used by the fleet telemetry demo embed for
       "stale" vehicle status and paused-state indicators. */
    --warning: #D98218;
    --warning-bg: rgba(217, 130, 24, 0.16);
    --error-bg: rgba(255, 0, 34, 0.08);
    /* Fleet telemetry legend swatches; match the map marker symbols in FleetMap.razor. */
    --fleet-marker-moving: #22C55E;
    --fleet-marker-idle: #6B7280;
    --fleet-marker-stale: #D98218;
    /* Purple text for small outlined buttons; primary purple is too dark on dark panels. */
    --interactive-text: #B7ADF2;

    /* Code block syntax tokens (CodeHighlight tok-* classes), VS Code Dark+ palette */
    --code-block-background: #1E1E1E;
    --code-token-text: #D4D4D4;
    --code-token-keyword: #569CD6;
    --code-token-control: #C586C0;
    --code-token-type: #4EC9B0;
    --code-token-method: #DCDCAA;
    --code-token-variable: #9CDCFE;
    --code-token-string: #CE9178;
    --code-token-number: #B5CEA8;
    --code-token-comment: #6A9955;
    --code-token-doc-tag: #808080;
    --code-token-delimiter: #808080;
    --code-token-tag: #569CD6;
    --code-token-attribute: #9CDCFE;
    --code-token-razor: #C586C0;

    --geoblazor-gradient-horizontal: linear-gradient(90deg, var(--geoblazor-primary), var(--geoblazor-accent));
    --geoblazor-gradient-horizontal-reverse: linear-gradient(90deg, var(--geoblazor-accent), var(--geoblazor-primary));
    --geoblazor-gradient-horizontal-hover: linear-gradient(90deg, var(--geoblazor-primary-hover), var(--geoblazor-accent-hover));
    --geoblazor-gradient-horizontal-hover-reverse: linear-gradient(90deg, var(--geoblazor-accent-hover), var(--geoblazor-primary-hover));
    --geoblazor-gradient-vertical: linear-gradient(180deg, var(--geoblazor-primary), var(--geoblazor-accent));
    --geoblazor-gradient-vertical-reverse: linear-gradient(180deg, var(--geoblazor-accent), var(--geoblazor-primary));

    --torchy-gradient-a: #9747FF;
    --torchy-gradient-b: #554C8B;
    --torchy-gradient-c: #E76439;
    --torchy-gradient-a-hover: #B47AFF;
    --torchy-gradient-b-hover: #6B61A8;
    --torchy-gradient-c-hover: #EC8664;

    --torchy-gradient-horizontal: linear-gradient(90deg, var(--torchy-gradient-a), var(--torchy-gradient-b), var(--torchy-gradient-c));
    --torchy-gradient-vertical: linear-gradient(180deg, var(--torchy-gradient-a), var(--torchy-gradient-b), var(--torchy-gradient-c));
    --torchy-gradient-horizontal-hover: linear-gradient(90deg, var(--torchy-gradient-a-hover), var(--torchy-gradient-b-hover), var(--torchy-gradient-c-hover));
    --torchy-gradient-vertical-hover: linear-gradient(180deg, var(--torchy-gradient-a-hover), var(--torchy-gradient-b-hover), var(--torchy-gradient-c-hover));

    /* Font */
    --font-aller: 'Aller', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 /* sizes */
 :root {
    --box-radius: 0.5rem;
 }


 @media (prefers-color-scheme: light) {
    :root {
      --error: #C0392B;
      --text: #121212;
      --text-button-outline: #121212;
      --text-gray: #46414C;
      --text-emphasis: #121212;

      --geoblazor-gradient-dark-hover: #FFF;

      --background-grey-1: #F5F5F5;
      --background-grey-1-alpha: rgba(245, 245, 245, 0.9);
      --background-grey-1-alpha-2: rgba(245, 245, 245, 0.6);
      --background-grey-2: #EEEEEE;
      --background-grey-3: #DCD8E3;
      --background-grey-4: #B0B0B0;
      --background-grey-4-alpha: rgba(176, 176, 176, 0.9);

      /* Code highlight specific colors - Light mode overrides */
      --code-button-bg: rgba(0, 0, 0, 0.05);
      --code-button-bg-hover: rgba(0, 0, 0, 0.1);
      --code-button-border: rgba(0, 0, 0, 0.1);
      --code-button-border-hover: rgba(0, 0, 0, 0.2);
      --code-button-text: rgba(0, 0, 0, 0.7);
      --code-scrollbar-track: rgba(0, 0, 0, 0.1);
      --code-scrollbar-thumb: rgba(0, 0, 0, 0.3);
      --code-scrollbar-thumb-hover: rgba(0, 0, 0, 0.5);
      --code-shadow: rgba(0, 0, 0, 0.15);

      --warning: #9C5C0E;
      --warning-bg: rgba(156, 92, 14, 0.12);
      --error-bg: rgba(192, 57, 43, 0.08);
      --fleet-marker-moving: #22C55E;
      --fleet-marker-idle: #6B7280;
      --fleet-marker-stale: #D98218;
      --interactive-text: #693CB2;

      /* Code block syntax tokens, VS Code Light+ palette */
      --code-block-background: #FFFFFF;
      --code-token-text: #000000;
      --code-token-keyword: #0000FF;
      --code-token-control: #AF00DB;
      --code-token-type: #267F99;
      --code-token-method: #795E26;
      --code-token-variable: #001080;
      --code-token-string: #A31515;
      --code-token-number: #098658;
      --code-token-comment: #008000;
      --code-token-doc-tag: #808080;
      --code-token-delimiter: #800000;
      --code-token-tag: #800000;
      --code-token-attribute: #E50000;
      --code-token-razor: #AF00DB;
    }
}