/* ============================================================
 * AZOR — Design Tokens
 * Premium SaaS for Polish public-tender analysis
 * Steel navy × copper × olive · construction-tech / legal-tech
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

:root {
  /* ===== Brand palette =========================================== */
  --navy-950: #0b1a2e;   /* deepest — text on light, hero floor */
  --navy-900: #0f2440;
  --navy-800: #14304f;
  --navy-700: #1c3d63;
  --navy-600: #2a527e;
  --navy-500: #3f6d9c;
  --navy-300: #8fa9c4;
  --navy-200: #b9c9da;
  --navy-100: #dde6ef;
  --navy-50:  #eef3f8;

  --copper-700: #8a3f0f;
  --copper-600: #b04e15;   /* primary accent — CTA, brand mark */
  --copper-500: #c95f1f;
  --copper-400: #d97939;
  --copper-300: #e89866;
  --copper-100: #f5dcc6;
  --copper-50:  #fbeee2;

  --olive-700: #4a5b1f;
  --olive-600: #5d722a;     /* status STARTUJEMY */
  --olive-500: #708a36;
  --olive-100: #dee5c4;
  --olive-50:  #eef2dc;

  --amber-600: #b8740a;     /* status WARUNKOWO */
  --amber-500: #d68a14;
  --amber-100: #f6e2b6;
  --amber-50:  #fbf1d8;

  --crimson-700: #8a1d2a;   /* status NIE STARTUJEMY */
  --crimson-600: #a12433;
  --crimson-100: #f4cdd2;
  --crimson-50:  #f9e2e6;

  /* ===== Surfaces ================================================ */
  --paper:        #f6f1e9;   /* warm off-white — main bg */
  --paper-2:      #fbf7f0;   /* slightly lighter card */
  --paper-3:      #ede4d2;   /* subtle inset */
  --ink:          #0b1a2e;   /* primary text */
  --ink-2:        #2a3d57;   /* secondary text */
  --ink-3:        #5a6e88;   /* tertiary / meta */
  --rule:         #d9cfba;   /* hairline rules */
  --rule-strong:  #b8a98a;

  /* ===== Hero gradient base ====================================== */
  --gradient-paper:
    radial-gradient(ellipse 80% 60% at 20% 0%,    rgba(176, 78, 21, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 100% 30%, rgba(15, 36, 64, 0.06) 0%, transparent 65%),
    linear-gradient(180deg, #faf6ee 0%, #f3ecde 100%);

  --gradient-navy:
    radial-gradient(ellipse 70% 50% at 80% 0%,    rgba(217, 121, 57, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 0% 100%,   rgba(63, 109, 156, 0.25) 0%, transparent 65%),
    linear-gradient(180deg, #0f2440 0%, #0b1a2e 100%);

  /* ===== Type ==================================================== */
  --font-display: 'Fraunces', 'Söhne', Georgia, serif;
  --font-sans:    'Space Grotesk', 'Söhne', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --size-display:  72px;
  --size-h1:       44px;
  --size-h2:       28px;
  --size-h3:       20px;
  --size-lead:     18px;
  --size-body:     15px;
  --size-small:    13px;
  --size-tiny:     11px;
  --size-mono:     12px;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:    0.08em;
  --tracking-mono:    0.02em;

  /* ===== Spacing ================================================= */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ===== Shape =================================================== */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* ===== Elevation =============================================== */
  --shadow-card:  0 1px 0 rgba(15,36,64,0.04), 0 8px 24px -12px rgba(15,36,64,0.18);
  --shadow-lift:  0 1px 0 rgba(15,36,64,0.04), 0 16px 40px -16px rgba(15,36,64,0.28);
  --shadow-button: 0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 2px rgba(11,26,46,0.18), 0 4px 12px -4px rgba(176,78,21,0.45);

  --transition-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
  --transition-default: 220ms cubic-bezier(0.2, 0, 0, 1);
  --transition-slow: 480ms cubic-bezier(0.2, 0, 0, 1);
}

/* ===== Base ==================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===== Texture overlay — subtle paper grain =================== */
.texture-paper {
  position: relative;
  isolation: isolate;
}
.texture-paper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.1  0 0 0 0 0.18  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.6;
  mix-blend-mode: multiply;
  z-index: 0;
}
.texture-paper > * { position: relative; z-index: 1; }

/* ===== Type utilities ========================================== */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-tiny);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.display-serif {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: 1.08;
  font-variation-settings: "opsz" 144;
}
.mono-tag {
  font-family: var(--font-mono);
  font-size: var(--size-tiny);
  letter-spacing: var(--tracking-mono);
}

/* ===== Hairline =============================================== */
.hairline { background: var(--rule); height: 1px; width: 100%; }

/* ===== Scrollbar — slim ======================================= */
* { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ===== Selection ============================================== */
::selection { background: var(--copper-100); color: var(--ink); }

/* ===== Status badge primitives ================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--size-tiny);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid transparent;
}
.badge--go     { background: var(--olive-50);    color: var(--olive-700);   border-color: var(--olive-100); }
.badge--cond   { background: var(--amber-50);    color: var(--amber-600);   border-color: var(--amber-100); }
.badge--stop   { background: var(--crimson-50);  color: var(--crimson-700); border-color: var(--crimson-100); }
.badge--neutral{ background: var(--paper-3);     color: var(--ink-2);       border-color: var(--rule); }
.badge--copper { background: var(--copper-50);   color: var(--copper-700);  border-color: var(--copper-100); }
.badge--navy   { background: var(--navy-50);     color: var(--navy-900);    border-color: var(--navy-100); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }