// ============================================
// Tansu Construction — Design Tokens
// Дизайн-система V5: Executive Premium
// Общий файл для всех SPFx-проектов Tnsu.
// Импорт в .module.scss: @import '../../../../styles/design-tokens';
// (глубина '../' зависит от расположения файла относительно src/)
// ============================================

// ---- Navy (Primary) ----
$navy-950: #0A1B30;
$navy-900: #0F2440;
$navy-800: #1B3A5C;
$navy-700: #244B73;
$navy-600: #2D5C8A;
$navy-100: #E8EEF4;
$navy-50:  #F4F7FA;

// ---- Gold (Accent) ----
$gold-600: #B8881A;
$gold-500: #D4A01E;
$gold-400: #E5B635;
$gold-300: #F0CC5E;
$gold-100: #FDF5E0;
$gold-50:  #FEFBF0;

// ---- Gray (Neutral) ----
$gray-900: #111827;
$gray-700: #374151;
$gray-500: #6B7280;
$gray-400: #9CA3AF;
$gray-300: #D1D5DB;
$gray-200: #E5E7EB;
$gray-100: #F3F4F6;
$gray-50:  #F9FAFB;

// ---- Semantic ----
$red-500:   #DC2626;
$red-50:    #FEF2F2;
$green-600: #15803D;
$green-50:  #F0FDF4;
$blue-600:  #2563EB;
$blue-50:   #EFF6FF;
$amber-700: #854D0E;

// ---- Typography ----
// Заголовки страниц и секций — Lora (serif)
// Весь остальной текст — Inter (sans)
$font-serif: 'Lora', Georgia, serif;
$font-sans:  'Inter', -apple-system, 'Segoe UI', sans-serif;

$fs-page-title:    24px; // Lora 600
$fs-form-title:    22px; // Lora 600
$fs-section-title: 15px; // Lora 600
$fs-body:          14px; // Inter 400
$fs-sm:            13px;
$fs-label:         12px; // Inter 500
$fs-caption:       11px;
$fs-overline:      10.5px; // uppercase, letter-spacing 1.4-1.8px

// ---- Radius ----
$r-sm: 6px;
$r-md: 10px;
$r-lg: 14px;
$r-full: 100px;

// ---- Shadows ----
$sh-1: 0 1px 2px rgba(15,36,64,.04), 0 1px 3px rgba(15,36,64,.06);
$sh-2: 0 4px 16px rgba(15,36,64,.07);
$sh-3: 0 12px 32px rgba(15,36,64,.10);
$sh-gold: 0 4px 20px rgba(212,160,30,.18);
$sh-modal: 0 24px 70px rgba(10,27,48,.25);

// ---- Gradients (фирменные) ----
$grad-header: linear-gradient(135deg, $navy-950 0%, $navy-800 85%);
$grad-gold:   linear-gradient(135deg, $gold-400, $gold-500);
$grad-gold-v: linear-gradient(180deg, $gold-400, $gold-600);
$grad-hairline: linear-gradient(90deg, $gold-400, transparent 70%);

// ---- Spacing ----
$sp-1: 4px;  $sp-2: 8px;  $sp-3: 12px;
$sp-4: 16px; $sp-5: 20px; $sp-6: 24px;
$sp-7: 28px; $sp-8: 32px;

// ---- CSS Custom Properties ----
:root {
  --navy-950: #{$navy-950}; --navy-900: #{$navy-900}; --navy-800: #{$navy-800};
  --navy-700: #{$navy-700}; --navy-600: #{$navy-600};
  --navy-100: #{$navy-100}; --navy-50: #{$navy-50};

  --gold-600: #{$gold-600}; --gold-500: #{$gold-500}; --gold-400: #{$gold-400};
  --gold-300: #{$gold-300}; --gold-100: #{$gold-100}; --gold-50: #{$gold-50};

  --gray-900: #{$gray-900}; --gray-700: #{$gray-700}; --gray-500: #{$gray-500};
  --gray-400: #{$gray-400}; --gray-300: #{$gray-300}; --gray-200: #{$gray-200};
  --gray-100: #{$gray-100}; --gray-50: #{$gray-50};

  --red-500: #{$red-500}; --red-50: #{$red-50};
  --green-600: #{$green-600}; --green-50: #{$green-50};
  --blue-600: #{$blue-600}; --blue-50: #{$blue-50};
  --amber-700: #{$amber-700};

  --sh-1: #{$sh-1}; --sh-2: #{$sh-2}; --sh-3: #{$sh-3};
  --sh-gold: #{$sh-gold}; --sh-modal: #{$sh-modal};

  --r-sm: #{$r-sm}; --r-md: #{$r-md}; --r-lg: #{$r-lg};
}

// ---- Готовые миксины ----
@mixin page-header {
  background: $grad-header;
  border-radius: $r-lg;
  padding: 26px 30px;
  position: relative;
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, $gold-500, transparent 60%);
  }
}

@mixin card-hover-gold {
  transition: .22s;
  &:hover {
    box-shadow: $sh-3;
    transform: translateY(-2px);
    border-color: $gold-300;
  }
}

@mixin btn-accent {
  background: $grad-gold;
  color: $navy-950;
  font-weight: 600;
  border: 1px solid $gold-500;
  &:hover { box-shadow: $sh-gold; transform: translateY(-1px); }
}

@mixin input-focus-gold {
  &:focus {
    outline: 0;
    border-color: $gold-500;
    box-shadow: 0 0 0 3px rgba(212,160,30,.12);
  }
}

@mixin hairline {
  height: 1px;
  background: $grad-hairline;
  border: 0;
}