// Base palette
$transparent: transparent;
$white: #ffffff;
$black: #000000;

$neutral-950: #050505;
$neutral-900: #111827;
$neutral-850: #151a24;
$neutral-800: #1d2533;
$neutral-750: #2f3747;
$neutral-700: #30394b;
$neutral-650: #4f5b73;
$neutral-600: #6a768e;
$neutral-550: #738098;
$neutral-500: #8c96aa;
$neutral-400: #aebcd5;
$neutral-350: #c9d2e3;
$neutral-325: #cfd5df;
$neutral-300: #cfd7e6;
$neutral-250: #dbe2ee;
$neutral-225: #dfe5ef;
$neutral-200: #e2e7f0;
$neutral-175: #e3e8f0;
$neutral-150: #e4e8f0;
$neutral-125: #e5eaf2;
$neutral-100: #e9edf5;
$neutral-90: #eceef3;
$neutral-80: #edf1f6;
$neutral-70: #eef1f6;
$neutral-60: #f1f4f8;
$neutral-50: #f3f6fa;
$neutral-40: #f3f6fb;
$neutral-30: #f7f9fd;
$neutral-20: #f8fafc;

$brand-blue: #031d9a;
$brand-blue-hover: #425de8;
$brand-blue-soft: #d4deff;
$brand-blue-soft-2: #dfe6ff;
$brand-blue-soft-3: #e8edff;
$brand-blue-soft-4: #eef2ff;

$success: #33b343;
$success-strong: #31b24a;
$success-soft: #eaf8ee;

$danger: #dd0000;
$danger-strong: #e04f5f;
$danger-soft: #ffecec;
$danger-soft-2: #ffe8e8;
$danger-soft-3: #ffdede;

$warning: #ff6b16;
$warning-strong: #ff7a1a;
$warning-soft: #ff8a34;

$accent-purple: #7a3fe8;
$accent-sky: #2f80ed;
$accent-teal: #18b89b;

// Global CSS variable palette
$global-text: #6b6375;
$global-text-heading: #08060d;
$global-border: #e5e4e7;
$global-code-bg: #f4f3ec;
$global-accent: #aa3bff;

$global-dark-text: #9ca3af;
$global-dark-text-heading: #f3f4f6;
$global-dark-bg: #16171d;
$global-dark-border: #2e303a;
$global-dark-code-bg: #1f2028;
$global-dark-accent: #c084fc;
$global-dark-social-bg: #2f303a;

// Semantic colors
$color-bg: var(--color-bg);
$color-bg-rgb: var(--color-bg-rgb);
$color-surface: var(--color-surface);
$color-surface-rgb: var(--color-surface-rgb);
$color-surface-muted: var(--color-surface-muted);
$color-surface-subtle: var(--color-surface-subtle);
$color-surface-hover: var(--color-surface-hover);
$color-surface-active: var(--color-surface-active);
$color-surface-glass: var(--color-surface-glass);
$color-skeleton: var(--color-skeleton);
$color-skeleton-highlight: var(--color-skeleton-highlight);
$color-media-bg: var(--color-media-bg);
$color-media-border: var(--color-media-border);
$color-media-hover: var(--color-media-hover);
$color-media-overlay: var(--color-media-overlay);
$color-media-control-bg: var(--color-media-control-bg);
$color-media-control-bg-hover: var(--color-media-control-bg-hover);
$color-media-control-text: var(--color-media-control-text);
$color-media-control-text-muted: var(--color-media-control-text-muted);
$duration-picker-text: var(--duration-picker-text);
$duration-picker-muted: var(--duration-picker-muted);
$duration-picker-hover-bg: var(--duration-picker-hover-bg);

$color-text: var(--color-text);
$color-text-strong: var(--color-text-strong);
$color-text-heading: var(--color-text-heading);
$color-text-muted: var(--color-text-muted);
$color-text-soft: var(--color-text-soft);
$color-text-soft-rgb: var(--color-text-soft-rgb);
$color-text-inverse: var(--color-text-inverse);

$color-border: var(--color-border);
$color-border-rgb: var(--color-border-rgb);
$color-border-muted: var(--color-border-muted);
$color-border-strong: var(--color-border-strong);
$color-border-accent: var(--color-border-accent);

$color-primary: var(--color-primary);
$color-primary-rgb: var(--color-primary-rgb);
$color-primary-hover: var(--color-primary-hover);
$color-primary-muted: var(--color-primary-muted);
$color-primary-soft: var(--color-primary-soft);
$color-primary-tint: var(--color-primary-tint);
$color-primary-tint-soft: var(--color-primary-tint-soft);
$color-primary-focus: var(--color-primary-focus);

$color-success: var(--color-success);
$color-success-rgb: var(--color-success-rgb);
$color-success-strong: var(--color-success-strong);
$color-success-strong-rgb: var(--color-success-strong-rgb);
$color-success-tint: var(--color-success-tint);
$color-success-bg: var(--color-success-bg);

$color-danger: var(--color-danger);
$color-danger-rgb: var(--color-danger-rgb);
$color-danger-strong: var(--color-danger-strong);
$color-danger-tint: var(--color-danger-tint);
$color-danger-tint-strong: var(--color-danger-tint-strong);
$color-danger-status-bg: var(--color-danger-status-bg);
$color-danger-bg: var(--color-danger-bg);
$color-danger-bg-strong: var(--color-danger-bg-strong);

$color-warning: var(--color-warning);
$color-warning-rgb: var(--color-warning-rgb);
$color-warning-strong: var(--color-warning-strong);
$color-warning-tint: var(--color-warning-tint);
$color-warning-bg: var(--color-warning-bg);

// Typography
$font-size-11: var(--font-size-11);
$font-size-12: var(--font-size-12);
$font-size-13: var(--font-size-13);
$font-size-14: var(--font-size-14);
$font-size-15: var(--font-size-15);
$font-size-16: var(--font-size-16);
$font-size-17: var(--font-size-17);
$font-size-18: var(--font-size-18);
$font-size-20: var(--font-size-20);
$font-size-22: var(--font-size-22);
$font-size-24: var(--font-size-24);
$font-size-26: var(--font-size-26);
$font-size-28: var(--font-size-28);
$font-size-30: var(--font-size-30);
$font-size-32: var(--font-size-32);
$font-size-34: var(--font-size-34);
$font-size-36: var(--font-size-36);
$font-size-44: var(--font-size-44);

// Responsive breakpoints
$breakpoint-wide: 1600px;
$breakpoint-desktop: 1440px;
$breakpoint-laptop: 1280px;
$breakpoint-tablet: 1024px;

// Layout tokens
$layout-page-padding-top: var(--layout-page-padding-top);
$layout-page-padding-right: var(--layout-page-padding-right);
$layout-page-padding-bottom: var(--layout-page-padding-bottom);
$layout-page-padding-left: var(--layout-page-padding-left);
$layout-route-gap: var(--layout-route-gap);
$layout-card-gap: var(--layout-card-gap);
$layout-sidebar-width: var(--layout-sidebar-width);
$layout-sidebar-collapsed-width: var(--layout-sidebar-collapsed-width);
$layout-sidebar-padding-x: var(--layout-sidebar-padding-x);
$layout-sidebar-padding-y: var(--layout-sidebar-padding-y);
$layout-navbar-height: var(--layout-navbar-height);

@mixin wide-down {
  @media (max-width: $breakpoint-wide) {
    @content;
  }
}

@mixin desktop-down {
  @media (max-width: $breakpoint-desktop) {
    @content;
  }
}

@mixin laptop-down {
  @media (max-width: $breakpoint-laptop) {
    @content;
  }
}

@mixin tablet-down {
  @media (max-width: $breakpoint-tablet) {
    @content;
  }
}

// Shadows and overlays
$color-shadow: var(--color-shadow);
$color-shadow-rgb: var(--color-shadow-rgb);
$color-backdrop: var(--color-backdrop);
$color-backdrop-soft: var(--color-backdrop-soft);
$color-backdrop-strong: var(--color-backdrop-strong);

$shadow-card: var(--shadow-card);
$shadow-card-soft: var(--shadow-card-soft);
$shadow-toolbar: var(--shadow-toolbar);
$shadow-popover: var(--shadow-popover);
$shadow-popover-soft: var(--shadow-popover-soft);
$shadow-notification: var(--shadow-notification);
$shadow-modal: var(--shadow-modal);
$shadow-modal-strong: var(--shadow-modal-strong);
$shadow-modal-dark: var(--shadow-modal-dark);
$shadow-avatar-preview: var(--shadow-avatar-preview);
$shadow-duration-focus: var(--shadow-duration-focus);
$shadow-control: var(--shadow-control);

// Backward-compatible aliases
$gray50: var(--gray50);
$gray50-rgb: var(--gray50-rgb);
$gray30: var(--gray30);
$gray30-rgb: var(--gray30-rgb);
$gray20: var(--gray20);
$gray20-rgb: var(--gray20-rgb);
$red: $color-danger;
$red20: $color-danger-tint;
$green: $color-success;
$blue: $color-primary;
$blue20: $color-primary-muted;
$orange: $color-warning;
