/* =====================================================================
   DS Paliwa — Design Tokens (consolidated for WordPress theme)
   Wgraj ten plik do motywu (np. /assets/css/ds-paliwa-tokens.css) i
   wczytaj jako pierwszy arkusz. Wszystkie zmienne CSS (custom properties)
   sa dostepne globalnie przez var(--nazwa).
   ===================================================================== */

/* DS Paliwa — Webfonts
   Display: Archivo (sturdy, industrial grotesque — wordmark + headings)
   Body:    Source Sans 3 (clean, highly legible Polish-friendly text)
   Mono:    IBM Plex Mono (technical specs — capacities, dimensions, phone numbers)
   NOTE: served from Google Fonts. Substitute self-hosted binaries if licensing
   requires it for production. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');


/* DS Paliwa — Color tokens
   Anchored to the logo: a bright corporate blue (DS lettering + swoosh)
   over a near-black ink (the fuel drop + "PALIWA" wordmark). */
:root {
  /* ---- Brand blue ramp ---- */
  --blue-900: #0c3a63;
  --blue-800: #114e85;
  --blue-700: #155e9f; /* primary brand blue */
  --blue-600: #1c75bc; /* logo "DS" blue */
  --blue-500: #2e8bd4; /* swoosh / accent */
  --blue-400: #57a3df;
  --blue-300: #8fc1ea;
  --blue-200: #c2ddf4;
  --blue-100: #e3effa;
  --blue-50:  #f1f7fd;

  /* ---- Ink / neutral (cool steel grey) ---- */
  --ink-900: #14181d; /* near-black, logo drop */
  --ink-800: #1f262e;
  --ink-700: #2f3942;
  --ink-600: #475260;
  --ink-500: #5f6b78;
  --ink-400: #828d99;
  --ink-300: #aab3bd;
  --ink-200: #d2d8de;
  --ink-150: #e2e6eb;
  --ink-100: #eef1f4;
  --ink-50:  #f6f8fa;
  --white:   #ffffff;

  /* ---- Functional accents ---- */
  --amber-500: #e8a020; /* diesel / caution highlight */
  --amber-100: #fbeecd;
  --green-600: #2f8f5b; /* success / eco */
  --green-100: #d9f0e2;
  --red-600:   #c5453b; /* error */
  --red-100:   #f7dcd9;

  /* ---- Semantic aliases ---- */
  --brand:           var(--blue-700);
  --brand-strong:    var(--blue-800);
  --brand-bright:    var(--blue-500);

  --surface-page:    var(--ink-50);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--ink-100);
  --surface-inverse: var(--ink-900);
  --surface-brand:   var(--blue-700);
  --surface-tint:    var(--blue-50);

  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-faint:    var(--ink-400);
  --text-on-brand: var(--white);
  --text-on-dark:  var(--ink-100);
  --text-link:     var(--blue-700);

  --border-subtle: var(--ink-150);
  --border-default:var(--ink-200);
  --border-strong: var(--ink-300);
  --border-brand:  var(--blue-600);

  --focus-ring:    var(--blue-500);
}


/* DS Paliwa — Typography tokens */
:root {
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* Weights */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-black: 800; /* @kind other */

  /* Type scale (1.250 major-third-ish, tuned) */
  --fs-display: 3.75rem;  /* 60px hero */
  --fs-h1: 2.75rem;       /* 44px */
  --fs-h2: 2rem;          /* 32px */
  --fs-h3: 1.5rem;        /* 24px */
  --fs-h4: 1.25rem;       /* 20px */
  --fs-lg: 1.125rem;      /* 18px lead */
  --fs-base: 1rem;        /* 16px body */
  --fs-sm: 0.875rem;      /* 14px */
  --fs-xs: 0.75rem;       /* 12px labels */

  /* Line heights */
  --lh-tight: 1.05; /* @kind other */
  --lh-snug: 1.2; /* @kind other */
  --lh-normal: 1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* Letter spacing */
  --ls-tight: -0.02em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-wide: 0.04em; /* @kind other */
  --ls-eyebrow: 0.14em; /* @kind other */
}


/* DS Paliwa — Spacing, radius, shadow, layout tokens */
:root {
  /* Spacing scale (4px base) */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* Radii — restrained, classic-corporate (small, confident) */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Shadows — cool, low-spread, never fluffy */
  --shadow-xs: 0 1px 2px rgba(20, 24, 29, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 24, 29, 0.08), 0 1px 2px rgba(20, 24, 29, 0.05);
  --shadow-md: 0 4px 12px rgba(20, 24, 29, 0.09), 0 2px 4px rgba(20, 24, 29, 0.05);
  --shadow-lg: 0 12px 28px rgba(20, 24, 29, 0.12), 0 4px 8px rgba(20, 24, 29, 0.06);
  --shadow-brand: 0 8px 24px rgba(21, 94, 159, 0.22);

  /* Layout */
  --container-max: 1200px; /* @kind spacing */
  --container-narrow: 820px; /* @kind spacing */
  --header-h: 76px; /* @kind spacing */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-mid: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}