@use './variables' as *;

:root {
  // Light theme palette
  color-scheme: light;

  --color-bg: #eff2f7;
  --color-bg-rgb: 239, 242, 247;
  --color-surface: #{$white};
  --color-surface-rgb: 255, 255, 255;
  --color-surface-muted: #{$neutral-20};
  --color-surface-subtle: #{$neutral-60};
  --color-surface-hover: #{$neutral-70};
  --color-surface-active: #{$neutral-100};
  --color-surface-glass: #{rgba($white, 0.94)};
  --color-skeleton: #{$neutral-80};
  --color-skeleton-highlight: #{rgba($white, 0.72)};

  --color-media-bg: #111111;
  --color-media-border: #{rgba($white, 0.08)};
  --color-media-hover: #{rgba($white, 0.06)};
  --color-media-overlay: #{rgba($black, 0.6)};
  --color-media-control-bg: #{rgba($black, 0.2)};
  --color-media-control-bg-hover: #{rgba($black, 0.3)};
  --color-media-control-text: #{$white};
  --color-media-control-text-muted: #{rgba($white, 0.8)};

  --duration-picker-text: #24242c;
  --duration-picker-muted: #7c7c89;
  --duration-picker-hover-bg: #efeff6;

  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-17: 16px;
  --font-size-18: 17px;
  --font-size-20: 18px;
  --font-size-22: 22px;
  --font-size-24: 24px;
  --font-size-26: 26px;
  --font-size-28: 28px;
  --font-size-30: 30px;
  --font-size-32: 32px;
  --font-size-34: 34px;
  --font-size-36: 36px;
  --font-size-44: 44px;

  --layout-page-padding-top: 20px;
  --layout-page-padding-right: 36px;
  --layout-page-padding-bottom: 36px;
  --layout-page-padding-left: 0px;
  --layout-route-gap: 20px;
  --layout-card-gap: 20px;
  --layout-sidebar-width: 231px;
  --layout-sidebar-collapsed-width: 44px;
  --layout-sidebar-padding-x: 20px;
  --layout-sidebar-padding-y: 20px;
  --layout-navbar-height: 54px;

  --color-text: #{$neutral-750};
  --color-text-strong: #{$neutral-900};
  --color-text-heading: #{$neutral-700};
  --color-text-muted: #{$neutral-550};
  --color-text-soft: #{$neutral-600};
  --color-text-soft-rgb: 106, 118, 142;
  --color-text-inverse: #{$white};

  --color-border: #{$neutral-175};
  --color-border-rgb: 227, 232, 240;
  --color-border-muted: #{$neutral-250};
  --color-border-strong: #{$neutral-225};
  --color-border-accent: #{$neutral-300};

  --color-primary: #{$brand-blue};
  --color-primary-rgb: 3, 29, 154;
  --color-primary-hover: #{$brand-blue-hover};
  --color-primary-muted: #{$brand-blue-soft};
  --color-primary-soft: #{$brand-blue-soft-3};
  --color-primary-tint: #{rgba($brand-blue, 0.08)};
  --color-primary-tint-soft: #{rgba($brand-blue, 0.025)};
  --color-primary-focus: #{rgba($brand-blue, 0.12)};

  --color-success: #{$success};
  --color-success-rgb: 51, 179, 67;
  --color-success-strong: #{$success-strong};
  --color-success-strong-rgb: 49, 178, 74;
  --color-success-tint: #{rgba($success, 0.15)};
  --color-success-bg: #{$success-soft};

  --color-danger: #{$danger};
  --color-danger-rgb: 221, 0, 0;
  --color-danger-strong: #{$danger-strong};
  --color-danger-tint: #{rgba($danger, 0.08)};
  --color-danger-tint-strong: #{rgba($danger, 0.12)};
  --color-danger-status-bg: #{rgba($danger, 0.15)};
  --color-danger-bg: #{$danger-soft};
  --color-danger-bg-strong: #{$danger-soft-3};

  --color-warning: #{$warning};
  --color-warning-rgb: 255, 107, 22;
  --color-warning-strong: #{$warning-strong};
  --color-warning-tint: #{rgba($warning, 0.2)};
  --color-warning-bg: #{$warning-soft};

  --color-shadow: #0f172a;
  --color-shadow-rgb: 15, 23, 42;
  --color-backdrop: #{rgba($color-shadow-rgb, 0.42)};
  --color-backdrop-soft: #{rgba($color-shadow-rgb, 0.35)};
  --color-backdrop-strong: #{rgba(#030712, 0.72)};

  --shadow-card: 5px 5px 35px -10px #{rgba($gray50-rgb, 0.3)};
  --shadow-card-soft: 2px 2px 30px -10px #{rgba($gray50-rgb, 0.3)};
  --shadow-toolbar: 5px 5px 30px -10px #{rgba($gray50-rgb, 0.3)};
  --shadow-popover: 0 18px 45px #{rgba($color-shadow-rgb, 0.2)};
  --shadow-popover-soft: 0 10px 30px #{rgba($color-shadow-rgb, 0.2)};
  --shadow-notification: 5px 5px 40px -10px #{rgba($gray50-rgb, 0.2)},
  0 18px 48px #{rgba($color-shadow-rgb, 0.05)};
  --shadow-modal: 0 24px 70px #{rgba($color-shadow-rgb, 0.22)};
  --shadow-modal-strong: 0 24px 80px #{rgba($color-shadow-rgb, 0.24)};
  --shadow-modal-dark: 0 28px 80px #{rgba($black, 0.38)};
  --shadow-avatar-preview: 0 12px 28px #{rgba($color-shadow-rgb, 0.12)},
  inset 0 0 0 1px #{rgba($color-shadow-rgb, 0.04)};
  --shadow-duration-focus: 0 10px 24px rgba(25, 25, 35, 0.1),
  inset 0 0 0 1.5px #{rgba($brand-blue, 0.16)};
  --shadow-control: 0 2px 8px #{rgba($color-shadow-rgb, 0.14)};
  --shadow-primary: 0 6px 20px -6px color-mix(in srgb, var(--color-primary) 85%, transparent);
  --shadow-danger: 0 6px 20px -6px color-mix(in srgb, var(--color-danger) 85%, transparent);

  --gray50: #{$neutral-600};
  --gray50-rgb: 106, 118, 142;
  --gray30: #{rgba($neutral-400, 0.2)};
  --gray30-rgb: 174, 188, 213;
  --gray20: #{$neutral-200};
  --gray20-rgb: 226, 231, 240;

  --text: #{$global-text};
  --text-h: #{$global-text-heading};
  --bg: var(--color-surface);
  --border: #{$global-border};
  --code-bg: #{$global-code-bg};
  --accent: #{$global-accent};
  --accent-bg: #{rgba($global-accent, 0.1)};
  --accent-border: #{rgba($global-accent, 0.5)};
  --social-bg: #{rgba($global-code-bg, 0.5)};
  --shadow: #{rgba($black, 0.1)} 0 10px 15px -3px,
  #{rgba($black, 0.05)} 0 4px 6px -2px;
}

@media (max-width: $breakpoint-wide) {
  :root {
    --layout-page-padding-right: 28px;
    --layout-page-padding-bottom: 28px;
    --layout-page-padding-left: 28px;
    --layout-card-gap: 18px;
  }
}

@media (max-width: $breakpoint-desktop) {
  :root {
    --layout-page-padding-right: 24px;
    --layout-page-padding-bottom: 24px;
    --layout-route-gap: 16px;
    --layout-card-gap: 16px;
    --layout-sidebar-width: 218px;
    --layout-sidebar-padding-x: 16px;
  }
}

@media (max-width: $breakpoint-laptop) {
  :root {
    --layout-page-padding-top: 16px;
    --layout-page-padding-right: 20px;
    --layout-page-padding-bottom: 20px;
    --layout-card-gap: 14px;
    --layout-sidebar-width: 202px;
  }
}

@media (max-width: $breakpoint-tablet) {
  :root {
    --layout-page-padding-top: 14px;
    --layout-page-padding-right: 16px;
    --layout-page-padding-bottom: 16px;
    --layout-page-padding-left: 16px;
    --layout-navbar-height: 48px;
  }
}

[data-theme='dark'] {
  // Dark theme palette
  color-scheme: dark;

  --color-bg: #242a33;
  --color-bg-rgb: 36, 42, 51;
  --color-surface: #171b22;
  --color-surface-rgb: 23, 27, 34;
  --color-surface-muted: #1d222b;
  --color-surface-subtle: #212733;
  --color-surface-hover: #303946;
  --color-surface-active: #384453;
  --color-surface-glass: rgba(23, 27, 34, 0.94);
  --color-skeleton: #2a313c;
  --color-skeleton-highlight: rgba(255, 255, 255, 0.075);

  --color-media-bg: #111111;
  --color-media-border: #{rgba($white, 0.08)};
  --color-media-hover: #{rgba($white, 0.06)};
  --color-media-overlay: #{rgba($black, 0.6)};
  --color-media-control-bg: #{rgba($black, 0.2)};
  --color-media-control-bg-hover: #{rgba($black, 0.3)};
  --color-media-control-text: #{$white};
  --color-media-control-text-muted: #{rgba($white, 0.8)};

  --duration-picker-text: #f4f7fb;
  --duration-picker-muted: #9ba5b3;
  --duration-picker-hover-bg: #303946;

  --color-text: #d4dae3;
  --color-text-strong: #f7f8fb;
  --color-text-heading: #f0f3f8;
  --color-text-muted: #929baa;
  --color-text-soft: #aeb7c5;
  --color-text-soft-rgb: 174, 183, 197;
  --color-text-inverse: #{$white};

  --color-border: #242a33;
  --color-border-rgb: 36, 42, 51;
  --color-border-muted: #29313c;
  --color-border-strong: #303946;
  --color-border-accent: #36414f;

  --color-primary: #2d8cff;
  --color-primary-rgb: 45, 140, 255;
  --color-primary-hover: #3a92fd;
  --color-primary-muted: #173a5f;
  --color-primary-soft: #112941;
  --color-primary-tint: rgba(45, 140, 255, 0.18);
  --color-primary-tint-soft: rgba(45, 140, 255, 0.09);
  --color-primary-focus: rgba(45, 140, 255, 0.25);

  --color-success: #3fd26c;
  --color-success-rgb: 63, 210, 108;
  --color-success-strong: #66e284;
  --color-success-strong-rgb: 102, 226, 132;
  --color-success-tint: rgba(63, 210, 108, 0.17);
  --color-success-bg: #133420;

  --color-danger: #ff4f5e;
  --color-danger-rgb: 255, 79, 94;
  --color-danger-strong: #ff7280;
  --color-danger-tint: rgba(255, 79, 94, 0.16);
  --color-danger-tint-strong: rgba(255, 79, 94, 0.22);
  --color-danger-status-bg: rgba(255, 79, 94, 0.18);
  --color-danger-bg: #3a1d23;
  --color-danger-bg-strong: #49232b;

  --color-warning: #ff9f43;
  --color-warning-rgb: 255, 159, 67;
  --color-warning-strong: #ffb05f;
  --color-warning-tint: rgba(255, 159, 67, 0.2);
  --color-warning-bg: #3d2b1a;

  --color-shadow: #000000;
  --color-shadow-rgb: 0, 0, 0;
  --color-backdrop: rgba(0, 0, 0, 0.54);
  --color-backdrop-soft: rgba(0, 0, 0, 0.44);
  --color-backdrop-strong: rgba(0, 0, 0, 0.76);

  --shadow-card: 0 0 1px 1px rgba(208, 226, 255, 0.07), 5px 5px 35px -10px rgba(208, 226, 255, 0.05);
  --shadow-card-soft: inset 0 0 0 1px rgba(208, 226, 255, 0.08);
  --shadow-toolbar: 0 0 1px 1px rgba(208, 226, 255, 0.1), 5px 5px 35px -10px rgba(208, 226, 255, 0.05);
  --shadow-popover: 0 18px 45px rgba(0, 0, 0, 0.36);
  --shadow-popover-soft: 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-notification:
    0 18px 44px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-modal: 0 24px 70px rgba(0, 0, 0, 0.48);
  --shadow-modal-strong: 0 24px 80px rgba(0, 0, 0, 0.52);
  --shadow-modal-dark: 0 28px 80px rgba(0, 0, 0, 0.6);
  --shadow-avatar-preview:
    0 12px 28px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-duration-focus:
    0 10px 24px rgba(0, 0, 0, 0.26),
    inset 0 0 0 1.5px rgba(45, 140, 255, 0.32);
  --shadow-control: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-primary: 0 6px 20px -6px color-mix(in srgb, var(--color-primary) 85%, transparent);
  --shadow-danger: 0 6px 20px -6px color-mix(in srgb, var(--color-danger) 85%, transparent);

  --gray50: #aeb7c5;
  --gray50-rgb: 174, 183, 197;
  --gray30: rgba(118, 130, 150, 0.22);
  --gray30-rgb: 118, 130, 150;
  --gray20: #242a33;
  --gray20-rgb: 36, 42, 51;

  --text: #d1d7e0;
  --text-h: #f7f8fb;
  --bg: var(--color-surface);
  --border: #242a33;
  --code-bg: #20242c;
  --accent: #2d8cff;
  --accent-bg: rgba(45, 140, 255, 0.14);
  --accent-border: rgba(45, 140, 255, 0.46);
  --social-bg: rgba(40, 45, 54, 0.5);
  --shadow: #{rgba($black, 0.4)} 0 10px 15px -3px,
  #{rgba($black, 0.25)} 0 4px 6px -2px;
}
