@stisocial/ui 0.0.0-stage → 0.1.0

package/dist/tokens.css

@@ -0,0 +1,873 @@
+/* @stisocial/ui tasarım değeri üreteci üretti. Elle düzenlemeyin. */
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.tokens {
+  /* tema: stisocial varsayılanı koyu; "system" işletim sistemi tercihini izler */
+  :root,
+  [data-theme="dark"] {
+    color-scheme: dark;
+  }
+  [data-theme="light"] {
+    color-scheme: light;
+  }
+  [data-theme="system"] {
+    color-scheme: light dark;
+  }
+  /* tema, marka ve yoğunluktan bağımsız ölçüler; varsayılan yoğunluk (rahat) */
+  :root {
+    --sti-space-0: 0px;
+    --sti-space-0-5: 2px;
+    --sti-space-1: 4px;
+    --sti-space-2: 8px;
+    --sti-space-3: 12px;
+    --sti-space-4: 16px;
+    --sti-space-5: 20px;
+    --sti-space-6: 24px;
+    --sti-space-8: 32px;
+    --sti-space-10: 40px;
+    --sti-space-12: 48px;
+    --sti-space-16: 64px;
+    --sti-space-20: 80px;
+    --sti-space-24: 96px;
+    --sti-space-32: 128px;
+    --sti-radius-pill: 9999px;
+    --sti-border-width: 1px;
+    --sti-border-width-strong: 2px;
+    --sti-font-size-xs: 0.75rem;
+    --sti-line-height-xs: 1rem;
+    --sti-tracking-xs: 0.01em;
+    --sti-font-size-sm: 0.875rem;
+    --sti-line-height-sm: 1.25rem;
+    --sti-tracking-sm: 0;
+    --sti-font-size-md: 1rem;
+    --sti-line-height-md: 1.5rem;
+    --sti-tracking-md: 0;
+    --sti-font-size-body: 1.0625rem;
+    --sti-line-height-body: 1.75rem;
+    --sti-tracking-body: 0;
+    --sti-font-size-lg: 1.25rem;
+    --sti-line-height-lg: 1.75rem;
+    --sti-tracking-lg: -0.005em;
+    --sti-font-size-xl: 1.5rem;
+    --sti-line-height-xl: 2rem;
+    --sti-tracking-xl: -0.015em;
+    --sti-font-size-2xl: 1.875rem;
+    --sti-line-height-2xl: 2.25rem;
+    --sti-tracking-2xl: -0.02em;
+    --sti-font-size-3xl: 2.25rem;
+    --sti-line-height-3xl: 2.5rem;
+    --sti-tracking-3xl: -0.02em;
+    --sti-font-size-4xl: 3rem;
+    --sti-line-height-4xl: 3.25rem;
+    --sti-tracking-4xl: -0.025em;
+    --sti-font-size-display-2xl: clamp(2.75rem, 1.5rem + 5.556vw, 6.5rem);
+    --sti-line-height-display-2xl: 1;
+    --sti-tracking-display-2xl: -0.03em;
+    --sti-font-size-display-xl: clamp(2.5rem, 1.667rem + 3.704vw, 5rem);
+    --sti-line-height-display-xl: 1.02;
+    --sti-tracking-display-xl: -0.025em;
+    --sti-font-size-display-lg: clamp(2rem, 1.5rem + 2.222vw, 3.5rem);
+    --sti-line-height-display-lg: 1.05;
+    --sti-tracking-display-lg: -0.02em;
+    --sti-font-size-heading-xl: clamp(1.75rem, 1.5rem + 1.111vw, 2.5rem);
+    --sti-line-height-heading-xl: 1.1;
+    --sti-tracking-heading-xl: -0.015em;
+    --sti-font-size-heading-lg: clamp(1.375rem, 1.208rem + 0.7407vw, 1.875rem);
+    --sti-line-height-heading-lg: 1.2;
+    --sti-tracking-heading-lg: -0.01em;
+    --sti-font-size-lead: clamp(1.125rem, 1.042rem + 0.3704vw, 1.375rem);
+    --sti-line-height-lead: 1.5;
+    --sti-tracking-lead: -0.005em;
+    --sti-font-size-prose: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
+    --sti-line-height-prose: 1.6;
+    --sti-tracking-prose: 0;
+    --sti-font-weight-regular: 400;
+    --sti-font-weight-medium: 500;
+    --sti-font-weight-semibold: 600;
+    --sti-font-weight-bold: 700;
+    --sti-tracking-label: 0.08em;
+    --sti-tracking-eyebrow: 0.12em;
+    --sti-tracking-code: 0.02em;
+    --sti-link-underline-offset: 0.18em;
+    --sti-word-spacing-display: 0.08em;
+    --sti-font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
+    --sti-icon-sm: 16px;
+    --sti-icon-md: 20px;
+    --sti-icon-lg: 24px;
+    --sti-opacity-disabled: 0.6;
+    --sti-duration-fast: 180ms;
+    --sti-duration-base: 320ms;
+    --sti-duration-slow: 640ms;
+    --sti-duration-reveal: 1800ms;
+    --sti-duration-loop: 2400ms;
+    --sti-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --sti-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+    --sti-ease-snap: cubic-bezier(0.5, 0, 0, 1);
+    --sti-z-base: 0;
+    --sti-z-raised: 1;
+    --sti-z-dropdown: 1000;
+    --sti-z-sticky: 1100;
+    --sti-z-header: 1200;
+    --sti-z-overlay: 1300;
+    --sti-z-modal: 1400;
+    --sti-z-popover: 1500;
+    --sti-z-toast: 1600;
+    --sti-z-tooltip: 1700;
+    --sti-z-skip-link: 1800;
+    --sti-width-content: 1040px;
+    --sti-width-container: 1600px;
+    --sti-width-measure: 68ch;
+    --sti-width-sidebar: 264px;
+    --sti-height-topbar: 64px;
+    --sti-gutter: clamp(1.25rem, 4vw, 5rem);
+    --sti-control-h-sm: 36px;
+    --sti-control-h-md: 44px;
+    --sti-control-h-lg: 52px;
+    --sti-space-inset-sm: 12px;
+    --sti-space-inset-md: 16px;
+    --sti-space-inset-lg: 24px;
+    --sti-row-h: 44px;
+  }
+  /* ham katman, marka stisocial: tohum #50c2f6; bilgi rengi vurgunun kendisi (SİNYAL tek vurgu) */
+  :root,
+  [data-theme],
+  [data-brand="stisocial"],
+  [data-brand="stisocial"] [data-theme]:not([data-brand]:not([data-brand="stisocial"])):not([data-brand="stisocial"] [data-brand]:not([data-brand="stisocial"]) [data-theme]) {
+    --sti-radius-xs: 6px;
+    --sti-radius-sm: 10px;
+    --sti-radius-md: 16px;
+    --sti-radius-lg: 24px;
+    --sti-radius-xl: 40px;
+    --sti-font-display: var(--font-clash, "Clash Display"), "STI Display Fallback", "STI Display Fallback Android", var(--font-general, "General Sans"), "STI Text Fallback", "STI Text Fallback Android", system-ui, sans-serif;
+    --sti-font-text: var(--font-general, "General Sans"), "STI Text Fallback", "STI Text Fallback Android", system-ui, sans-serif;
+    --sti-font-numeric: "STI Numeric", var(--sti-font-text);
+    --sti-ref-neutral-1: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-neutral-2: light-dark(#f8f8f9, #131315);
+    --sti-ref-neutral-3: light-dark(#f0f0f2, #1a1a1d);
+    --sti-ref-neutral-4: light-dark(#e8e8ec, #222226);
+    --sti-ref-neutral-5: light-dark(#e1e1e5, #2a2a2e);
+    --sti-ref-neutral-6: light-dark(#d8d8dd, #333337);
+    --sti-ref-neutral-7: light-dark(#ccccd2, #404044);
+    --sti-ref-neutral-8: light-dark(#b8b8bf, #55555b);
+    --sti-ref-neutral-9: light-dark(#727279, #6e6e76);
+    --sti-ref-neutral-10: light-dark(#67676e, #606067);
+    --sti-ref-neutral-11: light-dark(#64646b, #ababb3);
+    --sti-ref-neutral-12: light-dark(#19191d, #f2f1ed);
+    --sti-ref-neutral-ink: #fcfcfc;
+    --sti-ref-neutral-ink-strong: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-neutral-fill-more: light-dark(#64646b, #ababb3);
+    --sti-ref-neutral-fill-more-hover: light-dark(#19191d, #f2f1ed);
+    --sti-ref-neutral-ink-more: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-accent-1: light-dark(#f9fdff, #050c11);
+    --sti-ref-accent-2: light-dark(#f1faff, #07151c);
+    --sti-ref-accent-3: light-dark(#e0f4ff, #031d2a);
+    --sti-ref-accent-4: light-dark(#d0eeff, #012636);
+    --sti-ref-accent-5: light-dark(#bfe8fe, #012f42);
+    --sti-ref-accent-6: light-dark(#abe2fe, #02394e);
+    --sti-ref-accent-7: light-dark(#8ed8fe, #034760);
+    --sti-ref-accent-8: light-dark(#67c6f4, #055e7f);
+    --sti-ref-accent-9: #50c2f6;
+    --sti-ref-accent-10: light-dark(#3eb5ea, #70cffe);
+    --sti-ref-accent-11: light-dark(#076997, #69bbed);
+    --sti-ref-accent-12: light-dark(#02314d, #e5f3ff);
+    --sti-ref-accent-ink: #061c2a;
+    --sti-ref-accent-ink-strong: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-accent-fill-more: #50c2f6;
+    --sti-ref-accent-fill-more-hover: light-dark(#3eb5ea, #70cffe);
+    --sti-ref-accent-ink-more: #061c2a;
+    --sti-ref-success-1: light-dark(#f9fdfa, #060d08);
+    --sti-ref-success-2: light-dark(#f1fbf3, #0a170d);
+    --sti-ref-success-3: light-dark(#e0f8e5, #072010);
+    --sti-ref-success-4: light-dark(#cef5d6, #032b12);
+    --sti-ref-success-5: light-dark(#bdf0c9, #013517);
+    --sti-ref-success-6: light-dark(#aceabc, #023f1d);
+    --sti-ref-success-7: light-dark(#98e1ab, #034e25);
+    --sti-ref-success-8: light-dark(#79d092, #066733);
+    --sti-ref-success-9: #0a8342;
+    --sti-ref-success-10: #08753b;
+    --sti-ref-success-11: light-dark(#087544, #6bc891);
+    --sti-ref-success-12: light-dark(#023820, #ddf9e8);
+    --sti-ref-success-ink: #fcfcfc;
+    --sti-ref-success-ink-strong: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-success-fill-more: light-dark(#087544, #6bc891);
+    --sti-ref-success-fill-more-hover: light-dark(#023820, #ddf9e8);
+    --sti-ref-success-ink-more: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-warning-1: light-dark(#fefcf8, #0f0a04);
+    --sti-ref-warning-2: light-dark(#fef7ed, #1a1205);
+    --sti-ref-warning-3: light-dark(#fdeed6, #251800);
+    --sti-ref-warning-4: light-dark(#fde5bf, #2f1f01);
+    --sti-ref-warning-5: light-dark(#fcdda9, #3a2701);
+    --sti-ref-warning-6: light-dark(#f8d394, #452f02);
+    --sti-ref-warning-7: light-dark(#f1c67b, #553b02);
+    --sti-ref-warning-8: light-dark(#e2b055, #704f04);
+    --sti-ref-warning-9: #f0b135;
+    --sti-ref-warning-10: light-dark(#e4a623, #f8c05a);
+    --sti-ref-warning-11: light-dark(#8a5306, #e5a159);
+    --sti-ref-warning-12: light-dark(#462401, #ffeee0);
+    --sti-ref-warning-ink: #0b0b0c;
+    --sti-ref-warning-ink-strong: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-warning-fill-more: #f0b135;
+    --sti-ref-warning-fill-more-hover: light-dark(#e4a623, #f8c05a);
+    --sti-ref-warning-ink-more: #0b0b0c;
+    --sti-ref-danger-1: light-dark(#fffbfb, #140707);
+    --sti-ref-danger-2: light-dark(#fff6f5, #210d0b);
+    --sti-ref-danger-3: light-dark(#ffebe9, #300d0c);
+    --sti-ref-danger-4: light-dark(#ffe1de, #410d0d);
+    --sti-ref-danger-5: light-dark(#fed6d2, #510d0f);
+    --sti-ref-danger-6: light-dark(#fecac5, #610f12);
+    --sti-ref-danger-7: light-dark(#feb9b2, #761719);
+    --sti-ref-danger-8: light-dark(#fe9992, #972728);
+    --sti-ref-danger-9: #d53136;
+    --sti-ref-danger-10: #c3292e;
+    --sti-ref-danger-11: light-dark(#b22027, #fe8b83);
+    --sti-ref-danger-12: light-dark(#570e0d, #ffecea);
+    --sti-ref-danger-ink: #fcfcfc;
+    --sti-ref-danger-ink-strong: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-danger-fill-more: light-dark(#b22027, #fe8b83);
+    --sti-ref-danger-fill-more-hover: light-dark(#570e0d, #ffecea);
+    --sti-ref-danger-ink-more: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-info-1: light-dark(#f9fdff, #050c11);
+    --sti-ref-info-2: light-dark(#f1faff, #07151c);
+    --sti-ref-info-3: light-dark(#e0f4ff, #031d2a);
+    --sti-ref-info-4: light-dark(#d0eeff, #012636);
+    --sti-ref-info-5: light-dark(#bfe8fe, #012f42);
+    --sti-ref-info-6: light-dark(#abe2fe, #02394e);
+    --sti-ref-info-7: light-dark(#8ed8fe, #034760);
+    --sti-ref-info-8: light-dark(#67c6f4, #055e7f);
+    --sti-ref-info-9: #50c2f6;
+    --sti-ref-info-10: light-dark(#3eb5ea, #70cffe);
+    --sti-ref-info-11: light-dark(#076997, #69bbed);
+    --sti-ref-info-12: light-dark(#02314d, #e5f3ff);
+    --sti-ref-info-ink: #061c2a;
+    --sti-ref-info-ink-strong: light-dark(#fcfcfc, #0b0b0c);
+    --sti-ref-info-fill-more: #50c2f6;
+    --sti-ref-info-fill-more-hover: light-dark(#3eb5ea, #70cffe);
+    --sti-ref-info-ink-more: #061c2a;
+    --sti-ref-accent-brand: #50c2f6;
+    --sti-ref-focus-ring: light-dark(#076997, #50c2f6);
+    --sti-ref-signal-text: light-dark(#076997, #50c2f6);
+    --sti-ref-shadow-1: light-dark(rgb(11 11 12 / 0.1), rgb(3 3 4 / 0.6));
+    --sti-ref-shadow-2: light-dark(rgb(11 11 12 / 0.06), rgb(3 3 4 / 0.4));
+    --sti-ref-scrim: light-dark(rgb(11 11 12 / 0.4), rgb(3 3 4 / 0.7));
+  }
+  /* anlamlı katman: bileşenler yalnız bunları kullanır */
+  :where(:root, [data-brand], [data-theme]) {
+    --sti-bg-canvas: var(--sti-ref-neutral-1);
+    --sti-bg-subtle: var(--sti-ref-neutral-2);
+    --sti-bg-surface: var(--sti-ref-neutral-3);
+    --sti-bg-surface-hover: var(--sti-ref-neutral-4);
+    --sti-bg-surface-active: var(--sti-ref-neutral-5);
+    --sti-bg-inverse: var(--sti-ref-neutral-12);
+    --sti-border-subtle: var(--sti-ref-neutral-6);
+    --sti-border: var(--sti-ref-neutral-7);
+    --sti-border-strong: var(--sti-ref-neutral-8);
+    --sti-border-control: var(--sti-ref-neutral-9);
+    --sti-border-selected: var(--sti-ref-accent-11);
+    --sti-fg: var(--sti-ref-neutral-12);
+    --sti-fg-muted: var(--sti-ref-neutral-11);
+    --sti-fg-inverse: var(--sti-ref-neutral-1);
+    --sti-fg-link: var(--sti-ref-accent-11);
+    --sti-fg-link-hover: var(--sti-ref-accent-12);
+    --sti-fg-signal: var(--sti-ref-signal-text);
+    --sti-focus-ring: var(--sti-ref-focus-ring);
+    --sti-selection-bg: var(--sti-ref-accent-5);
+    --sti-selection-fg: var(--sti-ref-neutral-12);
+    --sti-scrim: var(--sti-ref-scrim);
+    --sti-shadow-color-1: var(--sti-ref-shadow-1);
+    --sti-shadow-color-2: var(--sti-ref-shadow-2);
+    --sti-fill-neutral: var(--sti-ref-neutral-9);
+    --sti-fill-neutral-hover: var(--sti-ref-neutral-10);
+    --sti-fg-on-neutral: var(--sti-ref-neutral-ink);
+    --sti-fill-accent: var(--sti-ref-accent-9);
+    --sti-fill-accent-hover: var(--sti-ref-accent-10);
+    --sti-fg-on-accent: var(--sti-ref-accent-ink);
+    --sti-fill-success: var(--sti-ref-success-9);
+    --sti-fill-success-hover: var(--sti-ref-success-10);
+    --sti-fg-on-success: var(--sti-ref-success-ink);
+    --sti-fill-warning: var(--sti-ref-warning-9);
+    --sti-fill-warning-hover: var(--sti-ref-warning-10);
+    --sti-fg-on-warning: var(--sti-ref-warning-ink);
+    --sti-fill-danger: var(--sti-ref-danger-9);
+    --sti-fill-danger-hover: var(--sti-ref-danger-10);
+    --sti-fg-on-danger: var(--sti-ref-danger-ink);
+    --sti-fill-info: var(--sti-ref-info-9);
+    --sti-fill-info-hover: var(--sti-ref-info-10);
+    --sti-fg-on-info: var(--sti-ref-info-ink);
+    --sti-fg-accent: var(--sti-ref-accent-11);
+    --sti-fg-accent-strong: var(--sti-ref-accent-12);
+    --sti-bg-accent-subtle: var(--sti-ref-accent-3);
+    --sti-border-accent: var(--sti-ref-accent-7);
+    --sti-fg-success: var(--sti-ref-success-11);
+    --sti-fg-success-strong: var(--sti-ref-success-12);
+    --sti-bg-success-subtle: var(--sti-ref-success-3);
+    --sti-border-success: var(--sti-ref-success-7);
+    --sti-fg-warning: var(--sti-ref-warning-11);
+    --sti-fg-warning-strong: var(--sti-ref-warning-12);
+    --sti-bg-warning-subtle: var(--sti-ref-warning-3);
+    --sti-border-warning: var(--sti-ref-warning-7);
+    --sti-fg-danger: var(--sti-ref-danger-11);
+    --sti-fg-danger-strong: var(--sti-ref-danger-12);
+    --sti-bg-danger-subtle: var(--sti-ref-danger-3);
+    --sti-border-danger: var(--sti-ref-danger-7);
+    --sti-fg-info: var(--sti-ref-info-11);
+    --sti-fg-info-strong: var(--sti-ref-info-12);
+    --sti-bg-info-subtle: var(--sti-ref-info-3);
+    --sti-border-info: var(--sti-ref-info-7);
+    --sti-focus-ring-width: 2px;
+    --sti-focus-ring-offset: 2px;
+    --sti-shadow-sm: 0 1px 2px var(--sti-shadow-color-1);
+    --sti-shadow-md: 0 4px 12px -2px var(--sti-shadow-color-1), 0 2px 4px -2px var(--sti-shadow-color-2);
+    --sti-shadow-lg: 0 12px 32px -8px var(--sti-shadow-color-1), 0 4px 8px -4px var(--sti-shadow-color-2);
+    --sti-shadow-xl: 0 24px 64px -12px var(--sti-shadow-color-1), 0 8px 16px -8px var(--sti-shadow-color-2);
+  }
+  /* yüksek karşıtlık: sistem tercihi (<html data-contrast="normal"> değilse) ya da <html data-contrast="more"> */
+  @media (prefers-contrast: more) {
+    :where(:root:not([data-contrast="normal"]), :root:not([data-contrast="normal"]) :is([data-brand], [data-theme])) {
+      --sti-border-subtle: var(--sti-ref-neutral-11);
+      --sti-border: var(--sti-ref-neutral-11);
+      --sti-border-strong: var(--sti-ref-neutral-11);
+      --sti-border-control: var(--sti-ref-neutral-11);
+      --sti-border-selected: var(--sti-ref-accent-12);
+      --sti-fg-muted: var(--sti-ref-neutral-12);
+      --sti-fg-link: var(--sti-ref-accent-12);
+      --sti-fg-signal: var(--sti-ref-accent-12);
+      --sti-fill-neutral: var(--sti-ref-neutral-fill-more);
+      --sti-fill-neutral-hover: var(--sti-ref-neutral-fill-more-hover);
+      --sti-fg-on-neutral: var(--sti-ref-neutral-ink-more);
+      --sti-fill-accent: var(--sti-ref-accent-fill-more);
+      --sti-fill-accent-hover: var(--sti-ref-accent-fill-more-hover);
+      --sti-fg-on-accent: var(--sti-ref-accent-ink-more);
+      --sti-fill-success: var(--sti-ref-success-fill-more);
+      --sti-fill-success-hover: var(--sti-ref-success-fill-more-hover);
+      --sti-fg-on-success: var(--sti-ref-success-ink-more);
+      --sti-fill-warning: var(--sti-ref-warning-fill-more);
+      --sti-fill-warning-hover: var(--sti-ref-warning-fill-more-hover);
+      --sti-fg-on-warning: var(--sti-ref-warning-ink-more);
+      --sti-fill-danger: var(--sti-ref-danger-fill-more);
+      --sti-fill-danger-hover: var(--sti-ref-danger-fill-more-hover);
+      --sti-fg-on-danger: var(--sti-ref-danger-ink-more);
+      --sti-fill-info: var(--sti-ref-info-fill-more);
+      --sti-fill-info-hover: var(--sti-ref-info-fill-more-hover);
+      --sti-fg-on-info: var(--sti-ref-info-ink-more);
+      --sti-fg-accent: var(--sti-ref-accent-12);
+      --sti-border-accent: var(--sti-ref-accent-11);
+      --sti-fg-success: var(--sti-ref-success-12);
+      --sti-border-success: var(--sti-ref-success-11);
+      --sti-fg-warning: var(--sti-ref-warning-12);
+      --sti-border-warning: var(--sti-ref-warning-11);
+      --sti-fg-danger: var(--sti-ref-danger-12);
+      --sti-border-danger: var(--sti-ref-danger-11);
+      --sti-fg-info: var(--sti-ref-info-12);
+      --sti-border-info: var(--sti-ref-info-11);
+      --sti-focus-ring-width: 3px;
+    }
+  }
+  :where(:root[data-contrast="more"], :root[data-contrast="more"] :is([data-brand], [data-theme])) {
+    --sti-border-subtle: var(--sti-ref-neutral-11);
+    --sti-border: var(--sti-ref-neutral-11);
+    --sti-border-strong: var(--sti-ref-neutral-11);
+    --sti-border-control: var(--sti-ref-neutral-11);
+    --sti-border-selected: var(--sti-ref-accent-12);
+    --sti-fg-muted: var(--sti-ref-neutral-12);
+    --sti-fg-link: var(--sti-ref-accent-12);
+    --sti-fg-signal: var(--sti-ref-accent-12);
+    --sti-fill-neutral: var(--sti-ref-neutral-fill-more);
+    --sti-fill-neutral-hover: var(--sti-ref-neutral-fill-more-hover);
+    --sti-fg-on-neutral: var(--sti-ref-neutral-ink-more);
+    --sti-fill-accent: var(--sti-ref-accent-fill-more);
+    --sti-fill-accent-hover: var(--sti-ref-accent-fill-more-hover);
+    --sti-fg-on-accent: var(--sti-ref-accent-ink-more);
+    --sti-fill-success: var(--sti-ref-success-fill-more);
+    --sti-fill-success-hover: var(--sti-ref-success-fill-more-hover);
+    --sti-fg-on-success: var(--sti-ref-success-ink-more);
+    --sti-fill-warning: var(--sti-ref-warning-fill-more);
+    --sti-fill-warning-hover: var(--sti-ref-warning-fill-more-hover);
+    --sti-fg-on-warning: var(--sti-ref-warning-ink-more);
+    --sti-fill-danger: var(--sti-ref-danger-fill-more);
+    --sti-fill-danger-hover: var(--sti-ref-danger-fill-more-hover);
+    --sti-fg-on-danger: var(--sti-ref-danger-ink-more);
+    --sti-fill-info: var(--sti-ref-info-fill-more);
+    --sti-fill-info-hover: var(--sti-ref-info-fill-more-hover);
+    --sti-fg-on-info: var(--sti-ref-info-ink-more);
+    --sti-fg-accent: var(--sti-ref-accent-12);
+    --sti-border-accent: var(--sti-ref-accent-11);
+    --sti-fg-success: var(--sti-ref-success-12);
+    --sti-border-success: var(--sti-ref-success-11);
+    --sti-fg-warning: var(--sti-ref-warning-12);
+    --sti-border-warning: var(--sti-ref-warning-11);
+    --sti-fg-danger: var(--sti-ref-danger-12);
+    --sti-border-danger: var(--sti-ref-danger-11);
+    --sti-fg-info: var(--sti-ref-info-12);
+    --sti-border-info: var(--sti-ref-info-11);
+    --sti-focus-ring-width: 3px;
+  }
+  /* yoğunluk (varsayılan yukarıda); ham değerler, iç içe kullanım kendiliğinden çalışır */
+  [data-density="compact"] {
+    --sti-control-h-sm: 32px;
+    --sti-control-h-md: 36px;
+    --sti-control-h-lg: 44px;
+    --sti-space-inset-sm: 8px;
+    --sti-space-inset-md: 12px;
+    --sti-space-inset-lg: 16px;
+    --sti-row-h: 36px;
+  }
+  [data-density="comfortable"] {
+    --sti-control-h-sm: 36px;
+    --sti-control-h-md: 44px;
+    --sti-control-h-lg: 52px;
+    --sti-space-inset-sm: 12px;
+    --sti-space-inset-md: 16px;
+    --sti-space-inset-lg: 24px;
+    --sti-row-h: 44px;
+  }
+  [data-density="spacious"] {
+    --sti-control-h-sm: 44px;
+    --sti-control-h-md: 52px;
+    --sti-control-h-lg: 60px;
+    --sti-space-inset-sm: 16px;
+    --sti-space-inset-md: 24px;
+    --sti-space-inset-lg: 32px;
+    --sti-row-h: 52px;
+  }
+  /* dokunmatik: hiçbir denetim 44 pikselin altına inmez */
+  @media (pointer: coarse) {
+    :root:not([data-density]) {
+      --sti-control-h-sm: 44px;
+    }
+    [data-density="compact"] {
+      --sti-control-h-sm: 44px;
+      --sti-control-h-md: 44px;
+      --sti-row-h: 44px;
+    }
+    [data-density="comfortable"] {
+      --sti-control-h-sm: 44px;
+    }
+  }
+  /* geniş renk uzayı: aynı açıklık ve ton, daha çok doygunluk; vurgu-9 ve nötrler birebir */
+  @supports (color: oklch(0 0 0)) and (color: light-dark(#000, #fff)) {
+    @media (color-gamut: p3) {
+      :root,
+      [data-theme],
+      [data-brand="stisocial"],
+      [data-brand="stisocial"] [data-theme]:not([data-brand]:not([data-brand="stisocial"])):not([data-brand="stisocial"] [data-brand]:not([data-brand="stisocial"]) [data-theme]) {
+        --sti-ref-accent-1: light-dark(#f9fdff, oklch(0.15 0.0191 231.5));
+        --sti-ref-accent-2: light-dark(oklch(0.979 0.013 231.5), oklch(0.188 0.0287 231.5));
+        --sti-ref-accent-3: light-dark(oklch(0.956 0.0275 231.5), oklch(0.219 0.0478 231.5));
+        --sti-ref-accent-4: light-dark(oklch(0.933 0.0422 231.5), oklch(0.254 0.0664 231.5));
+        --sti-ref-accent-5: light-dark(oklch(0.91 0.0571 231.5), oklch(0.287 0.075 231.5));
+        --sti-ref-accent-6: light-dark(oklch(0.884 0.0742 231.5), oklch(0.322 0.0842 231.5));
+        --sti-ref-accent-7: light-dark(oklch(0.848 0.0984 231.5), oklch(0.372 0.0973 231.5));
+        --sti-ref-accent-8: light-dark(oklch(0.786 0.1306 231.5), oklch(0.452 0.1182 231.5));
+        --sti-ref-accent-10: light-dark(oklch(0.73 0.151 231.5), oklch(0.815 0.121 231.5));
+        --sti-ref-accent-11: light-dark(oklch(0.495 0.1397 237.5), oklch(0.76 0.1274 237.5));
+        --sti-ref-accent-12: light-dark(oklch(0.3 0.0876 241.5), oklch(0.958 0.0237 241.5));
+        --sti-ref-accent-fill-more-hover: light-dark(oklch(0.73 0.151 231.5), oklch(0.815 0.121 231.5));
+        --sti-ref-success-1: light-dark(oklch(0.991 0.0071 152), oklch(0.15 0.0212 152));
+        --sti-ref-success-2: light-dark(oklch(0.979 0.0177 152), oklch(0.188 0.0319 152));
+        --sti-ref-success-3: light-dark(oklch(0.956 0.0425 152), oklch(0.219 0.0531 152));
+        --sti-ref-success-4: light-dark(oklch(0.933 0.0673 152), oklch(0.254 0.0743 152));
+        --sti-ref-success-5: light-dark(oklch(0.91 0.0885 152), oklch(0.287 0.092 152));
+        --sti-ref-success-6: light-dark(oklch(0.884 0.1062 152), oklch(0.322 0.1062 152));
+        --sti-ref-success-7: light-dark(oklch(0.848 0.1239 152), oklch(0.372 0.1204 152));
+        --sti-ref-success-8: light-dark(oklch(0.786 0.1451 152), oklch(0.452 0.1381 152));
+        --sti-ref-success-9: oklch(0.535 0.1652 152);
+        --sti-ref-success-10: oklch(0.495 0.1534 152);
+        --sti-ref-success-11: light-dark(oklch(0.495 0.1628 156), oklch(0.76 0.1416 156));
+        --sti-ref-success-12: light-dark(oklch(0.3 0.0949 158), oklch(0.958 0.0442 158));
+        --sti-ref-success-fill-more: light-dark(oklch(0.495 0.1628 156), oklch(0.76 0.1416 156));
+        --sti-ref-success-fill-more-hover: light-dark(oklch(0.3 0.0949 158), oklch(0.958 0.0442 158));
+        --sti-ref-warning-1: light-dark(oklch(0.991 0.0071 80), oklch(0.15 0.0212 80));
+        --sti-ref-warning-2: light-dark(oklch(0.979 0.0177 80), oklch(0.188 0.0319 80));
+        --sti-ref-warning-3: light-dark(oklch(0.956 0.0425 80), oklch(0.219 0.0512 80));
+        --sti-ref-warning-4: light-dark(oklch(0.933 0.0673 80), oklch(0.254 0.0593 80));
+        --sti-ref-warning-5: light-dark(oklch(0.91 0.0885 80), oklch(0.287 0.0671 80));
+        --sti-ref-warning-6: light-dark(oklch(0.884 0.1062 80), oklch(0.322 0.0752 80));
+        --sti-ref-warning-7: light-dark(oklch(0.848 0.1239 80), oklch(0.372 0.0869 80));
+        --sti-ref-warning-8: light-dark(oklch(0.786 0.1451 80), oklch(0.452 0.1056 80));
+        --sti-ref-warning-9: oklch(0.8 0.177 80);
+        --sti-ref-warning-10: light-dark(oklch(0.765 0.177 80), oklch(0.84 0.1593 80));
+        --sti-ref-warning-11: light-dark(oklch(0.495 0.1237 66), oklch(0.76 0.1416 66));
+        --sti-ref-warning-12: light-dark(oklch(0.3 0.0788 60), oklch(0.958 0.0326 60));
+        --sti-ref-warning-fill-more: oklch(0.8 0.177 80);
+        --sti-ref-warning-fill-more-hover: light-dark(oklch(0.765 0.177 80), oklch(0.84 0.1593 80));
+        --sti-ref-danger-1: light-dark(oklch(0.991 0.0055 25), oklch(0.15 0.0269 25));
+        --sti-ref-danger-2: light-dark(oklch(0.979 0.013 25), oklch(0.188 0.0404 25));
+        --sti-ref-danger-3: light-dark(oklch(0.956 0.0278 25), oklch(0.219 0.0673 25));
+        --sti-ref-danger-4: light-dark(oklch(0.933 0.0431 25), oklch(0.254 0.0942 25));
+        --sti-ref-danger-5: light-dark(oklch(0.91 0.059 25), oklch(0.287 0.1166 25));
+        --sti-ref-danger-6: light-dark(oklch(0.884 0.0777 25), oklch(0.322 0.1345 25));
+        --sti-ref-danger-7: light-dark(oklch(0.848 0.105 25), oklch(0.372 0.1525 25));
+        --sti-ref-danger-8: light-dark(oklch(0.786 0.1563 25), oklch(0.452 0.1749 25));
+        --sti-ref-danger-9: oklch(0.575 0.236 25);
+        --sti-ref-danger-10: oklch(0.535 0.2242 25);
+        --sti-ref-danger-11: light-dark(oklch(0.495 0.213 25), oklch(0.76 0.1794 25));
+        --sti-ref-danger-12: light-dark(oklch(0.3 0.1233 27), oklch(0.958 0.0265 27));
+        --sti-ref-danger-fill-more: light-dark(oklch(0.495 0.213 25), oklch(0.76 0.1794 25));
+        --sti-ref-danger-fill-more-hover: light-dark(oklch(0.3 0.1233 27), oklch(0.958 0.0265 27));
+        --sti-ref-info-1: light-dark(#f9fdff, oklch(0.15 0.0191 231.5));
+        --sti-ref-info-2: light-dark(oklch(0.979 0.013 231.5), oklch(0.188 0.0287 231.5));
+        --sti-ref-info-3: light-dark(oklch(0.956 0.0275 231.5), oklch(0.219 0.0478 231.5));
+        --sti-ref-info-4: light-dark(oklch(0.933 0.0422 231.5), oklch(0.254 0.0664 231.5));
+        --sti-ref-info-5: light-dark(oklch(0.91 0.0571 231.5), oklch(0.287 0.075 231.5));
+        --sti-ref-info-6: light-dark(oklch(0.884 0.0742 231.5), oklch(0.322 0.0842 231.5));
+        --sti-ref-info-7: light-dark(oklch(0.848 0.0984 231.5), oklch(0.372 0.0973 231.5));
+        --sti-ref-info-8: light-dark(oklch(0.786 0.1306 231.5), oklch(0.452 0.1182 231.5));
+        --sti-ref-info-10: light-dark(oklch(0.73 0.151 231.5), oklch(0.815 0.121 231.5));
+        --sti-ref-info-11: light-dark(oklch(0.495 0.1397 237.5), oklch(0.76 0.1274 237.5));
+        --sti-ref-info-12: light-dark(oklch(0.3 0.0876 241.5), oklch(0.958 0.0237 241.5));
+        --sti-ref-info-fill-more-hover: light-dark(oklch(0.73 0.151 231.5), oklch(0.815 0.121 231.5));
+        --sti-ref-focus-ring: light-dark(oklch(0.495 0.1397 237.5), #50c2f6);
+        --sti-ref-signal-text: light-dark(oklch(0.495 0.1397 237.5), #50c2f6);
+      }
+    }
+  }
+  /* light-dark() olmayan motorlar: tema yalnız <html data-theme>'dan, yalnız sRGB */
+  @supports not (color: light-dark(#000, #fff)) {
+    :root,
+    [data-theme],
+    [data-brand="stisocial"],
+    [data-brand="stisocial"] [data-theme]:not([data-brand]:not([data-brand="stisocial"])):not([data-brand="stisocial"] [data-brand]:not([data-brand="stisocial"]) [data-theme]) {
+      --sti-ref-neutral-1: #0b0b0c;
+      --sti-ref-neutral-2: #131315;
+      --sti-ref-neutral-3: #1a1a1d;
+      --sti-ref-neutral-4: #222226;
+      --sti-ref-neutral-5: #2a2a2e;
+      --sti-ref-neutral-6: #333337;
+      --sti-ref-neutral-7: #404044;
+      --sti-ref-neutral-8: #55555b;
+      --sti-ref-neutral-9: #6e6e76;
+      --sti-ref-neutral-10: #606067;
+      --sti-ref-neutral-11: #ababb3;
+      --sti-ref-neutral-12: #f2f1ed;
+      --sti-ref-neutral-ink-strong: #0b0b0c;
+      --sti-ref-neutral-fill-more: #ababb3;
+      --sti-ref-neutral-fill-more-hover: #f2f1ed;
+      --sti-ref-neutral-ink-more: #0b0b0c;
+      --sti-ref-accent-1: #050c11;
+      --sti-ref-accent-2: #07151c;
+      --sti-ref-accent-3: #031d2a;
+      --sti-ref-accent-4: #012636;
+      --sti-ref-accent-5: #012f42;
+      --sti-ref-accent-6: #02394e;
+      --sti-ref-accent-7: #034760;
+      --sti-ref-accent-8: #055e7f;
+      --sti-ref-accent-10: #70cffe;
+      --sti-ref-accent-11: #69bbed;
+      --sti-ref-accent-12: #e5f3ff;
+      --sti-ref-accent-ink-strong: #0b0b0c;
+      --sti-ref-accent-fill-more-hover: #70cffe;
+      --sti-ref-success-1: #060d08;
+      --sti-ref-success-2: #0a170d;
+      --sti-ref-success-3: #072010;
+      --sti-ref-success-4: #032b12;
+      --sti-ref-success-5: #013517;
+      --sti-ref-success-6: #023f1d;
+      --sti-ref-success-7: #034e25;
+      --sti-ref-success-8: #066733;
+      --sti-ref-success-11: #6bc891;
+      --sti-ref-success-12: #ddf9e8;
+      --sti-ref-success-ink-strong: #0b0b0c;
+      --sti-ref-success-fill-more: #6bc891;
+      --sti-ref-success-fill-more-hover: #ddf9e8;
+      --sti-ref-success-ink-more: #0b0b0c;
+      --sti-ref-warning-1: #0f0a04;
+      --sti-ref-warning-2: #1a1205;
+      --sti-ref-warning-3: #251800;
+      --sti-ref-warning-4: #2f1f01;
+      --sti-ref-warning-5: #3a2701;
+      --sti-ref-warning-6: #452f02;
+      --sti-ref-warning-7: #553b02;
+      --sti-ref-warning-8: #704f04;
+      --sti-ref-warning-10: #f8c05a;
+      --sti-ref-warning-11: #e5a159;
+      --sti-ref-warning-12: #ffeee0;
+      --sti-ref-warning-ink-strong: #0b0b0c;
+      --sti-ref-warning-fill-more-hover: #f8c05a;
+      --sti-ref-danger-1: #140707;
+      --sti-ref-danger-2: #210d0b;
+      --sti-ref-danger-3: #300d0c;
+      --sti-ref-danger-4: #410d0d;
+      --sti-ref-danger-5: #510d0f;
+      --sti-ref-danger-6: #610f12;
+      --sti-ref-danger-7: #761719;
+      --sti-ref-danger-8: #972728;
+      --sti-ref-danger-11: #fe8b83;
+      --sti-ref-danger-12: #ffecea;
+      --sti-ref-danger-ink-strong: #0b0b0c;
+      --sti-ref-danger-fill-more: #fe8b83;
+      --sti-ref-danger-fill-more-hover: #ffecea;
+      --sti-ref-danger-ink-more: #0b0b0c;
+      --sti-ref-info-1: #050c11;
+      --sti-ref-info-2: #07151c;
+      --sti-ref-info-3: #031d2a;
+      --sti-ref-info-4: #012636;
+      --sti-ref-info-5: #012f42;
+      --sti-ref-info-6: #02394e;
+      --sti-ref-info-7: #034760;
+      --sti-ref-info-8: #055e7f;
+      --sti-ref-info-10: #70cffe;
+      --sti-ref-info-11: #69bbed;
+      --sti-ref-info-12: #e5f3ff;
+      --sti-ref-info-ink-strong: #0b0b0c;
+      --sti-ref-info-fill-more-hover: #70cffe;
+      --sti-ref-focus-ring: #50c2f6;
+      --sti-ref-signal-text: #50c2f6;
+      --sti-ref-shadow-1: rgb(3 3 4 / 0.6);
+      --sti-ref-shadow-2: rgb(3 3 4 / 0.4);
+      --sti-ref-scrim: rgb(3 3 4 / 0.7);
+    }
+    :root[data-theme="light"],
+    :root[data-theme="light"] [data-theme],
+    :root[data-theme="light"] [data-brand="stisocial"],
+    :root[data-theme="light"] [data-brand="stisocial"] [data-theme]:not([data-brand]:not([data-brand="stisocial"])):not([data-brand="stisocial"] [data-brand]:not([data-brand="stisocial"]) [data-theme]) {
+      --sti-ref-neutral-1: #fcfcfc;
+      --sti-ref-neutral-2: #f8f8f9;
+      --sti-ref-neutral-3: #f0f0f2;
+      --sti-ref-neutral-4: #e8e8ec;
+      --sti-ref-neutral-5: #e1e1e5;
+      --sti-ref-neutral-6: #d8d8dd;
+      --sti-ref-neutral-7: #ccccd2;
+      --sti-ref-neutral-8: #b8b8bf;
+      --sti-ref-neutral-9: #727279;
+      --sti-ref-neutral-10: #67676e;
+      --sti-ref-neutral-11: #64646b;
+      --sti-ref-neutral-12: #19191d;
+      --sti-ref-neutral-ink-strong: #fcfcfc;
+      --sti-ref-neutral-fill-more: #64646b;
+      --sti-ref-neutral-fill-more-hover: #19191d;
+      --sti-ref-neutral-ink-more: #fcfcfc;
+      --sti-ref-accent-1: #f9fdff;
+      --sti-ref-accent-2: #f1faff;
+      --sti-ref-accent-3: #e0f4ff;
+      --sti-ref-accent-4: #d0eeff;
+      --sti-ref-accent-5: #bfe8fe;
+      --sti-ref-accent-6: #abe2fe;
+      --sti-ref-accent-7: #8ed8fe;
+      --sti-ref-accent-8: #67c6f4;
+      --sti-ref-accent-10: #3eb5ea;
+      --sti-ref-accent-11: #076997;
+      --sti-ref-accent-12: #02314d;
+      --sti-ref-accent-ink-strong: #fcfcfc;
+      --sti-ref-accent-fill-more-hover: #3eb5ea;
+      --sti-ref-success-1: #f9fdfa;
+      --sti-ref-success-2: #f1fbf3;
+      --sti-ref-success-3: #e0f8e5;
+      --sti-ref-success-4: #cef5d6;
+      --sti-ref-success-5: #bdf0c9;
+      --sti-ref-success-6: #aceabc;
+      --sti-ref-success-7: #98e1ab;
+      --sti-ref-success-8: #79d092;
+      --sti-ref-success-11: #087544;
+      --sti-ref-success-12: #023820;
+      --sti-ref-success-ink-strong: #fcfcfc;
+      --sti-ref-success-fill-more: #087544;
+      --sti-ref-success-fill-more-hover: #023820;
+      --sti-ref-success-ink-more: #fcfcfc;
+      --sti-ref-warning-1: #fefcf8;
+      --sti-ref-warning-2: #fef7ed;
+      --sti-ref-warning-3: #fdeed6;
+      --sti-ref-warning-4: #fde5bf;
+      --sti-ref-warning-5: #fcdda9;
+      --sti-ref-warning-6: #f8d394;
+      --sti-ref-warning-7: #f1c67b;
+      --sti-ref-warning-8: #e2b055;
+      --sti-ref-warning-10: #e4a623;
+      --sti-ref-warning-11: #8a5306;
+      --sti-ref-warning-12: #462401;
+      --sti-ref-warning-ink-strong: #fcfcfc;
+      --sti-ref-warning-fill-more-hover: #e4a623;
+      --sti-ref-danger-1: #fffbfb;
+      --sti-ref-danger-2: #fff6f5;
+      --sti-ref-danger-3: #ffebe9;
+      --sti-ref-danger-4: #ffe1de;
+      --sti-ref-danger-5: #fed6d2;
+      --sti-ref-danger-6: #fecac5;
+      --sti-ref-danger-7: #feb9b2;
+      --sti-ref-danger-8: #fe9992;
+      --sti-ref-danger-11: #b22027;
+      --sti-ref-danger-12: #570e0d;
+      --sti-ref-danger-ink-strong: #fcfcfc;
+      --sti-ref-danger-fill-more: #b22027;
+      --sti-ref-danger-fill-more-hover: #570e0d;
+      --sti-ref-danger-ink-more: #fcfcfc;
+      --sti-ref-info-1: #f9fdff;
+      --sti-ref-info-2: #f1faff;
+      --sti-ref-info-3: #e0f4ff;
+      --sti-ref-info-4: #d0eeff;
+      --sti-ref-info-5: #bfe8fe;
+      --sti-ref-info-6: #abe2fe;
+      --sti-ref-info-7: #8ed8fe;
+      --sti-ref-info-8: #67c6f4;
+      --sti-ref-info-10: #3eb5ea;
+      --sti-ref-info-11: #076997;
+      --sti-ref-info-12: #02314d;
+      --sti-ref-info-ink-strong: #fcfcfc;
+      --sti-ref-info-fill-more-hover: #3eb5ea;
+      --sti-ref-focus-ring: #076997;
+      --sti-ref-signal-text: #076997;
+      --sti-ref-shadow-1: rgb(11 11 12 / 0.1);
+      --sti-ref-shadow-2: rgb(11 11 12 / 0.06);
+      --sti-ref-scrim: rgb(11 11 12 / 0.4);
+    }
+    @media (prefers-color-scheme: light) {
+      :root[data-theme="system"],
+      :root[data-theme="system"] [data-theme],
+      :root[data-theme="system"] [data-brand="stisocial"],
+      :root[data-theme="system"] [data-brand="stisocial"] [data-theme]:not([data-brand]:not([data-brand="stisocial"])):not([data-brand="stisocial"] [data-brand]:not([data-brand="stisocial"]) [data-theme]) {
+        --sti-ref-neutral-1: #fcfcfc;
+        --sti-ref-neutral-2: #f8f8f9;
+        --sti-ref-neutral-3: #f0f0f2;
+        --sti-ref-neutral-4: #e8e8ec;
+        --sti-ref-neutral-5: #e1e1e5;
+        --sti-ref-neutral-6: #d8d8dd;
+        --sti-ref-neutral-7: #ccccd2;
+        --sti-ref-neutral-8: #b8b8bf;
+        --sti-ref-neutral-9: #727279;
+        --sti-ref-neutral-10: #67676e;
+        --sti-ref-neutral-11: #64646b;
+        --sti-ref-neutral-12: #19191d;
+        --sti-ref-neutral-ink-strong: #fcfcfc;
+        --sti-ref-neutral-fill-more: #64646b;
+        --sti-ref-neutral-fill-more-hover: #19191d;
+        --sti-ref-neutral-ink-more: #fcfcfc;
+        --sti-ref-accent-1: #f9fdff;
+        --sti-ref-accent-2: #f1faff;
+        --sti-ref-accent-3: #e0f4ff;
+        --sti-ref-accent-4: #d0eeff;
+        --sti-ref-accent-5: #bfe8fe;
+        --sti-ref-accent-6: #abe2fe;
+        --sti-ref-accent-7: #8ed8fe;
+        --sti-ref-accent-8: #67c6f4;
+        --sti-ref-accent-10: #3eb5ea;
+        --sti-ref-accent-11: #076997;
+        --sti-ref-accent-12: #02314d;
+        --sti-ref-accent-ink-strong: #fcfcfc;
+        --sti-ref-accent-fill-more-hover: #3eb5ea;
+        --sti-ref-success-1: #f9fdfa;
+        --sti-ref-success-2: #f1fbf3;
+        --sti-ref-success-3: #e0f8e5;
+        --sti-ref-success-4: #cef5d6;
+        --sti-ref-success-5: #bdf0c9;
+        --sti-ref-success-6: #aceabc;
+        --sti-ref-success-7: #98e1ab;
+        --sti-ref-success-8: #79d092;
+        --sti-ref-success-11: #087544;
+        --sti-ref-success-12: #023820;
+        --sti-ref-success-ink-strong: #fcfcfc;
+        --sti-ref-success-fill-more: #087544;
+        --sti-ref-success-fill-more-hover: #023820;
+        --sti-ref-success-ink-more: #fcfcfc;
+        --sti-ref-warning-1: #fefcf8;
+        --sti-ref-warning-2: #fef7ed;
+        --sti-ref-warning-3: #fdeed6;
+        --sti-ref-warning-4: #fde5bf;
+        --sti-ref-warning-5: #fcdda9;
+        --sti-ref-warning-6: #f8d394;
+        --sti-ref-warning-7: #f1c67b;
+        --sti-ref-warning-8: #e2b055;
+        --sti-ref-warning-10: #e4a623;
+        --sti-ref-warning-11: #8a5306;
+        --sti-ref-warning-12: #462401;
+        --sti-ref-warning-ink-strong: #fcfcfc;
+        --sti-ref-warning-fill-more-hover: #e4a623;
+        --sti-ref-danger-1: #fffbfb;
+        --sti-ref-danger-2: #fff6f5;
+        --sti-ref-danger-3: #ffebe9;
+        --sti-ref-danger-4: #ffe1de;
+        --sti-ref-danger-5: #fed6d2;
+        --sti-ref-danger-6: #fecac5;
+        --sti-ref-danger-7: #feb9b2;
+        --sti-ref-danger-8: #fe9992;
+        --sti-ref-danger-11: #b22027;
+        --sti-ref-danger-12: #570e0d;
+        --sti-ref-danger-ink-strong: #fcfcfc;
+        --sti-ref-danger-fill-more: #b22027;
+        --sti-ref-danger-fill-more-hover: #570e0d;
+        --sti-ref-danger-ink-more: #fcfcfc;
+        --sti-ref-info-1: #f9fdff;
+        --sti-ref-info-2: #f1faff;
+        --sti-ref-info-3: #e0f4ff;
+        --sti-ref-info-4: #d0eeff;
+        --sti-ref-info-5: #bfe8fe;
+        --sti-ref-info-6: #abe2fe;
+        --sti-ref-info-7: #8ed8fe;
+        --sti-ref-info-8: #67c6f4;
+        --sti-ref-info-10: #3eb5ea;
+        --sti-ref-info-11: #076997;
+        --sti-ref-info-12: #02314d;
+        --sti-ref-info-ink-strong: #fcfcfc;
+        --sti-ref-info-fill-more-hover: #3eb5ea;
+        --sti-ref-focus-ring: #076997;
+        --sti-ref-signal-text: #076997;
+        --sti-ref-shadow-1: rgb(11 11 12 / 0.1);
+        --sti-ref-shadow-2: rgb(11 11 12 / 0.06);
+        --sti-ref-scrim: rgb(11 11 12 / 0.4);
+      }
+    }
+  }
+  /* Windows zorunlu renkler: anlamlı katman kullanıcının sistem paletini izler */
+  @media (forced-colors: active) {
+    :where(:root, [data-brand], [data-theme]) {
+      --sti-bg-canvas: Canvas;
+      --sti-bg-subtle: Canvas;
+      --sti-bg-surface: Canvas;
+      --sti-bg-surface-hover: Canvas;
+      --sti-bg-surface-active: Canvas;
+      --sti-bg-inverse: Canvas;
+      --sti-border-subtle: GrayText;
+      --sti-border: CanvasText;
+      --sti-border-strong: CanvasText;
+      --sti-border-control: CanvasText;
+      --sti-border-selected: CanvasText;
+      --sti-fg: CanvasText;
+      --sti-fg-muted: CanvasText;
+      --sti-fg-inverse: CanvasText;
+      --sti-fg-link: LinkText;
+      --sti-fg-link-hover: LinkText;
+      --sti-fg-signal: CanvasText;
+      --sti-focus-ring: Highlight;
+      --sti-selection-bg: Highlight;
+      --sti-selection-fg: HighlightText;
+      --sti-scrim: transparent;
+      --sti-shadow-color-1: transparent;
+      --sti-shadow-color-2: transparent;
+      --sti-fill-neutral: Highlight;
+      --sti-fill-neutral-hover: Highlight;
+      --sti-fg-on-neutral: HighlightText;
+      --sti-fill-accent: Highlight;
+      --sti-fill-accent-hover: Highlight;
+      --sti-fg-on-accent: HighlightText;
+      --sti-fill-success: Highlight;
+      --sti-fill-success-hover: Highlight;
+      --sti-fg-on-success: HighlightText;
+      --sti-fill-warning: Highlight;
+      --sti-fill-warning-hover: Highlight;
+      --sti-fg-on-warning: HighlightText;
+      --sti-fill-danger: Highlight;
+      --sti-fill-danger-hover: Highlight;
+      --sti-fg-on-danger: HighlightText;
+      --sti-fill-info: Highlight;
+      --sti-fill-info-hover: Highlight;
+      --sti-fg-on-info: HighlightText;
+      --sti-fg-accent: CanvasText;
+      --sti-fg-accent-strong: CanvasText;
+      --sti-bg-accent-subtle: Canvas;
+      --sti-border-accent: CanvasText;
+      --sti-fg-success: CanvasText;
+      --sti-fg-success-strong: CanvasText;
+      --sti-bg-success-subtle: Canvas;
+      --sti-border-success: CanvasText;
+      --sti-fg-warning: CanvasText;
+      --sti-fg-warning-strong: CanvasText;
+      --sti-bg-warning-subtle: Canvas;
+      --sti-border-warning: CanvasText;
+      --sti-fg-danger: CanvasText;
+      --sti-fg-danger-strong: CanvasText;
+      --sti-bg-danger-subtle: Canvas;
+      --sti-border-danger: CanvasText;
+      --sti-fg-info: CanvasText;
+      --sti-fg-info-strong: CanvasText;
+      --sti-bg-info-subtle: Canvas;
+      --sti-border-info: CanvasText;
+    }
+  }
+}