/* ============================================================
   O.WE — Design tokens
   Przeniesione 1:1 z systemu projektowego (Claude Design handoff).
   Monochromatyczna paleta, Montserrat, rytm oparty na 4px.
   ============================================================ */

/* ---- Colors ---- */
:root {
  --owe-onyx:    #231F20;   /* primary brand ground */
  --owe-black:   #000000;   /* reserved for the mark */
  --owe-pearl:   #EEEEEF;   /* soft accent surface */
  --owe-white:   #FFFFFF;   /* space */

  --owe-silver:  #6E6A6B;   /* quiet labels/captions on light — przyciemniony z #9A9A9A do WCAG AA (≥4,5:1 na white i pearl). Ton, nie barwa — paleta pozostaje monochromatyczna. */
  --owe-mut:     #6B6667;   /* muted body text on light */
  --owe-hair:    #E4E2E2;   /* hairline borders on light */
  --owe-hair-dk: #393435;   /* hairline borders on dark */
  --owe-ash:     #8F8889;   /* muted text on dark */
  --owe-mist:    #D9D4D4;   /* body text on dark */

  --owe-bg:              var(--owe-white);
  --owe-bg-inverse:      var(--owe-onyx);
  --owe-bg-ink:          var(--owe-black);
  --owe-surface:         var(--owe-white);
  --owe-surface-soft:    var(--owe-pearl);

  --owe-text:            var(--owe-onyx);
  --owe-text-muted:      var(--owe-mut);
  --owe-text-quiet:      var(--owe-silver);

  --owe-border:          var(--owe-hair);
  --owe-border-dark:     var(--owe-hair-dk);
  --owe-border-strong:   var(--owe-onyx);
  --owe-focus:           var(--owe-onyx);
}

/* ---- Typography ---- */
:root {
  --owe-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --owe-w-thin:    200;
  --owe-w-light:   300;
  --owe-w-regular: 400;
  --owe-w-medium:  500;
  --owe-w-semi:    600;
  --owe-w-bold:    700;

  --owe-fs-display: 58px;
  --owe-fs-h1:      44px;
  --owe-fs-h2:      34px;
  --owe-fs-h3:      24px;
  --owe-fs-lead:    17px;
  --owe-fs-body:    15px;
  --owe-fs-small:   13px;
  --owe-fs-eyebrow: 11px;
  --owe-fs-micro:   9px;

  --owe-lh-tight:   1.04;
  --owe-lh-snug:    1.2;
  --owe-lh-body:    1.6;
  --owe-lh-relaxed: 1.95;

  --owe-ls-tight:   -0.005em;
  --owe-ls-normal:  0.02em;
  --owe-ls-wide:    0.16em;
  --owe-ls-wider:   0.3em;
  --owe-ls-widest:  0.46em;
}

/* ---- Spacing & layout ---- */
:root {
  --owe-space-1:  4px;
  --owe-space-2:  8px;
  --owe-space-3:  12px;
  --owe-space-4:  16px;
  --owe-space-5:  24px;
  --owe-space-6:  32px;
  --owe-space-7:  44px;
  --owe-space-8:  64px;
  --owe-space-9:  96px;
  --owe-space-10: 140px;

  --owe-maxw:      1080px;
  --owe-maxw-text: 60ch;

  --owe-section-y: clamp(72px, 11vw, 140px);
  --owe-section-x: clamp(22px, 7vw, 120px);
}

/* ---- Effects: radius, borders, shadow, motion ---- */
:root {
  --owe-radius-sm: 2px;
  --owe-radius-md: 2px;
  --owe-radius-pill: 999px;

  --owe-border-w: 1px;
  --owe-hairline:      1px solid var(--owe-hair);
  --owe-hairline-dark: 1px solid var(--owe-hair-dk);

  --owe-shadow-none: none;
  --owe-shadow-hover: 0 14px 30px rgba(0,0,0,.08);
  --owe-shadow-card:  0 10px 24px rgba(0,0,0,.05);

  --owe-ease: cubic-bezier(.22,.61,.36,1);
  --owe-dur-fast:  .25s;
  --owe-dur-mid:   .4s;
  --owe-dur-slow:  .8s;
  --owe-lift: -4px;
}