/* ============================================================
   Atlassian Design System (ADS) — Design Tokens
   Vanilla-CSS-Variablen. Kein Build-Tool, kein Framework.
   Werte nah an https://atlassian.design (Foundations).
   Standard-Theme = hell (Default). Dark via [data-ads-theme="dark"].
   ============================================================ */

:root {
  /* ---------- Farbpalette: Neutral (N0–N900) ---------- */
  --ads-N0:   #FFFFFF;
  --ads-N10:  #FAFBFC;
  --ads-N20:  #F4F5F7;
  --ads-N30:  #EBECF0;
  --ads-N40:  #DFE1E6;
  --ads-N50:  #C1C7D0;
  --ads-N60:  #B3BAC5;
  --ads-N70:  #A5ADBA;
  --ads-N80:  #97A0AF;
  --ads-N90:  #8993A4;
  --ads-N100: #7A869A;
  --ads-N200: #6B778C;
  --ads-N300: #5E6C84;
  --ads-N400: #505F79;
  --ads-N500: #42526E;
  --ads-N600: #344563;
  --ads-N700: #253858;
  --ads-N800: #172B4D;
  --ads-N900: #091E42;

  /* ---------- Blue / Brand (B50–B500) ---------- */
  --ads-B50:  #DEEBFF;
  --ads-B75:  #B3D4FF;
  --ads-B100: #4C9AFF;
  --ads-B200: #2684FF;
  --ads-B300: #0065FF;
  --ads-B400: #0052CC;
  --ads-B500: #0747A6;

  /* ---------- Teal (T50–T500) ---------- */
  --ads-T50:  #E6FCFF;
  --ads-T75:  #B3F5FF;
  --ads-T100: #79E2F2;
  --ads-T200: #00C7E6;
  --ads-T300: #00B8D9;
  --ads-T400: #00A3BF;
  --ads-T500: #008DA6;

  /* ---------- Green (G50–G500) ---------- */
  --ads-G50:  #E3FCEF;
  --ads-G75:  #ABF5D1;
  --ads-G100: #79F2C0;
  --ads-G200: #57D9A3;
  --ads-G300: #36B37E;
  --ads-G400: #00875A;
  --ads-G500: #006644;

  /* ---------- Yellow (Y50–Y500) ---------- */
  --ads-Y50:  #FFFAE6;
  --ads-Y75:  #FFF0B3;
  --ads-Y100: #FFE380;
  --ads-Y200: #FFC400;
  --ads-Y300: #FFAB00;
  --ads-Y400: #FF991F;
  --ads-Y500: #FF8B00;

  /* ---------- Red (R50–R500) ---------- */
  --ads-R50:  #FFEBE6;
  --ads-R75:  #FFBDAD;
  --ads-R100: #FF8F73;
  --ads-R200: #FF7452;
  --ads-R300: #FF5630;
  --ads-R400: #DE350B;
  --ads-R500: #BF2600;

  /* ---------- Purple (P50–P500) ---------- */
  --ads-P50:  #EAE6FF;
  --ads-P75:  #C0B6F2;
  --ads-P100: #998DD9;
  --ads-P200: #8777D9;
  --ads-P300: #6554C0;
  --ads-P400: #5243AA;
  --ads-P500: #403294;

  /* ============================================================
     Semantische Tokens (Light-Theme = Default)
     ============================================================ */

  /* Brand / Primary */
  --ads-color-brand:          var(--ads-B400);
  --ads-color-brand-hover:    var(--ads-B300);
  --ads-color-brand-pressed:  var(--ads-B500);
  --ads-color-brand-subtle:   var(--ads-B50);
  --ads-color-brand-bold:     var(--ads-B500);

  /* Success */
  --ads-color-success:        var(--ads-G400);
  --ads-color-success-hover:  var(--ads-G500);
  --ads-color-success-subtle: var(--ads-G50);
  --ads-color-success-bold:   var(--ads-G500);
  --ads-color-success-text:   var(--ads-G500);

  /* Warning */
  --ads-color-warning:        var(--ads-Y400);
  --ads-color-warning-hover:  var(--ads-Y500);
  --ads-color-warning-subtle: var(--ads-Y50);
  --ads-color-warning-bold:   var(--ads-Y500);
  --ads-color-warning-text:   #974F00;

  /* Danger */
  --ads-color-danger:         var(--ads-R400);
  --ads-color-danger-hover:   var(--ads-R500);
  --ads-color-danger-pressed: var(--ads-R500);
  --ads-color-danger-subtle:  var(--ads-R50);
  --ads-color-danger-bold:    var(--ads-R500);
  --ads-color-danger-text:    var(--ads-R500);

  /* Info */
  --ads-color-info:           var(--ads-B400);
  --ads-color-info-subtle:    var(--ads-B50);
  --ads-color-info-bold:      var(--ads-B500);
  --ads-color-info-text:      var(--ads-B500);

  /* Discovery */
  --ads-color-discovery:        var(--ads-P300);
  --ads-color-discovery-subtle: var(--ads-P50);
  --ads-color-discovery-bold:   var(--ads-P500);
  --ads-color-discovery-text:   var(--ads-P500);

  /* ---------- Surfaces / Background ---------- */
  --ads-surface:            var(--ads-N0);
  --ads-surface-sunken:     var(--ads-N20);
  --ads-surface-raised:     var(--ads-N0);
  --ads-surface-overlay:    var(--ads-N0);
  --ads-surface-hovered:    var(--ads-N20);
  --ads-surface-pressed:    var(--ads-N30);
  --ads-background:         var(--ads-N20);
  --ads-background-neutral: var(--ads-N30);

  /* ---------- Text ---------- */
  --ads-text:           var(--ads-N800);
  --ads-text-subtle:    var(--ads-N300);
  --ads-text-subtlest:  var(--ads-N200);
  --ads-text-inverse:   var(--ads-N0);
  --ads-text-disabled:  var(--ads-N70);
  --ads-text-brand:     var(--ads-B400);
  --ads-text-link:      var(--ads-B400);

  /* ---------- Border ---------- */
  --ads-border:          var(--ads-N40);
  --ads-border-bold:     var(--ads-N100);
  --ads-border-subtle:   var(--ads-N30);
  --ads-border-focused:  var(--ads-B200);
  --ads-border-input:    var(--ads-N40);

  /* ============================================================
     Typografie-Scale
     ============================================================ */
  --ads-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                     Oxygen, Ubuntu, "Fira Sans", "Droid Sans",
                     "Helvetica Neue", sans-serif;
  --ads-font-family-mono: "SFMono-Regular", "Consolas", "Liberation Mono",
                          "Menlo", Courier, monospace;

  --ads-font-size-50:  11px;  /* caption / kleinste */
  --ads-font-size-75:  12px;  /* metadata / small */
  --ads-font-size-100: 14px;  /* body (default)    */
  --ads-font-size-200: 16px;  /* large body        */
  --ads-font-size-300: 20px;  /* h600 / heading sm */
  --ads-font-size-400: 24px;  /* h700 / heading md */
  --ads-font-size-500: 29px;  /* h800 / heading lg */
  --ads-font-size-600: 35px;  /* h900 / display    */

  --ads-font-weight-regular:  400;
  --ads-font-weight-medium:   500;
  --ads-font-weight-semibold: 600;
  --ads-font-weight-bold:     700;

  --ads-line-height-100: 16px;
  --ads-line-height-200: 20px;
  --ads-line-height-300: 24px;
  --ads-line-height-400: 28px;
  --ads-line-height-500: 32px;
  --ads-line-height-600: 40px;

  /* ============================================================
     Spacing-Scale (4px-Basis)
     ============================================================ */
  --ads-space-0:    0;
  --ads-space-025:  2px;
  --ads-space-050:  4px;
  --ads-space-075:  6px;
  --ads-space-100:  8px;
  --ads-space-150:  12px;
  --ads-space-200:  16px;
  --ads-space-250:  20px;
  --ads-space-300:  24px;
  --ads-space-400:  32px;
  --ads-space-500:  40px;
  --ads-space-600:  48px;
  --ads-space-800:  64px;
  --ads-space-1000: 80px;

  /* ============================================================
     Elevation / Box-Shadow
     ============================================================ */
  --ads-shadow-raised:
      0 1px 1px rgba(9, 30, 66, 0.25),
      0 0 1px rgba(9, 30, 66, 0.31);
  --ads-shadow-overflow:
      0 0 0 1px rgba(9, 30, 66, 0.08),
      0 2px 4px 1px rgba(9, 30, 66, 0.25);
  --ads-shadow-overlay:
      0 4px 8px -2px rgba(9, 30, 66, 0.25),
      0 0 1px rgba(9, 30, 66, 0.31);
  --ads-shadow-focus: 0 0 0 2px var(--ads-border-focused);

  /* ============================================================
     Border-Radius / Shape
     ============================================================ */
  --ads-radius-100: 3px;   /* Standard ADS-Radius */
  --ads-radius-050: 2px;
  --ads-radius-200: 4px;
  --ads-radius-300: 8px;
  --ads-radius-400: 12px;
  --ads-radius-pill: 100px;
  --ads-radius-circle: 50%;

  --ads-border-width:      1px;
  --ads-border-width-bold: 2px;
}

/* ============================================================
   Dark-Theme — als zweites Token-Set vorbereitet.
   Aktivierung: <html data-ads-theme="dark"> oder auf Container.
   ============================================================ */
[data-ads-theme="dark"] {
  /* Dark Neutral-Ramp (ADS DN-Skala, vereinfacht) */
  --ads-color-brand:          #579DFF;
  --ads-color-brand-hover:    #85B8FF;
  --ads-color-brand-pressed:  #2684FF;
  --ads-color-brand-subtle:   #082145;
  --ads-color-brand-bold:     #579DFF;

  --ads-color-success:        #4BCE97;
  --ads-color-success-hover:  #7EE2B8;
  --ads-color-success-subtle: #0C2A1E;
  --ads-color-success-bold:   #4BCE97;
  --ads-color-success-text:   #7EE2B8;

  --ads-color-warning:        #F5CD47;
  --ads-color-warning-hover:  #E2B203;
  --ads-color-warning-subtle: #2E2200;
  --ads-color-warning-bold:   #F5CD47;
  --ads-color-warning-text:   #F5CD47;

  --ads-color-danger:         #F87168;
  --ads-color-danger-hover:   #FD9891;
  --ads-color-danger-pressed: #FF5630;
  --ads-color-danger-subtle:  #42221F;
  --ads-color-danger-bold:    #F87168;
  --ads-color-danger-text:    #FD9891;

  --ads-color-info:           #579DFF;
  --ads-color-info-subtle:    #082145;
  --ads-color-info-bold:      #579DFF;
  --ads-color-info-text:      #85B8FF;

  --ads-color-discovery:        #9F8FEF;
  --ads-color-discovery-subtle: #1D1A33;
  --ads-color-discovery-bold:   #9F8FEF;
  --ads-color-discovery-text:   #B8ACF6;

  --ads-surface:            #1D2125;
  --ads-surface-sunken:     #161A1D;
  --ads-surface-raised:     #22272B;
  --ads-surface-overlay:    #282E33;
  --ads-surface-hovered:    #2C333A;
  --ads-surface-pressed:    #38414A;
  --ads-background:         #161A1D;
  --ads-background-neutral: #2C333A;

  --ads-text:           #C7D1DB;
  --ads-text-subtle:    #9FADBC;
  --ads-text-subtlest:  #8C9BAB;
  --ads-text-inverse:   #1D2125;
  --ads-text-disabled:  #5A6977;
  --ads-text-brand:     #579DFF;
  --ads-text-link:      #579DFF;

  --ads-border:          #38414A;
  --ads-border-bold:     #596773;
  --ads-border-subtle:   #2C333A;
  --ads-border-focused:  #579DFF;
  --ads-border-input:    #496074;

  --ads-shadow-raised:
      0 1px 1px rgba(3, 4, 4, 0.5),
      0 0 1px rgba(3, 4, 4, 0.5);
  --ads-shadow-overflow:
      0 0 0 1px rgba(3, 4, 4, 0.3),
      0 2px 4px 1px rgba(3, 4, 4, 0.5);
  --ads-shadow-overlay:
      0 4px 8px -2px rgba(3, 4, 4, 0.5),
      0 0 1px rgba(3, 4, 4, 0.5);
}

/* ============================================================
   Multi-Instance Operations UI Kit
   Careli-Web-App-aligned semantic layer. The existing --ads-* API is
   retained so all current SPA views consume one token source.
   ============================================================ */
:root {
  --mid-pink: #ff4f79;
  --mid-pink-brush: #ffdce5;
  --mid-berry: #cc0066;
  --mid-cerulean: #2b6c8c;
  --mid-alice: #e0edf5;
  --mid-linen: #e3e4dd;
  --mid-success: #10b981;
  --mid-warning: #f59e0b;
  --mid-danger: #d94b63;
  --mid-slate-900: #0f172a;
  --mid-slate-800: #1e293b;
  --mid-slate-700: #334155;
  --mid-slate-600: #475569;
  --mid-slate-500: #64748b;
  --mid-slate-200: #e2e8f0;
  --mid-slate-100: #f1f5f9;
  --mid-slate-50: #f8fafc;

  --ads-N0: #ffffff;
  --ads-N10: #f8fafc;
  --ads-N20: #f1f5f9;
  --ads-N30: #eaf0f4;
  --ads-N40: #e3e4dd;
  --ads-N50: #cbd5e1;
  --ads-N100: #94a3b8;
  --ads-N200: #64748b;
  --ads-N300: #475569;
  --ads-N400: #334155;
  --ads-N500: #1e293b;
  --ads-N600: #172033;
  --ads-N700: #0f172a;
  --ads-N800: #0f172a;
  --ads-N900: #080f1d;
  --ads-B50: #e0edf5;
  --ads-B75: #c4ddea;
  --ads-B100: #8cb9cf;
  --ads-B200: #5791af;
  --ads-B300: #2b6c8c;
  --ads-B400: #2b6c8c;
  --ads-B500: #1e536d;
  --ads-G50: rgba(16, 185, 129, 0.10);
  --ads-G400: #10b981;
  --ads-G500: #07885f;
  --ads-Y50: rgba(245, 158, 11, 0.12);
  --ads-Y400: #f59e0b;
  --ads-Y500: #c76b08;
  --ads-R50: rgba(217, 75, 99, 0.10);
  --ads-R400: #d94b63;
  --ads-R500: #ad2e44;
  --ads-P50: rgba(255, 79, 121, 0.10);
  --ads-P300: #ff4f79;
  --ads-P500: #cc0066;

  --ads-color-brand: var(--mid-pink);
  --ads-color-brand-hover: var(--mid-berry);
  --ads-color-brand-pressed: var(--mid-berry);
  --ads-color-brand-subtle: rgba(255, 79, 121, 0.10);
  --ads-color-brand-bold: var(--mid-berry);
  --ads-color-success: var(--mid-success);
  --ads-color-success-hover: #07885f;
  --ads-color-success-subtle: rgba(16, 185, 129, 0.10);
  --ads-color-success-bold: #07885f;
  --ads-color-success-text: #087a58;
  --ads-color-warning: var(--mid-warning);
  --ads-color-warning-hover: #c76b08;
  --ads-color-warning-subtle: rgba(245, 158, 11, 0.12);
  --ads-color-warning-bold: #c76b08;
  --ads-color-warning-text: #9a5705;
  --ads-color-danger: var(--mid-danger);
  --ads-color-danger-hover: #ad2e44;
  --ads-color-danger-pressed: #8f2336;
  --ads-color-danger-subtle: rgba(217, 75, 99, 0.10);
  --ads-color-danger-bold: #ad2e44;
  --ads-color-danger-text: #a52c42;
  --ads-color-info: var(--mid-cerulean);
  --ads-color-info-subtle: var(--mid-alice);
  --ads-color-info-bold: var(--mid-cerulean);
  --ads-color-info-text: var(--mid-cerulean);
  --ads-color-discovery: var(--mid-pink);
  --ads-color-discovery-subtle: rgba(255, 79, 121, 0.10);
  --ads-color-discovery-bold: var(--mid-berry);
  --ads-color-discovery-text: var(--mid-berry);
  --ads-surface: #ffffff;
  --ads-surface-sunken: var(--mid-slate-50);
  --ads-surface-raised: #ffffff;
  --ads-surface-overlay: #ffffff;
  --ads-surface-hovered: rgba(224, 237, 245, 0.55);
  --ads-surface-pressed: var(--mid-alice);
  --ads-background: var(--mid-alice);
  --ads-background-neutral: var(--mid-slate-100);
  --ads-text: var(--mid-slate-800);
  --ads-text-subtle: var(--mid-slate-600);
  --ads-text-subtlest: var(--mid-slate-500);
  --ads-text-inverse: #ffffff;
  --ads-text-disabled: #94a3b8;
  --ads-text-brand: var(--mid-cerulean);
  --ads-text-link: var(--mid-cerulean);
  --ads-border: var(--mid-linen);
  --ads-border-bold: #b8c7cf;
  --ads-border-subtle: #edf0ed;
  --ads-border-focused: var(--mid-pink);
  --ads-border-input: var(--mid-linen);
  --ads-font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ads-font-size-50: 10px;
  --ads-font-size-75: 12px;
  --ads-font-size-100: 14px;
  --ads-font-size-200: 16px;
  --ads-font-size-300: 17px;
  --ads-font-size-400: 20px;
  --ads-font-size-500: 24px;
  --ads-font-size-600: 32px;
  --ads-font-weight-medium: 600;
  --ads-font-weight-semibold: 700;
  --ads-font-weight-bold: 800;
  --ads-line-height-100: 18px;
  --ads-line-height-200: 22px;
  --ads-line-height-300: 24px;
  --ads-line-height-400: 28px;
  --ads-line-height-500: 32px;
  --ads-line-height-600: 40px;
  --ads-shadow-raised: 0 6px 16px rgba(15, 23, 42, 0.08);
  --ads-shadow-overflow: 0 8px 24px rgba(43, 108, 140, 0.12);
  --ads-shadow-overlay: 0 16px 48px rgba(15, 23, 42, 0.14);
  --ads-shadow-focus: 0 0 0 3px rgba(255, 79, 121, 0.24);
  --ads-radius-050: 4px;
  --ads-radius-100: 8px;
  --ads-radius-200: 10px;
  --ads-radius-300: 12px;
  --ads-radius-400: 24px;
}

html[data-ads-theme="dark"] {
  --ads-color-brand: #ff6f92;
  --ads-color-brand-hover: #ff9ab2;
  --ads-color-brand-pressed: #cc0066;
  --ads-color-brand-subtle: rgba(255, 111, 146, 0.16);
  --ads-color-success: #5ed4ab;
  --ads-color-success-subtle: rgba(94, 212, 171, 0.14);
  --ads-color-success-text: #8ae8c7;
  --ads-color-warning: #fbbf55;
  --ads-color-warning-subtle: rgba(251, 191, 85, 0.14);
  --ads-color-warning-text: #fdd890;
  --ads-color-danger: #f17b91;
  --ads-color-danger-subtle: rgba(241, 123, 145, 0.16);
  --ads-color-danger-text: #ffb6c4;
  --ads-color-info: #75b5d2;
  --ads-color-info-subtle: rgba(117, 181, 210, 0.16);
  --ads-color-info-text: #a9d7eb;
  --ads-surface: #16212b;
  --ads-surface-sunken: #0f1720;
  --ads-surface-raised: #1b2935;
  --ads-surface-overlay: #21313f;
  --ads-surface-hovered: #263a49;
  --ads-surface-pressed: #2d4556;
  --ads-background: #0f1720;
  --ads-background-neutral: #243542;
  --ads-text: #e7eef4;
  --ads-text-subtle: #b6c5d0;
  --ads-text-subtlest: #8ea4b4;
  --ads-text-inverse: #0f1720;
  --ads-text-disabled: #60798a;
  --ads-text-brand: #a9d7eb;
  --ads-text-link: #a9d7eb;
  --ads-border: #304451;
  --ads-border-bold: #496273;
  --ads-border-subtle: #253946;
  --ads-border-focused: #ff6f92;
  --ads-border-input: #496273;
  --ads-shadow-raised: 0 6px 16px rgba(0, 0, 0, 0.30);
  --ads-shadow-overflow: 0 8px 24px rgba(0, 0, 0, 0.34);
  --ads-shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.44);
}