/* ==========================================================================
   Nubes — Colors & Type  (source of truth for brand tokens)
   ООО «НУБЕС» · качество · скорость · свобода
   ========================================================================== */

/* Ubuntu — локальные файлы из /static/fonts/ */
@font-face {
  font-family: 'Ubuntu';
  src: url('/static/fonts/Ubuntu-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('/static/fonts/Ubuntu-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Ubuntu';
  src: url('/static/fonts/Ubuntu-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --nubes-blue:         #144b8c;
  --nubes-blue-600:     #1258ab;
  --nubes-blue-700:     #144b8c;
  --nubes-blue-800:     #0f3a6e;
  --nubes-blue-900:     #0a2a54;

  --nubes-navy:         #001C34;
  --nubes-navy-ink:     #0e1a2e;

  --nubes-charcoal:     #2a2a2a;
  --nubes-charcoal-700: #3a3a3a;

  --nubes-white:        #ffffff;
  --nubes-paper:        #f4f4f4;
  --nubes-mist:         #e6e8ec;
  --nubes-grey-200:     #d4d7dc;
  --nubes-grey-300:     #b7bcc4;
  --nubes-grey-400:     #8a919c;
  --nubes-grey-500:     #5e6675;
  --nubes-grey-600:     #3f4758;
  --nubes-black:        #0b0e14;

  /* Semantic */
  --nubes-success:      #2f9e6b;
  --nubes-warning:      #c88a2b;
  --nubes-danger:       #c2442e;
  --nubes-info:         #1258ab;

  /* Semantic roles — light surface */
  --bg:             var(--nubes-white);
  --bg-alt:         var(--nubes-paper);
  --bg-muted:       var(--nubes-mist);
  --surface:        var(--nubes-white);
  --surface-raised: var(--nubes-white);

  --fg:             var(--nubes-navy-ink);
  --fg-1:           var(--nubes-navy-ink);
  --fg-2:           var(--nubes-grey-600);
  --fg-3:           var(--nubes-grey-500);
  --fg-muted:       var(--nubes-grey-400);
  --fg-on-brand:    var(--nubes-white);

  --border:         var(--nubes-grey-200);
  --border-strong:  var(--nubes-grey-300);
  --divider:        var(--nubes-mist);

  --brand:          var(--nubes-blue);
  --brand-hover:    var(--nubes-blue-800);
  --brand-press:    var(--nubes-blue-900);
  --brand-soft:     #e8eef7;

  --link:           var(--nubes-blue);
  --link-hover:     var(--nubes-blue-800);

  --focus-ring:     #4a8adf;

  /* Typography */
  --font-display: 'Ubuntu', system-ui, sans-serif;
  --font-body:    'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'Menlo', 'Consolas', monospace;

  --fs-h1:    40px;
  --fs-h2:    32px;
  --fs-h3:    24px;
  --fs-h4:    20px;
  --fs-lg:    18px;
  --fs-body:  16px;
  --fs-sm:    14px;
  --fs-xs:    12px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.02em;
  --tracking-eyebrow:  0.12em;

  /* Radii */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* Spacing (4pt grid) */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(14,26,46,.06);
  --shadow-sm:    0 2px 6px rgba(14,26,46,.06), 0 1px 2px rgba(14,26,46,.04);
  --shadow-md:    0 8px 20px rgba(14,26,46,.08), 0 2px 4px rgba(14,26,46,.04);
  --shadow-lg:    0 20px 48px rgba(14,26,46,.12);
  --shadow-brand: 0 14px 32px rgba(20,75,140,.25);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 500; }

p  { margin: 0 0 var(--sp-4); }
a  { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-std); }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }
small { font-size: var(--fs-sm); color: var(--fg-2); }
code  { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--brand); color: var(--nubes-white); }