/* DKG-INFONETZ Design Tokens — generated from dkg-infonetz-tokens.json */

/* ============================================================
   PRIMITIVES — :root
   ============================================================ */
:root {

  /* color / brand */
  --color-brand-050: #EEF3FA;
  --color-brand-100: #D6E1F2;
  --color-brand-200: #B0C4E4;
  --color-brand-300: #82A0D2;
  --color-brand-400: #5B7EBE;
  --color-brand-500: #4A6FB4;
  --color-brand-600: #3B61AA;
  --color-brand-700: #324F8A;
  --color-brand-800: #283E6C;
  --color-brand-900: #1F2F50;
  --color-brand-950: #141E33;

  /* color / brand-light (sky-blue, used as interactive brand in dark mode) */
  --color-brand-light-050: #F0F9FF;
  --color-brand-light-100: #DFF2FE;
  --color-brand-light-200: #B8E6FE;
  --color-brand-light-300: #74D4FF;
  --color-brand-light-400: #00BCFF;
  --color-brand-light-500: #00A6F4;
  --color-brand-light-600: #0586D2;
  --color-brand-light-700: #0069A8;
  --color-brand-light-800: #00598A;
  --color-brand-light-900: #024A70;
  --color-brand-light-950: #052F4A;

  /* color / slate */
  --color-slate-050: #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CAD5E2;
  --color-slate-400: #90A1B9;
  --color-slate-500: #62748E;
  --color-slate-600: #45556C;
  --color-slate-700: #314158;
  --color-slate-800: #1D293D;
  --color-slate-900: #131C34;
  --color-slate-950: #020618;

  /* color / gray */
  --color-gray-050: #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DC;
  --color-gray-400: #99A1AF;
  --color-gray-500: #6A7282;
  --color-gray-600: #4A5565;
  --color-gray-700: #333E4F;
  --color-gray-800: #1E2939;
  --color-gray-900: #101828;
  --color-gray-950: #030712;

  /* color / zinc */
  --color-zinc-050: #FAFAFA;
  --color-zinc-100: #F4F4F5;
  --color-zinc-200: #E4E4E7;
  --color-zinc-300: #D4D4D8;
  --color-zinc-400: #9F9FA9;
  --color-zinc-500: #71717B;
  --color-zinc-600: #52525C;
  --color-zinc-700: #3F3F46;
  --color-zinc-800: #27272A;
  --color-zinc-900: #18181B;
  --color-zinc-950: #09090B;

  /* color / neutral */
  --color-neutral-050: #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #E5E5E5;
  --color-neutral-300: #D4D4D4;
  --color-neutral-400: #A1A1A1;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0A0A0A;

  /* color / stone */
  --color-stone-050: #FAFAF9;
  --color-stone-100: #F5F5F4;
  --color-stone-200: #E7E5E4;
  --color-stone-300: #D6D3D1;
  --color-stone-400: #A6A09B;
  --color-stone-500: #79716B;
  --color-stone-600: #57534D;
  --color-stone-700: #44403B;
  --color-stone-800: #292524;
  --color-stone-900: #1C1917;
  --color-stone-950: #0C0A09;

  /* color / green */
  --color-green-050: #FBFDF9;
  --color-green-100: #E3EFDA;
  --color-green-200: #CBE1BA;
  --color-green-300: #B1D397;
  --color-green-400: #9BC575;
  --color-green-500: #6BB34D;
  --color-green-600: #42A62A;
  --color-green-700: #398F24;
  --color-green-800: #30781E;
  --color-green-900: #276219;
  --color-green-950: #1E4B13;

  /* color / emerald */
  --color-emerald-050: #ECFDF5;
  --color-emerald-100: #D0FAE5;
  --color-emerald-200: #A4F4CF;
  --color-emerald-300: #5EE9B5;
  --color-emerald-400: #00D492;
  --color-emerald-500: #00BC7D;
  --color-emerald-600: #009966;
  --color-emerald-700: #007A55;
  --color-emerald-800: #006045;
  --color-emerald-900: #004F3B;
  --color-emerald-950: #002C22;

  /* color / lime */
  --color-lime-050: #FCFDF9;
  --color-lime-100: #E8F3D9;
  --color-lime-200: #D4E8B8;
  --color-lime-300: #B7D794;
  --color-lime-400: #9AC671;
  --color-lime-500: #7CB64E;
  --color-lime-600: #5FA52A;
  --color-lime-700: #4E8A22;
  --color-lime-800: #3C6E1B;
  --color-lime-900: #2C5014;
  --color-lime-950: #1B310C;

  /* color / teal */
  --color-teal-050: #FAFDFA;
  --color-teal-100: #DEEFDD;
  --color-teal-200: #C2E1C0;
  --color-teal-300: #9DD1A5;
  --color-teal-400: #78C08A;
  --color-teal-500: #54B070;
  --color-teal-600: #2FA055;
  --color-teal-700: #268748;
  --color-teal-800: #1E6E3A;
  --color-teal-900: #16502A;
  --color-teal-950: #0E311A;

  /* color / rose */
  --color-rose-050: #FBF2F5;
  --color-rose-100: #EECCD9;
  --color-rose-200: #E1A6BE;
  --color-rose-300: #D480A2;
  --color-rose-400: #C75A86;
  --color-rose-500: #C14379;
  --color-rose-600: #B81867;
  --color-rose-700: #9F1559;
  --color-rose-800: #85114B;
  --color-rose-900: #6C0E3D;
  --color-rose-950: #530B2E;

  /* color / red */
  --color-red-050: #FEF2F2;
  --color-red-100: #FFE2E2;
  --color-red-200: #FFC9C9;
  --color-red-300: #FFA2A2;
  --color-red-400: #FF6467;
  --color-red-500: #FB2C36;
  --color-red-600: #E7000B;
  --color-red-700: #C10007;
  --color-red-800: #9F0712;
  --color-red-900: #82181A;
  --color-red-950: #460809;

  /* color / pink */
  --color-pink-050: #FDF7FA;
  --color-pink-100: #F6D8E6;
  --color-pink-200: #EFBAD2;
  --color-pink-300: #E89BBE;
  --color-pink-400: #DD77A4;
  --color-pink-500: #D15489;
  --color-pink-600: #C6306F;
  --color-pink-700: #A2205A;
  --color-pink-800: #7E1145;
  --color-pink-900: #5B0C32;
  --color-pink-950: #39081F;

  /* color / fuchsia */
  --color-fuchsia-050: #FCF6FA;
  --color-fuchsia-100: #F2D6E9;
  --color-fuchsia-200: #E8B5D7;
  --color-fuchsia-300: #DE94C6;
  --color-fuchsia-400: #CF6BAC;
  --color-fuchsia-500: #BF4392;
  --color-fuchsia-600: #B01A78;
  --color-fuchsia-700: #8F1564;
  --color-fuchsia-800: #6E1050;
  --color-fuchsia-900: #500C3A;
  --color-fuchsia-950: #310724;

  /* color / purple */
  --color-purple-050: #FBF7FB;
  --color-purple-100: #EAD8ED;
  --color-purple-200: #DABADE;
  --color-purple-300: #C99BD0;
  --color-purple-400: #B575B7;
  --color-purple-500: #A2509F;
  --color-purple-600: #8E2A86;
  --color-purple-700: #74226E;
  --color-purple-800: #5A1A56;
  --color-purple-900: #41133E;
  --color-purple-950: #280C27;

  /* color / sky */
  --color-sky-050: #FAFCFE;
  --color-sky-100: #DBEAF9;
  --color-sky-200: #BCD9F4;
  --color-sky-300: #9CC2EB;
  --color-sky-400: #7BACE1;
  --color-sky-500: #5B95D8;
  --color-sky-600: #3B7AC4;
  --color-sky-700: #3063A1;
  --color-sky-800: #244C7E;
  --color-sky-900: #1A375B;
  --color-sky-950: #102239;

  /* color / cyan */
  --color-cyan-050: #F9FBFD;
  --color-cyan-100: #D6E5F3;
  --color-cyan-200: #B3CFE8;
  --color-cyan-300: #96B9DA;
  --color-cyan-400: #79A3CC;
  --color-cyan-500: #5C8DBE;
  --color-cyan-600: #3F77B0;
  --color-cyan-700: #326091;
  --color-cyan-800: #264A72;
  --color-cyan-900: #1C3653;
  --color-cyan-950: #112133;

  /* color / indigo */
  --color-indigo-050: #F7F8FC;
  --color-indigo-100: #D8DEEF;
  --color-indigo-200: #B9C4E3;
  --color-indigo-300: #9AAAD6;
  --color-indigo-400: #7A8CC3;
  --color-indigo-500: #5A6DAF;
  --color-indigo-600: #3A4F9C;
  --color-indigo-700: #2E3E80;
  --color-indigo-800: #232E63;
  --color-indigo-900: #192148;
  --color-indigo-950: #10152D;

  /* color / accent */
  --color-accent-050: #FEF4EC;
  --color-accent-100: #FCE3CE;
  --color-accent-200: #F9C79E;
  --color-accent-300: #F5A86A;
  --color-accent-400: #F08C3C;
  --color-accent-500: #EF7E20;
  --color-accent-600: #EC7405;
  --color-accent-700: #C25E04;
  --color-accent-800: #9A4B06;
  --color-accent-900: #7C3D09;
  --color-accent-950: #431F04;

  /* color / orange */
  --color-orange-050: #FFF8F1;
  --color-orange-100: #FEECDC;
  --color-orange-200: #FCD9BD;
  --color-orange-300: #FDBA8C;
  --color-orange-400: #FF8A4C;
  --color-orange-500: #FF5A1F;
  --color-orange-600: #D03801;
  --color-orange-700: #B43403;
  --color-orange-800: #8A2C0D;
  --color-orange-900: #771D1D;
  --color-orange-950: #441306;

  /* color / warning */
  --color-warning-050: #FEFCE8;
  --color-warning-100: #FEF9C2;
  --color-warning-200: #FFF085;
  --color-warning-300: #FCD34D;
  --color-warning-400: #F5C513;
  --color-warning-500: #EAB308;
  --color-warning-600: #CA9A04;
  --color-warning-700: #A17C07;
  --color-warning-800: #85640D;
  --color-warning-900: #714F11;
  --color-warning-950: #422A06;

  /* color / amber */
  --color-amber-050: #FEFCE8;
  --color-amber-100: #FEF9C2;
  --color-amber-200: #FFF085;
  --color-amber-300: #FCD34D;
  --color-amber-400: #F5C513;
  --color-amber-500: #EAB308;
  --color-amber-600: #CA9A04;
  --color-amber-700: #A17C07;
  --color-amber-800: #85640D;
  --color-amber-900: #714F11;
  --color-amber-950: #422A06;

  /* spacing */
  --spacing-0: 0px;
  --spacing-px: 1px;
  --spacing-05: 2px;
  --spacing-1: 4px;
  --spacing-15: 6px;
  --spacing-2: 8px;
  --spacing-25: 10px;
  --spacing-3: 12px;
  --spacing-35: 14px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* font family */
  --font-family-sans: Meta Pro;
}

/* ============================================================
   THEME: light — :root
   ============================================================ */
:root {

  /* text */
  --color-text-heading: var(--color-slate-900);
  --color-text-body: var(--color-slate-600);
  --color-text-body-subtle: var(--color-slate-500);
  --color-text-fg-brand: var(--color-brand-700);
  --color-text-fg-success: var(--color-emerald-700);
  --color-text-fg-danger: var(--color-red-700);
  --color-text-fg-warning: var(--color-warning-900);
  --color-text-fg-accent: var(--color-accent-700);
  --color-text-fg-disabled: var(--color-slate-400);

  /* background */
  --color-background-primary: #FFFFFF;
  --color-background-secondary: var(--color-slate-050);
  --color-background-tertiary: var(--color-slate-100);
  --color-background-brand: var(--color-brand-600);
  --color-background-brand-strong: var(--color-brand-800);
  --color-background-success: var(--color-emerald-700);
  --color-background-success-soft: var(--color-emerald-050);
  --color-background-danger: var(--color-red-600);
  --color-background-danger-soft: var(--color-red-050);
  --color-background-warning: var(--color-warning-500);
  --color-background-warning-soft: var(--color-warning-050);
  --color-background-accent: var(--color-accent-600);
  --color-background-accent-soft: var(--color-accent-050);

  /* border */
  --color-border-base: var(--color-slate-200);
  --color-border-strong: var(--color-slate-400);
  --color-border-brand: var(--color-brand-600);
  --color-border-focus: var(--color-brand-600);
  --color-border-success: var(--color-emerald-700);
  --color-border-danger: var(--color-red-600);
  --color-border-warning: var(--color-warning-600);
  --color-border-accent: var(--color-accent-600);
}

/* ============================================================
   THEME: dark — [data-theme='dark']
   ============================================================ */
[data-theme='dark'] {

  /* text */
  --color-text-heading: #FFFFFF;
  --color-text-body: var(--color-slate-400);
  --color-text-body-subtle: var(--color-slate-400);
  --color-text-fg-brand: var(--color-brand-light-500);
  --color-text-fg-success: var(--color-emerald-600);
  --color-text-fg-danger: var(--color-red-500);
  --color-text-fg-warning: var(--color-warning-300);
  --color-text-fg-accent: var(--color-accent-400);
  --color-text-fg-disabled: var(--color-slate-600);

  /* background */
  --color-background-primary: var(--color-slate-950);
  --color-background-secondary: var(--color-slate-950);
  --color-background-tertiary: var(--color-slate-800);
  --color-background-brand: var(--color-brand-light-400);
  --color-background-brand-strong: var(--color-brand-light-600);
  --color-background-success: var(--color-emerald-600);
  --color-background-success-soft: var(--color-emerald-950);
  --color-background-danger: var(--color-red-700);
  --color-background-danger-soft: var(--color-red-950);
  --color-background-warning: var(--color-warning-600);
  --color-background-warning-soft: var(--color-warning-950);
  --color-background-accent: var(--color-accent-500);
  --color-background-accent-soft: var(--color-accent-950);

  /* border */
  --color-border-base: var(--color-slate-800);
  --color-border-strong: var(--color-slate-600);
  --color-border-brand: var(--color-brand-light-500);
  --color-border-focus: var(--color-brand-light-400);
  --color-border-success: var(--color-emerald-600);
  --color-border-danger: var(--color-red-600);
  --color-border-warning: var(--color-warning-500);
  --color-border-accent: var(--color-accent-500);
}