/* ============================================================
   Aning Usluge — design tokens
   Source of truth: designsystem/colors_and_type.css
   ============================================================ */

/* Poppins (Google Fonts). TODO(polish): self-host woff2 for EU privacy/perf. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap");

:root {
  /* ---- COLOR — brand red (the only saturated hue) ---- */
  --red-50:  #FBE8E8;
  --red-100: #F6D2D2;
  --red-200: #EDA5A5;
  --red-500: #B22A2A;
  --red-600: #9C1B1B;
  --red-700: #8B1A1A;   /* PRIMARY — logo, buttons, icons */
  --red-800: #6F1414;   /* hover/pressed */
  --red-900: #4F0E0E;

  /* ---- COLOR — ink / neutrals ---- */
  --ink-900: #0E0E0E;
  --ink-800: #161616;
  --ink-700: #1F1F1F;
  --ink-600: #3A3A40;
  --ink-500: #5C5C66;
  --ink-400: #87878F;
  --ink-300: #B5B5BD;
  --ink-200: #D8D8DC;
  --ink-100: #E8E8EC;
  --ink-50:  #F0F0F2;

  --paper:   #F4F4F6;
  --white:   #FFFFFF;

  /* ---- COLOR — slate (dark accent band only) ---- */
  --slate-600: #4A576B;
  --slate-700: #3E4A5B;
  --slate-800: #2D3645;
  --slate-900: #1E2530;

  /* ---- SEMANTIC ---- */
  --bg:           var(--paper);
  --bg-card:      var(--white);
  --bg-dark:      var(--slate-700);
  --bg-footer:    var(--ink-900);
  --bg-banner:    var(--red-50);

  --fg:           var(--ink-700);
  --fg-strong:    var(--ink-900);
  --fg-muted:     var(--ink-500);
  --fg-subtle:    var(--ink-400);
  --fg-on-dark:   var(--white);
  --fg-on-red:    var(--white);

  --accent:       var(--red-700);
  --accent-hover: var(--red-800);
  --accent-soft:  var(--red-50);

  --border:       var(--ink-100);
  --border-strong:var(--ink-200);

  /* ---- TYPE ---- */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", monospace;

  --fs-display:  clamp(3rem, 2rem + 4.5vw, 6rem);       /* editorial hero */
  --fs-h1:       clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  --fs-h2:       clamp(1.625rem, 1rem + 1.8vw, 2.5rem);
  --fs-h3:       1.375rem;
  --fs-h4:       1.125rem;
  --fs-body:     1rem;
  --fs-small:    0.9375rem;
  --fs-eyebrow:  0.8125rem;

  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  /* ---- SPACING (4px base) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  --gutter:     var(--space-6);
  --gutter-lg:  var(--space-20);
  --max-width:  1280px;
  --section-y:  var(--space-24);

  /* ---- RADII ---- */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ---- SHADOW ---- */
  --shadow-sm: 0 1px 2px  rgba(20, 20, 30, 0.04);
  --shadow:    0 4px 16px rgba(20, 20, 30, 0.06);
  --shadow-lg: 0 8px 24px rgba(20, 20, 30, 0.10);
  --shadow-xl: 0 16px 48px rgba(20, 20, 30, 0.14);

  /* ---- MOTION ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur:      150ms;
  --dur-slow: 300ms;

  /* ---- LAYERS ---- */
  --z-base: 0; --z-overlay: 10; --z-banner: 90; --z-nav: 100; --z-modal: 200;

  /* ---- BREAKPOINTS ----
     Use as: @media (max-width: 480px) { … }  /* --bp-sm */
     Names match the responsive intent, not the device:
       sm — phone (portrait); hide decorative chrome here
       md — small tablet / large phone landscape; insert intermediate grid steps here
       lg — mobile-nav threshold; hero sidebars collapse to single column
       xl — dense multi-column layouts (matrica, mandates) compress
  */
  --bp-sm: 480px;
  --bp-md: 640px;
  --bp-lg: 900px;
  --bp-xl: 1100px;

  /* ---- TOUCH (WCAG 2.5.5 minimum) ---- */
  --touch: 44px;
}