/* =========================================================================
   artnek.ru — Design Tokens
   ========================================================================= */

:root,
[data-theme="light"] {
  --color-bg:              #f5f4f0;
  --color-surface:         #f8f7f4;
  --color-surface-2:       #fafaf8;
  --color-border:          rgba(26, 24, 20, 0.10);
  --color-divider:         rgba(26, 24, 20, 0.07);
  --color-text:            #1a1814;
  --color-text-muted:      #6b6a66;
  --color-text-faint:      #b0afa9;
  --color-text-inverse:    #f8f7f4;

  --color-primary:         #003366;
  --color-primary-hover:   #00264d;
  --color-primary-light:   #e8eef5;

  --color-accent:          #b8860b;
  --color-accent-hover:    #97700a;
  --color-accent-light:    #f5f0e8;

  --color-success:         #1f7a3d;
  --color-success-light:   #e6f3ec;
  --color-warning:         #b35900;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;

  --font-display: 'Zodiak', Georgia, 'Times New Roman', serif;
  --font-body:    'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;
  --content-xwide:   1320px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --transition:       180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:  320ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(15, 20, 35, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 20, 35, 0.09);
  --shadow-lg: 0 12px 32px rgba(15, 20, 35, 0.13);

  --nav-height: 64px;
}

[data-theme="dark"] {
  --color-bg:           #131212;
  --color-surface:      #181716;
  --color-surface-2:    #1e1d1c;
  --color-border:       rgba(205, 204, 202, 0.10);
  --color-divider:      rgba(205, 204, 202, 0.07);
  --color-text:         #cdccca;
  --color-text-muted:   #797876;
  --color-text-faint:   #5a5957;
  --color-text-inverse: #1a1814;

  --color-primary:       #5b8ac7;
  --color-primary-hover: #4070ab;
  --color-primary-light: #1c2535;

  --color-accent:        #d4a017;
  --color-accent-hover:  #b6890e;
  --color-accent-light:  #2a2415;

  --color-success:       #4caf6b;
  --color-success-light: #1a2a20;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-bg:           #131212;
    --color-surface:      #181716;
    --color-surface-2:    #1e1d1c;
    --color-border:       rgba(205, 204, 202, 0.10);
    --color-divider:      rgba(205, 204, 202, 0.07);
    --color-text:         #cdccca;
    --color-text-muted:   #797876;
    --color-text-faint:   #5a5957;
    --color-text-inverse: #1a1814;
    --color-primary:       #5b8ac7;
    --color-primary-hover: #4070ab;
    --color-primary-light: #1c2535;
    --color-accent:        #d4a017;
    --color-accent-hover:  #b6890e;
    --color-accent-light:  #2a2415;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}