/* Codebelt design tokens, aligned to Fluent 2 web aliases.
   The --cb-* aliases keep existing Razor/CSS components stable while the
   underlying values follow Fluent color, type, shape, spacing, and elevation. */

:root {
  color-scheme: light;

  /* Fluent spacing ramp */
  --cb-size-none: 0;
  --cb-size-20: 2px;
  --cb-size-40: 4px;
  --cb-size-60: 6px;
  --cb-size-80: 8px;
  --cb-size-100: 10px;
  --cb-size-120: 12px;
  --cb-size-160: 16px;
  --cb-size-200: 20px;
  --cb-size-240: 24px;
  --cb-size-280: 28px;
  --cb-size-320: 32px;
  --cb-size-360: 36px;
  --cb-size-400: 40px;
  --cb-size-480: 48px;
  --cb-size-520: 52px;
  --cb-size-560: 56px;

  /* Fluent shape and stroke */
  --cb-radius-sm: 2px;
  --cb-radius: 4px;
  --cb-radius-md: 4px;
  --cb-radius-lg: 6px;
  --cb-radius-xl: 8px;
  --cb-radius-pill: 999px;
  --cb-stroke-thin: 1px;
  --cb-stroke-thick: 2px;

  /* Fluent typography */
  --cb-font-sans: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --cb-font-mono: Consolas, "Courier New", Courier, monospace;
  --cb-font-size-caption: 12px;
  --cb-line-height-caption: 16px;
  --cb-font-size-body: 14px;
  --cb-line-height-body: 20px;
  --cb-font-size-subtitle: 16px;
  --cb-line-height-subtitle: 22px;
  --cb-font-size-title-3: 24px;
  --cb-line-height-title-3: 32px;
  --cb-font-size-title-2: 28px;
  --cb-line-height-title-2: 36px;
  --cb-font-size-title-1: 32px;
  --cb-line-height-title-1: 40px;
  --cb-font-size-large-title: 40px;
  --cb-line-height-large-title: 52px;
  --cb-font-size-display: 68px;
  --cb-line-height-display: 92px;

  /* Fluent motion */
  --cb-dur-fast: 100ms;
  --cb-dur: 200ms;
  --cb-dur-slow: 300ms;
  --cb-ease: cubic-bezier(0.8, 0, 0.2, 1);
  --cb-ease-decelerate: cubic-bezier(0.1, 0.9, 0.2, 1);

  /* Layout aliases */
  --cb-maxw: 1128px;
  --cb-gutter: clamp(16px, 4vw, 40px);
}

:root,
:root[data-theme="light"] {
  color-scheme: light;

  --cb-ink: #242424;
  --cb-ink-soft: #424242;
  --cb-muted: #616161;
  --cb-bg: #ffffff;
  --cb-bg-soft: #fafafa;
  --cb-bg-sunk: #f5f5f5;
  --cb-surface: #fafafa;
  --cb-surface-alt: #f5f5f5;
  --cb-rule: #d1d1d1;
  --cb-line: #d1d1d1;
  --cb-line-subtle: #e0e0e0;

  --cb-accent: #0f6cbd;
  --cb-accent-hover: #115ea3;
  --cb-accent-pressed: #0c3b5e;
  --cb-accent-soft: #ebf3fc;
  --cb-accent-soft-hover: #cfe4fa;
  --cb-accent-ink: #ffffff;
  --cb-focus-ring: #0f6cbd;
  --cb-brand-2: #0f6cbd;

  --cb-code-bg: #f5f5f5;
  --cb-code-ink: #242424;
  --cb-hero-wash-a: rgba(15, 108, 189, 0.09);
  --cb-hero-wash-b: rgba(0, 120, 212, 0.07);

  --cb-syn-kw: #0f6cbd;
  --cb-syn-ty: #5c2e91;
  --cb-syn-str: #0e700e;
  --cb-syn-num: #bc4b09;
  --cb-syn-cmt: #707070;
  --cb-syn-fn: #242424;

  --cb-g1: #E8662C;
  --cb-g2: #3757D6;
  --cb-g3: #D83F75;
  --cb-g4: #2DA44E;
  --cb-g5: #8957E5;

  --cb-alert-note: #0f6cbd;
  --cb-alert-tip: #0e700e;
  --cb-alert-important: #5c2e91;
  --cb-alert-warning: #bc4b09;
  --cb-alert-caution: #b10e1c;

  --cb-shadow-card: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14);
  --cb-shadow-card-hover: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
  --cb-shadow-flyout: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --cb-ink: #ffffff;
  --cb-ink-soft: #d6d6d6;
  --cb-muted: #adadad;
  --cb-bg: #292929;
  --cb-bg-soft: #1f1f1f;
  --cb-bg-sunk: #141414;
  --cb-surface: #333333;
  --cb-surface-alt: #242424;
  --cb-rule: #666666;
  --cb-line: #666666;
  --cb-line-subtle: #525252;

  --cb-accent: #479ef5;
  --cb-accent-hover: #62abf5;
  --cb-accent-pressed: #2886de;
  --cb-accent-soft: #082338;
  --cb-accent-soft-hover: #0c3b5e;
  --cb-accent-ink: #ffffff;
  --cb-focus-ring: #479ef5;
  --cb-brand-2: #479ef5;

  --cb-code-bg: #141414;
  --cb-code-ink: #ffffff;
  --cb-hero-wash-a: rgba(71, 158, 245, 0.13);
  --cb-hero-wash-b: rgba(98, 171, 245, 0.08);

  --cb-syn-kw: #479ef5;
  --cb-syn-ty: #c6b1de;
  --cb-syn-str: #9fd89f;
  --cb-syn-num: #faa06b;
  --cb-syn-cmt: #adadad;
  --cb-syn-fn: #ffffff;

  --cb-g1: #F2884C;
  --cb-g2: #8AA2FF;
  --cb-g3: #FF5E93;
  --cb-g4: #3FB950;
  --cb-g5: #C792FF;

  --cb-alert-note: #479ef5;
  --cb-alert-tip: #54b054;
  --cb-alert-important: #c6b1de;
  --cb-alert-warning: #faa06b;
  --cb-alert-caution: #dc626d;

  --cb-shadow-card: 0 0 2px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.28);
  --cb-shadow-card-hover: 0 0 2px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.28);
  --cb-shadow-flyout: 0 0 2px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;

    --cb-ink: #ffffff;
    --cb-ink-soft: #d6d6d6;
    --cb-muted: #adadad;
    --cb-bg: #292929;
    --cb-bg-soft: #1f1f1f;
    --cb-bg-sunk: #141414;
    --cb-surface: #333333;
    --cb-surface-alt: #242424;
    --cb-rule: #666666;
    --cb-line: #666666;
    --cb-line-subtle: #525252;

    --cb-accent: #479ef5;
    --cb-accent-hover: #62abf5;
    --cb-accent-pressed: #2886de;
    --cb-accent-soft: #082338;
    --cb-accent-soft-hover: #0c3b5e;
    --cb-accent-ink: #ffffff;
    --cb-focus-ring: #479ef5;
    --cb-brand-2: #479ef5;

    --cb-code-bg: #141414;
    --cb-code-ink: #ffffff;
    --cb-hero-wash-a: rgba(71, 158, 245, 0.13);
    --cb-hero-wash-b: rgba(98, 171, 245, 0.08);

    --cb-syn-kw: #479ef5;
    --cb-syn-ty: #c6b1de;
    --cb-syn-str: #9fd89f;
    --cb-syn-num: #faa06b;
    --cb-syn-cmt: #adadad;
    --cb-syn-fn: #ffffff;

    --cb-g1: #F2884C;
    --cb-g2: #8AA2FF;
    --cb-g3: #FF5E93;
    --cb-g4: #3FB950;
    --cb-g5: #C792FF;

    --cb-alert-note: #479ef5;
    --cb-alert-tip: #54b054;
    --cb-alert-important: #c6b1de;
    --cb-alert-warning: #faa06b;
    --cb-alert-caution: #dc626d;

    --cb-shadow-card: 0 0 2px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.28);
    --cb-shadow-card-hover: 0 0 2px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.28);
    --cb-shadow-flyout: 0 0 2px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.28);
  }
}