/* ==========================================================================
   2026.css — Global custom styles
   Loaded after index.css (Tailwind). Write any global overrides,
   shared animations, or cross-component styles here.
   ========================================================================== */

:root,
[data-theme="light"] .--light {

   /* ===== PRIMITIVE COLORS ===== */

   /* neon green */
   --primary-hue: 25;

   /* orange */
   --secondary-hue: 13;
   /* light cyan */
   --tertiary-hue: 100;
   /* dark green */
   --quaternary-hue: 104;
   /* Red */
   --quinary-hue: 10;

   --t3di__color-primary-1: hsl(var(--primary-hue), 95%, 50%);
   --t3di__color-primary-2: hsl(var(--primary-hue), 95%, 55%);
   --t3di__color-primary-3: hsl(var(--primary-hue), 95%, 60%);
   --t3di__color-primary-4: hsl(var(--primary-hue), 95%, 65%);
   --t3di__color-primary-5: hsl(var(--primary-hue), 95%, 70%);
   --t3di__color-primary-6: hsl(var(--primary-hue), 95%, 75%);
   --t3di__color-primary-7: hsl(var(--primary-hue), 95%, 80%);
   --t3di__color-primary-8: hsl(var(--primary-hue), 95%, 85%);
   --t3di__color-primary-9: hsl(var(--primary-hue), 95%, 90%);
   --t3di__color-primary-10: hsl(var(--primary-hue), 95%, 94%);

   --t3di__color-secondary-1: hsl(var(--secondary-hue), 95%, 50%);
   --t3di__color-secondary-2: hsl(var(--secondary-hue), 95%, 59%);
   --t3di__color-secondary-3: hsl(var(--secondary-hue), 95%, 62%);
   --t3di__color-secondary-4: hsl(var(--secondary-hue), 95%, 65%);
   --t3di__color-secondary-5: hsl(var(--secondary-hue), 95%, 70%);
   --t3di__color-secondary-6: hsl(var(--secondary-hue), 95%, 75%);
   --t3di__color-secondary-7: hsl(var(--secondary-hue), 95%, 80%);
   --t3di__color-secondary-8: hsl(var(--secondary-hue), 95%, 85%);
   --t3di__color-secondary-9: hsl(var(--secondary-hue), 95%, 90%);
   --t3di__color-secondary-10: hsl(var(--secondary-hue), 95%, 95%);

   --t3di__color-tertiary-1: hsl(var(--tertiary-hue), 85%, 45%);
   --t3di__color-tertiary-2: hsl(var(--tertiary-hue), 85%, 51%);
   --t3di__color-tertiary-3: hsl(var(--tertiary-hue), 85%, 60%);
   --t3di__color-tertiary-4: hsl(var(--tertiary-hue), 85%, 65%);
   --t3di__color-tertiary-5: hsl(var(--tertiary-hue), 85%, 70%);
   --t3di__color-tertiary-6: hsl(var(--tertiary-hue), 85%, 75%);
   --t3di__color-tertiary-7: hsl(var(--tertiary-hue), 85%, 80%);
   --t3di__color-tertiary-8: hsl(var(--tertiary-hue), 85%, 85%);
   --t3di__color-tertiary-9: hsl(var(--tertiary-hue), 85%, 90%);
   --t3di__color-tertiary-10: hsl(var(--tertiary-hue), 85%, 95%);

   --t3di__color-quaternary-1: hsl(var(--quaternary-hue), 50%, 50%);
   --t3di__color-quaternary-2: hsl(var(--quaternary-hue), 50%, 59%);
   --t3di__color-quaternary-3: hsl(var(--quaternary-hue), 50%, 62%);
   --t3di__color-quaternary-4: hsl(var(--quaternary-hue), 50%, 65%);
   --t3di__color-quaternary-5: hsl(var(--quaternary-hue), 50%, 70%);
   --t3di__color-quaternary-6: hsl(var(--quaternary-hue), 50%, 75%);
   --t3di__color-quaternary-7: hsl(var(--quaternary-hue), 50%, 80%);
   --t3di__color-quaternary-8: hsl(var(--quaternary-hue), 50%, 85%);
   --t3di__color-quaternary-9: hsl(var(--quaternary-hue), 50%, 90%);
   --t3di__color-quaternary-10: hsl(var(--quaternary-hue), 50%, 95%);

   --t3di__color-quinary-1: hsl(var(--quinary-hue), 90%, 53%);
   --t3di__color-quinary-2: hsl(var(--quinary-hue), 90%, 59%);
   --t3di__color-quinary-3: hsl(var(--quinary-hue), 90%, 62%);
   --t3di__color-quinary-4: hsl(var(--quinary-hue), 90%, 65%);
   --t3di__color-quinary-5: hsl(var(--quinary-hue), 90%, 70%);
   --t3di__color-quinary-6: hsl(var(--quinary-hue), 90%, 75%);
   --t3di__color-quinary-7: hsl(var(--quinary-hue), 90%, 80%);
   --t3di__color-quinary-8: hsl(var(--quinary-hue), 90%, 85%);
   --t3di__color-quinary-9: hsl(var(--quinary-hue), 90%, 90%);
   --t3di__color-quinary-10: hsl(var(--quinary-hue), 90%, 95%);

   --t3di__color-surface-1: hsl(var(--primary-hue), 6%, 100%);
   --t3di__color-surface-2: hsl(var(--primary-hue), 6%, 98%);
   --t3di__color-surface-3: hsl(var(--primary-hue), 8%, 97%);
   --t3di__color-surface-4: hsl(var(--primary-hue), 6%, 95%);
   --t3di__color-surface-5: hsl(var(--primary-hue), 6%, 90%);
   --t3di__color-surface-6: hsl(var(--primary-hue), 6%, 85%);
   --t3di__color-surface-7: hsl(var(--primary-hue), 6%, 80%);
   --t3di__color-surface-8: hsl(var(--primary-hue), 6%, 75%);
   --t3di__color-surface-9: hsl(var(--primary-hue), 6%, 70%);
   --t3di__color-surface-10: hsl(var(--primary-hue), 6%, 60%);

   --t3di__color-surface-11: hsl(var(--primary-hue), 6%, 55%);
   --t3di__color-surface-12: hsl(var(--primary-hue), 6%, 50%);
   --t3di__color-surface-13: hsl(var(--primary-hue), 6%, 45%);
   --t3di__color-surface-14: hsl(var(--primary-hue), 6%, 40%);
   --t3di__color-surface-15: hsl(var(--primary-hue), 6%, 35%);
   --t3di__color-surface-16: hsl(var(--primary-hue), 6%, 30%);
   --t3di__color-surface-17: hsl(var(--primary-hue), 6%, 25%);
   --t3di__color-surface-18: hsl(var(--primary-hue), 6%, 20%);
   --t3di__color-surface-19: hsl(var(--primary-hue), 6%, 15%);
   --t3di__color-surface-20: hsl(var(--primary-hue), 6%, 10%);

   --t3di__font-size: 16px;

   --t3di__border-radius: var(--t3di__space);
   --t3di__border-radius-sm: calc(var(--t3di__space) / 2);
   --t3di__animation-step: 0.125s;
   --t3di__animation-step-2x: 0.25s;
   --t3di__animation-step-4x: 0.5s;
   --t3di__focus-box-shadow: 0 0 0 0.0675em var(--t3di__color-primary-3);
   --t3di__focus-box-shadow-start: 0 0 0 0.0675em var(--t3di__color-primary-3);
   --t3di__focus-box-shadow-color: var(--t3di__color-primary-3);

   --t3di__screen-xl: 1680px;
   --t3di__screen-lg: 1280px;
   --t3di__screen-md: 1080px;
   --t3di__screen-sm: 736px;

   --t3di__space: 16px;
   --t3di__border-width: 1px;
   --t3di__modal__border-radius: 24px;

   --t3di__font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
      sans-serif;
   --t3di__font-mono: monospace, monospace;
   --t3di__font-family-mono: 'IBM Plex Mono', monospace, monospace;

   /* TOKENS FOR LAYERING */

   /* === Foreground & Background TOKENS === */
   --t3di__color-foreground: hsl(var(--primary-hue), 81%, 11%);
   --t3di__color-foreground-fixed: hsl(var(--primary-hue), 81%, 11%);
   --t3di__color-background: hsl(var(--primary-hue), 4%, 98.75%);
   --t3di__color-foreground-inverse: hsl(var(--primary-hue), 15%, 15%);
   --t3di__color-background-brand: var(--t3di__color-primary-5);

   --t3di__white: #ffffff;
   --t3di__black: #000;

   --t3di__layer-1: var(--t3di__color-surface-1);
   --t3di__layer-2: var(--t3di__color-surface-3);
   --t3di__layer-3: var(--t3di__color-surface-5);
   --t3di__layer-4: var(--t3di__color-surface-5);

   --t3di__layer-inset: var(--t3di__white);

   --t3di__text-default: var(--t3di__color-foreground);
   --t3di__text-inverse: var(--t3di__color-background);
   --t3di__text-subtle: color-mix(in srgb, var(--t3di__color-foreground) 65%, transparent);
   --t3di__text-label: color-mix(in srgb, var(--t3di__color-foreground) 80%, transparent);
   --t3di__text-selected: color-mix(in srgb, var(--t3di__color-primary-1) 50%, var(--t3di__color-foreground) 50%);
   --t3di__text-placeholder: color-mix(in srgb, var(--t3di__color-foreground) 50%, transparent);
   --t3di__text-brand: var(--t3di__color-foreground);

   /* === Border TOKENS === */
   --t3di__border-default: var(--t3di__color-surface-7);
   --t3di__border-subtle: var(--t3di__color-surface-5);
   --t3di__border-strong: var(--t3di__color-foreground);
   --t3di__border-brand: var(--t3di__color-surface-20);
   --t3di__border-card: var(--t3di__color-surface-6);
   --t3di__border-card-alt: var(--t3di__color-surface-20);
   --t3di__border-dot: var(--t3di__color-surface-6);

   /* === Button TOKENS === */
   /* Primary Button */
   --t3di__button-primary-background: var(--t3di__color-primary-3);
   --t3di__button-primary-color: var(--t3di__text-inverse);
   --t3di__button-primary-border: var(--t3di__border-default);

   /* Secondary Button */
   --t3di__button-secondary-background: var(--t3di__color-surface-5);
   --t3di__button-secondary-color: var(--t3di__text-default);

   /* Neutral Button */
   --t3di__button-neutral-background: var(--t3di__color-surface-6);
   --t3di__button-neutral-color: var(--t3di__text-default);


   /* Tertiary Button */
   --t3di__button-tertiary-background: var(--t3di__color-tertiary-6);
   --t3di__button-tertiary-color: var(--t3di__text-default);

   /* Quaternary Button */
   --t3di__button-quaternary-background: color-mix(in srgb, var(--t3di__color-quaternary-1) 100%, var(--t3di__color-foreground) 50%);
   --t3di__button-quaternary-color: var(--t3di__text-inverse);


   /* Danger Button */
   --t3di__button-danger-background: var(--t3di__color-quinary-8);
   --t3di__button-danger-color: var(--t3di__color-quinary-1);

   /* Warning Button */
   --t3di__button-warning-background: var(--t3di__color-quaternary-3);



   /* ===== link TOKENS ===== */
   --t3di__link: var(--t3di__text-default);
   --t3di__link-primary: var(--t3di__color-primary-4);
   --t3di__link-primary-selected: var(--t3di__color-primary-4);
   --t3di__link-primary-disabled: var(--t3di__color-primary-4);


   @media (max-width: 1024px) {
      --t3di__space: calc(var(--t3di__font-size) * 1.25);
   }

   @media (max-width: 768px) {
      --t3di__space: calc(var(--t3di__font-size) * 1.125);
   }
}


[data-theme="brand"],
.--brand {
   --t3di__color-background: var(--t3di__color-primary-6);

   --t3di__layer-1: color-mix(in srgb, var(--t3di__color-primary-5) 100%, var(--t3di__color-background) 5%);
   --t3di__layer-2: color-mix(in srgb, var(--t3di__color-primary-4) 100%, var(--t3di__white) 41%);
   --t3di__layer-3: color-mix(in srgb, var(--t3di__color-primary-7) 100%, var(--t3di__color-background) 5%);
   --t3di__layer-4: color-mix(in srgb, var(--t3di__color-primary-8) 100%, var(--t3di__color-background) 5%);

   --t3di__border-default: color-mix(in srgb, var(--t3di__color-primary-1) 100%, var(--t3di__color-foreground) 10%);
   --t3di__border-subtle: color-mix(in srgb, var(--t3di__color-primary-1) 100%, var(--t3di__color-foreground) 3%);
   --t3di__border-card: color-mix(in srgb, var(--t3di__color-primary-1) 100%, var(--t3di__color-foreground) 3%);
   --t3di__border-dot: color-mix(in srgb, var(--t3di__color-primary-7) 100%, var(--t3di__color-foreground) 100%);

   --t3di__button-primary-background: var(--t3di__color-primary-7);
   --t3di__button-primary-color: var(--t3di__color-foreground);

   --t3di__button-secondary-background: var(--t3di__color-primary-8);
   --t3di__button-secondary-color: var(--t3di__color-foreground);

   --t3di__layer-inset: color-mix(in srgb, var(--t3di__color-primary-7) 60%, var(--t3di__white) 60%);

   --t3di__text-default: var(--t3di__black);
   --t3di__text-subtle: color-mix(in srgb, var(--t3di__black) 80%, transparent);
}

/* ===== DARK THEME  ===== */

[data-theme="dark"],
.--dark {

   /* TOKENS FOR LAYERING */

   --t3di__layer-1: var(--t3di__color-surface-20);
   --t3di__layer-2: var(--t3di__color-surface-19);
   --t3di__layer-3: var(--t3di__color-surface-16);
   --t3di__layer-4: var(--t3di__color-surface-15);

   --t3di__layer-inset: var(--t3di__black);

   /* === Foreground & Background TOKENS === */
   --t3di__color-foreground: hsl(var(--primary-hue), 4%, 97.5%);
   --t3di__color-background: hsl(var(--primary-hue), 6%, 10%);
   --t3di__color-foreground-inverse: hsl(var(--primary-hue), 15%, 15%);
   --t3di__color-background-brand: var(--t3di__color-primary-1);

   --t3di__text-default: var(--t3di__color-foreground);
   --t3di__text-inverse: var(--t3di__color-foreground-inverse);
   --t3di__text-subtle: var(--t3di__color-surface-8);
   --t3di__text-label: color-mix(in srgb, var(--t3di__color-foreground) 80%, transparent);
   --t3di__text-selected: color-mix(in srgb, var(--t3di__color-primary-1) 50%, var(--t3di__color-foreground) 50%);
   --t3di__text-placeholder: color-mix(in srgb, var(--t3di__color-foreground) 50%, transparent);
   --t3di__text-brand: var(--t3di__color-primary-3);

   /* === Border TOKENS === */
   --t3di__border-default: var(--t3di__color-surface-10);
   --t3di__border-subtle: var(--t3di__color-surface-16);
   --t3di__border-strong: var(--t3di__color-foreground);
   --t3di__border-brand: color-mix(in srgb, var(--t3di__color-primary-1) 50%, var(--t3di__color-background) 50%);
   --t3di__border-card: var(--t3di__color-surface-15);
   --t3di__border-card-alt: var(--t3di__color-surface-15);
   --t3di__border-dot: var(--t3di__color-surface-18);


   /* === Button TOKENS === */
   /* Primary Button */
   --t3di__button-primary-background: var(--t3di__color-primary-3);
   --t3di__button-primary-color: color-mix(in srgb, var(--t3di__color-primary-4) 10%, var(--t3di__color-background) 99%);
   --t3di__button-primary-border: color-mix(in srgb, var(--t3di__border-strong) 100%, transparent 100%);

   /* Secondary Button */
   --t3di__button-secondary-background: var(--t3di__color-secondary-4);
   --t3di__button-secondary-color: var(--t3di__text-inverse);

   /* Danger Button */
   --t3di__button-danger-background: var(--t3di__color-quinary-8);

   /* Warning Button */
   --t3di__button-warning-background: var(--t3di__color-quaternary-3);

   /* ===== link TOKENS ===== */
   --t3di__link: var(--t3di__text-default);
   --t3di__link-primary: var(--t3di__color-primary-4);
   --t3di__link-primary-selected: var(--t3di__color-primary-4);
   --t3di__link-primary-disabled: var(--t3di__color-primary-4);
}


.text-muted-foreground {
   color: var(--t3di__text-subtle);
}