/* =============================================================================
   D365 UCI DESIGN SYSTEM — TOKENS
   Kaynak: Microsoft Dynamics 365 (Unified Client Interface) canlı DOM ölçümü
   Temel: Fluent UI v9 `webLightTheme` + D365 UCI shell override'ları
   Ölçüm tarihi: 2026-09-08 | Ortam: nefprod.crm4.dynamics.com (Sales app)
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     1. BRAND (Fluent "Blue" ramp — D365'in tek aksan rengi)
     --------------------------------------------------------------------------- */
  --colorBrandBackground:            #0f6cbd;  /* primary buton zemini */
  --colorBrandBackgroundHover:       #115ea3;
  --colorBrandBackgroundPressed:     #0c3b5e;
  --colorBrandBackgroundSelected:    #0f548c;
  --colorBrandBackground2:           #ebf3fc;  /* açık mavi zemin (seçili satır, badge) */
  --colorBrandBackground2Hover:      #cfe4fa;
  --colorBrandBackground2Pressed:    #96c6fa;
  --colorBrandBackground3Static:     #0f548c;
  --colorBrandBackground4Static:     #0c3b5e;
  --colorBrandBackgroundInverted:    #ffffff;

  --colorBrandForeground1:           #0f6cbd;  /* ikon + link */
  --colorBrandForeground2:           #115ea3;
  --colorBrandForegroundLink:        #115ea3;
  --colorBrandForegroundLinkHover:   #0f548c;
  --colorBrandForegroundLinkPressed: #0c3b5e;
  --colorBrandForegroundInverted:    #479ef5;  /* koyu zemin üstünde link */

  --colorBrandStroke1:               #0f6cbd;  /* focus underline, seçili çerçeve */
  --colorBrandStroke2:               #b4d6fa;
  --colorBrandStroke2Hover:          #77b7f7;

  --colorCompoundBrandBackground:        #0f6cbd; /* checkbox/radio dolgusu */
  --colorCompoundBrandBackgroundHover:   #115ea3;
  --colorCompoundBrandBackgroundPressed: #0f548c;
  --colorCompoundBrandStroke:            #0f6cbd;
  --colorCompoundBrandStrokeHover:       #115ea3;

  /* ---------------------------------------------------------------------------
     2. NEUTRAL — ZEMİNLER
     Kural: Uygulama gövdesi #f0f0f0, içerik kartları #ffffff.
     --------------------------------------------------------------------------- */
  --colorNeutralBackground1:          #ffffff;  /* kart / yüzey (varsayılan) */
  --colorNeutralBackground1Hover:     #f5f5f5;
  --colorNeutralBackground1Pressed:   #e0e0e0;
  --colorNeutralBackground1Selected:  #ebebeb;
  --colorNeutralBackground2:          #fafafa;  /* grid host zemini */
  --colorNeutralBackground2Hover:     #f0f0f0;
  --colorNeutralBackground2Pressed:   #dbdbdb;
  --colorNeutralBackground2Selected:  #e6e6e6;
  --colorNeutralBackground3:          #f5f5f5;  /* INPUT ZEMİNİ (D365 imzası) */
  --colorNeutralBackground3Hover:     #ebebeb;
  --colorNeutralBackground3Pressed:   #d6d6d6;
  --colorNeutralBackground3Selected:  #e0e0e0;
  --colorNeutralBackground4:          #f0f0f0;  /* APP CANVAS / sitemap zemini */
  --colorNeutralBackground4Hover:     #fafafa;
  --colorNeutralBackground4Pressed:   #f5f5f5;
  --colorNeutralBackground5:          #ebebeb;
  --colorNeutralBackground6:          #e6e6e6;
  --colorNeutralBackgroundDisabled:   #f0f0f0;
  --colorNeutralBackgroundInverted:   #292929;
  --colorNeutralBackgroundStatic:     #333333;
  --colorNeutralBackgroundAlpha:      rgba(255,255,255,0.5);
  --colorNeutralBackgroundAlpha2:     rgba(255,255,255,0.8);

  --colorNeutralCardBackground:         #fafafa;
  --colorNeutralCardBackgroundHover:    #ffffff;
  --colorNeutralCardBackgroundPressed:  #f5f5f5;
  --colorNeutralCardBackgroundSelected: #ebebeb;
  --colorNeutralCardBackgroundDisabled: #f0f0f0;

  --colorSubtleBackground:          transparent; /* ikon/komut butonu varsayılanı */
  --colorSubtleBackgroundHover:     #f5f5f5;
  --colorSubtleBackgroundPressed:   #e0e0e0;
  --colorSubtleBackgroundSelected:  #ebebeb;
  --colorSubtleBackgroundLightAlphaHover:   rgba(255,255,255,0.7);
  --colorSubtleBackgroundLightAlphaPressed: rgba(255,255,255,0.5);
  --colorSubtleBackgroundInvertedHover:     rgba(0,0,0,0.1);
  --colorSubtleBackgroundInvertedPressed:   rgba(0,0,0,0.3);
  --colorSubtleBackgroundInvertedSelected:  rgba(0,0,0,0.2);

  --colorTransparentBackground: transparent;
  --colorBackgroundOverlay:     rgba(0,0,0,0.4);  /* Fluent varsayılan scrim   */
  --d365-overlay:               rgba(0,0,0,0.5);  /* D365'in FİİLİ scrim'i     */
  --colorScrollbarOverlay:      rgba(0,0,0,0.5);

  /* ---------------------------------------------------------------------------
     3. NEUTRAL — METİN
     --------------------------------------------------------------------------- */
  --colorNeutralForeground1:          #242424;  /* birincil metin, başlık */
  --colorNeutralForeground2:          #424242;  /* ikon, ikincil metin */
  --colorNeutralForeground2BrandHover:#0f6cbd;
  --colorNeutralForeground3:          #616161;  /* yardımcı metin */
  --colorNeutralForeground4:          #707070;  /* placeholder ("---") */
  --colorNeutralForegroundDisabled:   #bdbdbd;
  --colorNeutralForegroundInverted:   #ffffff;  /* koyu header üstü metin */
  --colorNeutralForegroundInvertedDisabled: rgba(255,255,255,0.4);
  --colorNeutralForegroundStaticInverted:   #ffffff;
  --d365-gridHeaderForeground:        rgba(0,0,0,0.54); /* grid kolon başlığı */

  /* ---------------------------------------------------------------------------
     4. NEUTRAL — ÇİZGİ / KENARLIK
     --------------------------------------------------------------------------- */
  --colorNeutralStroke1:                #d1d1d1;  /* buton kenarlığı */
  --colorNeutralStroke1Hover:           #c7c7c7;
  --colorNeutralStroke1Pressed:         #b3b3b3;
  --colorNeutralStroke1Selected:        #bdbdbd;
  --colorNeutralStroke2:                #e0e0e0;  /* grid satır ayracı */
  --colorNeutralStroke3:                #f0f0f0;  /* en zayıf ayraç */
  --colorNeutralStrokeSubtle:           #e0e0e0;
  --colorNeutralStrokeAccessible:       #616161;  /* input alt çizgisi (a11y) */
  --colorNeutralStrokeAccessibleHover:  #575757;
  --colorNeutralStrokeAccessiblePressed:#4d4d4d;
  --colorNeutralStrokeAccessibleSelected:#0f6cbd;
  --colorNeutralStrokeOnBrand:          #ffffff;
  --colorNeutralStrokeAlpha:            rgba(0,0,0,0.05);
  --colorTransparentStroke:             transparent;
  --colorStrokeFocus1:                  #ffffff;  /* 2 katmanlı focus: iç beyaz */
  --colorStrokeFocus2:                  #000000;  /* dış siyah */

  /* Skeleton / stencil */
  --colorNeutralStencil1: #e6e6e6;
  --colorNeutralStencil2: #fafafa;

  /* ---------------------------------------------------------------------------
     5. DURUM RENKLERİ
     --------------------------------------------------------------------------- */
  --colorStatusDangerBackground1:  #fdf3f4;  /* hata banner zemini */
  --colorStatusDangerBackground2:  #eeacb2;
  --colorStatusDangerBackground3:  #c50f1f;  /* dolu badge */
  --colorStatusDangerBorder1:      #eeacb2;
  --colorStatusDangerBorder2:      #c50f1f;
  --colorStatusDangerForeground1:  #b10e1c;
  --colorStatusDangerForeground3:  #c50f1f;
  --d365-requiredAsterisk:         #bc2f32;  /* zorunlu alan * rengi (fiili) */

  --colorStatusSuccessBackground1: #f1faf1;
  --colorStatusSuccessBackground2: #9fd89f;
  --colorStatusSuccessBackground3: #107c10;
  --colorStatusSuccessBorder1:     #9fd89f;
  --colorStatusSuccessForeground1: #0e700e;
  --colorStatusSuccessForeground3: #107c10;

  --colorStatusWarningBackground1: #fff9f5;
  --colorStatusWarningBackground2: #fdcfb4;
  --colorStatusWarningBackground3: #f7630c;
  --colorStatusWarningBorder1:     #fdcfb4;
  --colorStatusWarningForeground1: #bc4b09;
  --colorStatusWarningForeground3: #bc4b09;

  /* ---------------------------------------------------------------------------
     6. D365 SHELL ÖZEL RENKLERİ (tema ile değişir — tenant branding)
     --------------------------------------------------------------------------- */
  --d365-headerBackground: #021838;  /* üst bar — koyu lacivert */
  --d365-headerForeground: #ffffff;
  --d365-headerHeight:     48px;
  --d365-sitemapBackground:#f0f0f0;
  --d365-sitemapWidth:     200px;   /* açık */
  --d365-sitemapWidthCollapsed: 48px;
  --d365-appCanvas:        #f0f0f0;

  /* ---------------------------------------------------------------------------
     7. TİPOGRAFİ
     --------------------------------------------------------------------------- */
  --fontFamilyBase: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system,
                    BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --fontFamilyNumeric: Bahnschrift, 'Segoe UI', -apple-system, BlinkMacSystemFont,
                    Roboto, 'Helvetica Neue', sans-serif;
  --fontFamilyMonospace: Consolas, 'Courier New', Courier, monospace;

  --fontSizeBase100: 10px;  --lineHeightBase100: 14px;
  --fontSizeBase200: 12px;  --lineHeightBase200: 16px;   /* grid başlığı, caption */
  --fontSizeBase300: 14px;  --lineHeightBase300: 20px;   /* GÖVDE — varsayılan */
  --fontSizeBase400: 16px;  --lineHeightBase400: 22px;   /* form sekmesi */
  --fontSizeBase500: 20px;  --lineHeightBase500: 28px;   /* kayıt başlığı, dialog */
  --fontSizeBase600: 24px;  --lineHeightBase600: 32px;
  --fontSizeHero700: 28px;  --lineHeightHero700: 36px;   /* görünüm (view) başlığı */
  --fontSizeHero800: 32px;  --lineHeightHero800: 40px;
  --fontSizeHero900: 40px;  --lineHeightHero900: 52px;
  --fontSizeHero1000:68px;  --lineHeightHero1000:92px;

  --fontWeightRegular: 400;
  --fontWeightMedium: 500;
  --fontWeightSemibold: 600;   /* D365'te "kalın" demek budur; 700 nadirdir */
  --fontWeightBold: 700;

  /* ---------------------------------------------------------------------------
     8. SPACING (4px tabanlı ölçek)
     --------------------------------------------------------------------------- */
  --spacingHorizontalNone: 0;      --spacingVerticalNone: 0;
  --spacingHorizontalXXS: 2px;     --spacingVerticalXXS: 2px;
  --spacingHorizontalXS: 4px;      --spacingVerticalXS: 4px;
  --spacingHorizontalSNudge: 6px;  --spacingVerticalSNudge: 6px;
  --spacingHorizontalS: 8px;       --spacingVerticalS: 8px;
  --spacingHorizontalMNudge: 10px; --spacingVerticalMNudge: 10px;
  --spacingHorizontalM: 12px;      --spacingVerticalM: 12px;
  --spacingHorizontalL: 16px;      --spacingVerticalL: 16px;
  --spacingHorizontalXL: 20px;     --spacingVerticalXL: 20px;
  --spacingHorizontalXXL: 24px;    --spacingVerticalXXL: 24px;
  --spacingHorizontalXXXL: 32px;   --spacingVerticalXXXL: 32px;

  /* ---------------------------------------------------------------------------
     9. RADIUS
     Kural: kontroller 4px, yüzeyler/kartlar 8px, pill 10000px.
     --------------------------------------------------------------------------- */
  --borderRadiusNone: 0;
  --borderRadiusSmall: 2px;      /* sekme göstergesi */
  --borderRadiusMedium: 4px;     /* buton, input, menü öğesi, callout */
  --borderRadiusLarge: 6px;
  --borderRadiusXLarge: 8px;     /* kart, modal, form bölümü */
  --borderRadiusCircular: 10000px;

  /* ---------------------------------------------------------------------------
     10. STROKE WIDTH
     --------------------------------------------------------------------------- */
  --strokeWidthThin: 1px;
  --strokeWidthThick: 2px;       /* focus underline */
  --strokeWidthThicker: 3px;     /* sekme göstergesi */
  --strokeWidthThickest: 4px;    /* sitemap seçili göstergesi */

  /* ---------------------------------------------------------------------------
     11. ELEVATION / GÖLGE  — !!! EN KRİTİK BÖLÜM !!!
     Fluent gölgeleri DAİMA iki katmandır: (a) çok yumuşak "ambient" 0-offset
     halka + (b) yönlü "key" gölge. Tek katmanlı gölge D365 gibi görünmez.
       ambient: rgba(0,0,0,0.12)  |  key: rgba(0,0,0,0.14)
     --------------------------------------------------------------------------- */
  --shadow2:  0 0 2px rgba(0,0,0,0.12), 0 1px 2px  rgba(0,0,0,0.14);
  --shadow4:  0 0 2px rgba(0,0,0,0.12), 0 2px 4px  rgba(0,0,0,0.14);
  --shadow8:  0 0 2px rgba(0,0,0,0.12), 0 4px 8px  rgba(0,0,0,0.14);
  --shadow16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);
  --shadow28: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14);
  --shadow64: 0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14);
  /* Brand varyantları (mavi yüzey üstünde daha koyu) */
  --shadow2Brand:  0 0 2px rgba(0,0,0,0.30), 0 1px 2px  rgba(0,0,0,0.25);
  --shadow4Brand:  0 0 2px rgba(0,0,0,0.30), 0 2px 4px  rgba(0,0,0,0.25);
  --shadow8Brand:  0 0 2px rgba(0,0,0,0.30), 0 4px 8px  rgba(0,0,0,0.25);
  --shadow16Brand: 0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25);
  --shadow28Brand: 0 0 8px rgba(0,0,0,0.30), 0 14px 28px rgba(0,0,0,0.25);
  --shadow64Brand: 0 0 8px rgba(0,0,0,0.30), 0 32px 64px rgba(0,0,0,0.25);
  /* D365 legacy Fabric callout gölgesi (menü/dropdown'larda hâlâ kullanılıyor) */
  --d365-calloutShadow: 0 2px 4px rgba(0,0,0,0.5);

  --colorNeutralShadowAmbient: rgba(0,0,0,0.12);
  --colorNeutralShadowKey:     rgba(0,0,0,0.14);
  --colorBrandShadowAmbient:   rgba(0,0,0,0.30);
  --colorBrandShadowKey:       rgba(0,0,0,0.25);

  /* ---------------------------------------------------------------------------
     12. MOTION
     --------------------------------------------------------------------------- */
  --durationUltraFast: 50ms;
  --durationFaster: 100ms;
  --durationFast: 150ms;
  --durationNormal: 200ms;
  --durationGentle: 250ms;
  --durationSlow: 300ms;
  --durationSlower: 400ms;
  --durationUltraSlow: 500ms;

  --curveAccelerateMax: cubic-bezier(0.9,0.1,1,0.2);
  --curveAccelerateMid: cubic-bezier(1,0,1,1);
  --curveAccelerateMin: cubic-bezier(0.8,0,0.78,1);
  --curveDecelerateMax: cubic-bezier(0.1,0.9,0.2,1);
  --curveDecelerateMid: cubic-bezier(0,0,0,1);
  --curveDecelerateMin: cubic-bezier(0.33,0,0.1,1);
  --curveEasyEase: cubic-bezier(0.33,0,0.67,1);
  --curveEasyEaseMax: cubic-bezier(0.8,0,0.2,1);
  --curveLinear: cubic-bezier(0,0,1,1);

  /* ---------------------------------------------------------------------------
     13. D365 BİLEŞEN ÖLÇÜLERİ (ölçülmüş, tahmini değil)
     --------------------------------------------------------------------------- */
  --d365-controlHeight:        32px;  /* buton, input, combobox */
  --d365-controlHeightSmall:   28px;  /* yoğun komut çubuğu butonu */
  --d365-inputInnerHeight:     30px;  /* input elemanının kendisi */
  --d365-commandBarHeight:     44px;
  --d365-navItemHeight:        35px;
  --d365-navItemWidth:         181px;
  --d365-gridHeaderHeight:     42px;
  --d365-gridRowHeight:        42px;
  --d365-formTabHeight:        46px;
  --d365-menuItemHeight:       35px;
  --d365-menuWidth:            256px;
  --d365-sidePanelWidth:       500px;
  --d365-dialogPadding:        24px;
  --d365-iconSize:             16px;  /* baskın ikon boyutu */
  --d365-iconSizeLarge:        20px;
}

/* =============================================================================
   KARANLIK TEMA — token'ları yeniden tanımla, bileşenlere dokunma
   ============================================================================= */
:root[data-theme="dark"] {
  --colorNeutralBackground1: #292929;
  --colorNeutralBackground1Hover: #3d3d3d;
  --colorNeutralBackground2: #242424;
  --colorNeutralBackground3: #1f1f1f;
  --colorNeutralBackground4: #141414;
  --colorNeutralForeground1: #ffffff;
  --colorNeutralForeground2: #d6d6d6;
  --colorNeutralForeground3: #adadad;
  --colorNeutralForeground4: #999999;
  --colorNeutralForegroundDisabled: #5c5c5c;
  --colorNeutralStroke1: #666666;
  --colorNeutralStroke2: #525252;
  --colorNeutralStroke3: #3d3d3d;
  --colorBrandBackground: #115ea3;
  --colorBrandBackgroundHover: #0f6cbd;
  --colorBrandForeground1: #479ef5;
  --colorBrandStroke1: #479ef5;
  --d365-headerBackground: #000000;
  --d365-appCanvas: #141414;
  --d365-sitemapBackground: #141414;
  --d365-gridHeaderForeground: rgba(255,255,255,0.6);
  --colorNeutralShadowAmbient: rgba(0,0,0,0.24);
  --colorNeutralShadowKey: rgba(0,0,0,0.28);
  --shadow4:  0 0 2px rgba(0,0,0,0.24), 0 2px 4px  rgba(0,0,0,0.28);
  --shadow8:  0 0 2px rgba(0,0,0,0.24), 0 4px 8px  rgba(0,0,0,0.28);
  --shadow16: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28);
  --shadow64: 0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28);
}