@layer greda.tokens {
  [data-gr-theme="graphite"] {
    --gr-color-canvas: light-dark(#f4f5f6, #111418);
    --gr-color-surface: light-dark(#ffffff, #181c21);
    --gr-color-surface-muted: light-dark(#e8eaed, #22272e);
    --gr-color-text: light-dark(#14171a, #f2f5f7);
    --gr-color-text-muted: light-dark(#5c636b, #adb5bf);
    --gr-color-text-subtle: light-dark(#666e77, #929ca8);
    --gr-color-text-inverse: light-dark(#ffffff, #111418);
    --gr-color-border: light-dark(#d3d7dc, #30363e);
    --gr-color-border-strong: light-dark(#7b838d, #707b87);
    --gr-color-action: light-dark(#14171a, #f2f5f7);
    --gr-color-action-hover: light-dark(#2b3036, #d7dde3);
    --gr-color-accent: light-dark(#2457d6, #7da2ff);
    --gr-color-accent-soft: light-dark(#dfe7fb, #202d4d);
    --gr-color-backdrop: light-dark(rgb(20 23 26 / 0.32), rgb(0 0 0 / 0.6));
    --gr-shadow-raised: 0 1px 2px light-dark(rgb(20 23 26 / 0.08), rgb(0 0 0 / 0.36));
    --gr-shadow-overlay: 0 12px 32px light-dark(rgb(20 23 26 / 0.16), rgb(0 0 0 / 0.56));
  }

  @supports not (color: light-dark(#000, #fff)) {
    [data-gr-theme="graphite"] {
      color-scheme: light;
      --gr-color-canvas: #f4f5f6;
      --gr-color-surface: #ffffff;
      --gr-color-surface-muted: #e8eaed;
      --gr-color-text: #14171a;
      --gr-color-text-muted: #5c636b;
      --gr-color-text-subtle: #666e77;
      --gr-color-text-inverse: #ffffff;
      --gr-color-border: #d3d7dc;
      --gr-color-border-strong: #7b838d;
      --gr-color-action: #14171a;
      --gr-color-action-hover: #2b3036;
      --gr-color-accent: #2457d6;
      --gr-color-accent-soft: #dfe7fb;
      --gr-color-backdrop: rgb(20 23 26 / 0.32);
      --gr-shadow-raised: 0 1px 2px rgb(20 23 26 / 0.08);
      --gr-shadow-overlay: 0 12px 32px rgb(20 23 26 / 0.16);
    }
  }
}