/* Reset so the SmLayout shell (height: 100vh) actually meets the viewport edges.
   Default UA body margin leaves an ~8px white border that, combined with the body's
   default white background, shows as a visible band below the shell when the page bg
   (--sm-color-bg) is a light gray. */
html, body {
    margin: 0;
    padding: 0;
}

:root {
    /* Layout */
    --sm-sidebar-width: 260px;
    --sm-sidebar-width-collapsed: 60px;
    --sm-navbar-height: 56px;
    --sm-content-padding: 24px;

    /* Spacing scale */
    --sm-space-0: 2px;
    --sm-space-1: 4px;
    --sm-space-2: 8px;
    --sm-space-3: 12px;
    --sm-space-4: 16px;
    --sm-space-5: 24px;
    --sm-space-6: 32px;
    --sm-space-nav-block: 20px;

    /* Radius */
    --sm-radius-sm: 4px;
    --sm-radius-md: 8px;
    --sm-radius-lg: 12px;
    --sm-radius-xl: 16px;
    --sm-radius-xl-20: 20px;
    --sm-radius-xxl: 24px;
    --sm-radius-modal: 16px;

    /* Typography */
    --sm-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --sm-font-size-sm: 12px;
    --sm-font-size-base: 14px;
    --sm-font-size-md: 15px;
    --sm-font-size-lg: 16px;
    --sm-font-size-lg-17: 17px;
    --sm-font-size-xl: 20px;
    --sm-font-size-2xl: 28px;
    --sm-font-size-3xl: 32px;
    
    /* Font weight */
    --sm-font-weight-400: 400;
    --sm-font-weight-500: 500;
    --sm-font-weight-600: 600;
    --sm-font-weight-700: 700;

    /* Animation */
    --sm-transition-fast: 120ms ease;
    --sm-transition-base: 200ms ease;

    /* Figma "Tokens" collection — canonical names (Figma: color/background/primary etc.),
       light-mode values. Dark values live in the [data-theme="dark"] block.
       New code uses these; the legacy tokens below alias into them.
       NOTE: any alias added here must ALSO be re-declared in the dark block —
       :root aliases flatten to light values before .sm-shell's dark scope applies. */
    --sm-color-background-primary: #ffffff;
    --sm-color-background-secondary: #f7f7fa;
    --sm-color-content-primary: #000000;
    --sm-color-content-secondary: #999999; /* same value in dark */
    --sm-radius-rounded: 9999px;

    /* Light theme palette (default) */
    --sm-color-bg: #f7f8fa;
    --sm-color-surface: var(--sm-color-background-primary);
    --sm-color-surface-alt: #f1f3f5;
    --sm-color-border: #e1e4e8;
    --sm-color-text: #1f2328;
    --sm-color-text-muted: #6b7280;
    --sm-color-primary: var(--sm-color-background-accent);
    --sm-color-primary-hover: #1f5ed6;
    --sm-color-primary-text: #ffffff;
    --sm-color-tertiary-text: #BDBDC6;
    --sm-color-success: #1f883d;
    --sm-color-success-text: #ffffff;
    --sm-color-warning: #bf8700;
    --sm-color-error: #cf222e;
    /* Figma color/core/negative — required-field markers, warning badges. */
    --sm-color-core-negative: #FF3A30;
    /* Figma color/core/positive — reward panels, on-state switches. */
    --sm-color-core-positive: #02CE6C;
    --sm-color-core-positive-tint: rgba(2, 206, 108, 0.05);
    /* Figma color/content/accent — inline action links/icons (e.g. Remove). */
    --sm-color-content-accent: #1A5AFF;
    --sm-color-shadow: rgba(15, 23, 42, 0.06);
    --sm-background-color-primary: #FFFFFF;
    --sm-background-color-secondary: var(--sm-color-background-secondary);
    --sm-color-background-invert: #000000;
    --sm-color-background-accent: #1A5AFF;
    --sm-color-border-primary: #D9D9D9;
    --sm-color-background-tint: #ECF2FF;
    --sm-color-positive: #02ce6c;
    --sm-color-positive-hover: #02b85f;
    
    /* Points system */
    --sm-background-color-status-primary: #fffaed;
    --sm-background-color-status-secondary: #e3f9e9;
    --sm-badge-primary-bg-color: #e9efff;
    --sm-badge-primary-text: #1a5aff;
    --sm-badge-secondary-bg-color: #f8f4fe;
    --sm-badge-secondary-text: #7c3aed;
    --sm-badge-tertiary-bg-color: #fbe7f0;
    --sm-badge-tertiary-text: #db2777;

    /* Bonus campaign status badges — brand tints, mostly identical in both themes.
       Draft follows background/secondary, which flips per theme. */
    --sm-badge-draft-bg: var(--sm-color-background-secondary);
    --sm-badge-draft-text: #999999;
    --sm-badge-scheduled-bg: #ecf2ff;
    --sm-badge-scheduled-text: #1a5aff;
    --sm-badge-active-bg: #baffe2;
    --sm-badge-active-text: #0e8903;
    --sm-badge-stopped-bg: #ffe8e6;
    --sm-badge-stopped-text: #ff3a30;
    --sm-badge-expired-bg: #ffffff;
    --sm-badge-expired-border: #d9d9d9;
    --sm-badge-expired-text: #bdbdc6;

    /* Bonus campaign table header */
    --sm-table-header-bg: var(--sm-color-background-secondary);
    --sm-table-header-text: var(--sm-color-content-primary);

    /* Form placeholder / muted search icon */
    --sm-color-placeholder: #bdbdc6;

    /* Campaign trigger icon — follows primary content color */
    --sm-color-trigger-icon: var(--sm-color-content-primary);

    /* Campaign secondary line (segment / description) */
    --sm-color-description: var(--sm-color-content-secondary);

    /* Stronger border for data-table row separators (audit log rows) */
    --sm-color-border-strong: #d9d9d9;
}

[data-theme="dark"] {
    /* Figma "Tokens" collection — dark mode values */
    --sm-color-background-primary: #101010;
    --sm-color-background-secondary: #323232;
    --sm-color-content-primary: #ffffff;

    /* IMPORTANT: data-theme sits on .sm-shell, not :root. Aliases declared in :root
       are flattened to their LIGHT values there, so every alias must be re-declared
       in this block to re-resolve against the dark canonical tokens above. */
    --sm-color-surface: var(--sm-color-background-primary);
    --sm-background-color-secondary: var(--sm-color-background-secondary);
    --sm-badge-draft-bg: var(--sm-color-background-secondary);
    --sm-table-header-bg: var(--sm-color-background-secondary);
    --sm-table-header-text: var(--sm-color-content-primary);
    --sm-color-trigger-icon: var(--sm-color-content-primary);
    --sm-color-description: var(--sm-color-content-secondary);

    --sm-color-bg: #101010;
    --sm-color-surface-alt: #1f232c;
    --sm-color-border: #2a2f3a;
    --sm-color-text: var(--sm-color-content-primary);
    --sm-color-text-muted: #9aa3ad;
    /* Figma: accent buttons keep background/accent (#1A5AFF) + content/white in dark. */
    --sm-color-primary: var(--sm-color-background-accent);
    --sm-color-primary-hover: #1f5ed6;
    --sm-color-primary-text: #ffffff;
    --sm-color-tertiary-text: #BDBDC6;
    --sm-color-success: #2ea043;
    --sm-color-warning: #d29922;
    --sm-color-error: #f85149;
    --sm-color-shadow: rgba(0, 0, 0, 0.45);
    --sm-background-color-primary: #101010;
    --sm-color-background-invert: #FFFFFF;
    --sm-color-background-accent: #1A5AFF;
    --sm-color-border-primary: #5C5C5C;
    --sm-color-background-tint: #181818;
    --sm-color-positive: #02ce6c;
    --sm-color-positive-hover: #04b762;
}