/* DBT MIND — Design Tokens
   Колор + тайпографика. Подключай этот файл первым.
*/

@font-face {
  font-family: "DBT Body";
  src: url("./fonts/base-Light.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DBT Text";
  src: url("./fonts/Text-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DBT Display";
  src: url("./fonts/additional-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Иногда в коде используются "SF Pro" / "Soyuz Grotesk" / "BaseFont" / "TextFont" / "AdditionalFont".
   Прокидываем те же файлы под этими алиасами для совместимости. */
@font-face { font-family: "SF Pro"; src: url("./fonts/base-Light.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Soyuz Grotesk"; src: url("./fonts/additional-Bold.ttf") format("truetype"); font-weight: 700; }
@font-face { font-family: "BaseFont"; src: url("./fonts/base-Light.ttf") format("truetype"); font-weight: 300; }
@font-face { font-family: "TextFont"; src: url("./fonts/Text-Medium.ttf") format("truetype"); font-weight: 500; }
@font-face { font-family: "AdditionalFont"; src: url("./fonts/additional-Bold.ttf") format("truetype"); font-weight: 700; }

:root {
  /* === BRAND COLOR PRIMITIVES === */
  --dbt-purple-600: #9349f8;     /* primary brand purple */
  --dbt-purple-500: #8c52ff;     /* alt primary, deeper highlights */
  --dbt-purple-400: #B585FF;     /* lavender CTA, button bg */
  --dbt-purple-300: #BEA0F5;     /* lavender accent text */
  --dbt-purple-200: #D9CFFF;     /* lavender soft */
  --dbt-purple-100: #E6DFFF;     /* lavender bg */
  --dbt-purple-050: #F2EBFF;     /* very soft lavender */
  --dbt-purple-025: #f7f3ff;     /* canvas / app background */

  --dbt-pink-600: #E41C83;       /* hot CTA accent */
  --dbt-pink-200: #fdecf6;       /* soft pink bg */
  --dbt-pink-100: #f9e8f5;       /* misty pink (header gradient) */

  --dbt-cream-100: #FFF9E9;      /* warm cream (header gradient) */
  --dbt-cream-050: #FFF8E6;

  --dbt-yellow-500: #FFC700;     /* sparkle yellow */
  --dbt-yellow-400: #FFD700;     /* gold sparkle (dark theme) */
  --dbt-orange-500: #ff9800;     /* destructive-warning soft */
  --dbt-red-500:    #ff5252;     /* destructive */

  --dbt-text-primary:   #3A2E5C; /* deep plum, primary copy */
  --dbt-text-strong:    #4A2A7B; /* dark purple, headings */
  --dbt-text-muted:     rgba(86, 76, 126, 0.92);  /* body on lavender */
  --dbt-text-soft:      rgba(87, 72, 148, 0.75);  /* secondary */
  --dbt-text-faint:     rgba(87, 72, 148, 0.6);   /* timestamps */

  /* dark theme primitives */
  --dbt-dark-bg:        rgb(19, 15, 44);   /* page bg */
  --dbt-dark-surface-1: rgb(36, 27, 67);   /* card surface */
  --dbt-dark-surface-2: rgb(52, 37, 94);   /* card surface 2 */
  --dbt-dark-surface-3: #403361;           /* elevated */
  --dbt-dark-deep:      #251b43;
  --dbt-dark-text:      rgb(230, 223, 255); /* light text */

  /* === SEMANTIC === */
  --bg-app:        var(--dbt-purple-025);
  --bg-elevated:   #ffffff;
  --bg-soft:       var(--dbt-purple-100);
  --bg-card-grad:  linear-gradient(to bottom right, #ffffff, #8c52ff3d);
  --bg-header-grad: linear-gradient(to bottom right, var(--dbt-pink-100) 41%, var(--dbt-cream-050));
  --bg-status-grad: linear-gradient(to bottom right, #fffaecc9, #ece6fc);
  --bg-skill-grad:  linear-gradient(to bottom right, #eae5fd, #fdecf6);

  --fg-1:    var(--dbt-text-strong);
  --fg-2:    var(--dbt-text-primary);
  --fg-muted:var(--dbt-text-muted);
  --fg-soft: var(--dbt-text-soft);
  --fg-link: var(--dbt-purple-500);

  --accent:        var(--dbt-purple-600);
  --accent-soft:   var(--dbt-purple-400);
  --accent-pink:   var(--dbt-pink-600);
  --accent-warm:   var(--dbt-yellow-500);

  --stroke-1: rgba(127, 86, 217, 0.20);
  --stroke-2: rgba(127, 86, 217, 0.10);

  /* === RADIUS === */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* === SHADOWS === */
  --shadow-card: 0 4px 10px rgba(0,0,0,0.05);
  --shadow-card-strong: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-pill: 0 0 15px rgba(0,0,0,0.15);
  --shadow-glow: 0 4px 20px rgba(127, 86, 217, 0.25);

  /* === SPACING === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* === EASINGS === */
  --ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-spring: cubic-bezier(0.23, 1, 0.32, 1);

  /* === TYPOGRAPHY VARS === */
  --font-display: "Soyuz Grotesk", "DBT Display", sans-serif;
  --font-body:    "SF Pro", "DBT Body", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text:    "TextFont", "DBT Text", -apple-system, sans-serif;
}

/* Dark theme overrides */
.dark-theme, [data-theme="dark"] {
  --bg-app:      var(--dbt-dark-bg);
  --bg-elevated: var(--dbt-dark-surface-1);
  --bg-soft:     var(--dbt-dark-surface-3);
  --bg-card-grad: linear-gradient(to bottom, rgb(55 36 105 / 0%), rgb(52 37 94));
  --bg-header-grad: none;
  --bg-status-grad: none;

  --fg-1:    var(--dbt-dark-text);
  --fg-2:    var(--dbt-dark-text);
  --fg-muted:var(--dbt-dark-text);
  --fg-soft: rgba(230, 223, 255, 0.7);

  --stroke-1: rgba(147, 73, 248, 0.4);
}

/* === SEMANTIC TYPE === */
.dbt-display-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 35px;
  letter-spacing: -0.4px;
  color: var(--fg-1);
}
.dbt-display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 35px;
  letter-spacing: -0.4px;
  color: var(--fg-2);
}
.dbt-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23px;
  line-height: 1.2;
  color: var(--fg-1);
}
.dbt-h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--fg-muted);
}
.dbt-h3 {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 17px;
  line-height: 22px;
  color: var(--fg-2);
}
.dbt-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.4px;
  color: var(--fg-muted);
}
.dbt-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--fg-muted);
}
.dbt-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 17px;
  letter-spacing: -0.24px;
  color: var(--fg-soft);
}
.dbt-micro {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.3;
  color: var(--fg-soft);
}
.dbt-label {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 16px;
  color: var(--fg-2);
}
.dbt-cta-text {
  font-family: var(--font-body);
  font-weight: 590; /* SF semibold */
  font-size: 17px;
  letter-spacing: -0.4px;
  color: #ffffff;
}