/*
 * Silent Heroes — Design Tokens
 * Brand Book v1.0 — single source of truth for colors, typography, spacing.
 */

:root {
  /* -------- COLORS (Brandbook v3) -------- */
  --sh-red:         #CC1B1B;
  --sh-red-dark:    #A81515;
  --sh-red-deep:    #7A0F0F;
  --sh-red-on-dark: #EB5C5C;   /* Combat Red wariant dla małego tekstu na ciemnym tle — WCAG AA 5.0:1+ na #0A0E1A/#111 */
  --sh-black:       #111111;
  --sh-black-2:     #1A1A1A;
  --sh-offwhite:    #FFFFFF;
  --sh-offwhite-2:  #EEEBE3;
  --sh-field-white: #F8F7F4;  /* Brandbook v3 Field White — używaj zamiast --sh-offwhite tam, gdzie chcesz canon */
  --sh-ink:         #333333;  /* Body text wg brandbook */
  --sh-muted:       #666666;  /* Secondary text */
  --sh-border:      #E0DDD8;  /* Border wg brandbook v3 */
  --sh-border-soft: #EDEBE4;
  --sh-gray-900:    #222222;
  --sh-gray-700:    #444444;
  --sh-gray-500:    #666666;
  --sh-gray-400:    #999999;
  --sh-gray-300:    #BBBBBB;
  --sh-gray-200:    #D0CEC8;
  --sh-white:       #FFFFFF;
  --sh-green:       hsl(104 73% 25%);  /* Brand military green — badges, akcenty */
  --sh-success:     rgb(39, 174, 96);  /* Success/save indicators (jaśniejszy, pozytywny) */

  /* Semantic */
  --sh-color-text:          var(--sh-ink);   /* #333 wg brandbook */
  --sh-color-text-muted:    var(--sh-muted); /* #666 */
  --sh-color-text-subtle:   var(--sh-gray-400);
  --sh-color-text-inverse:  var(--sh-offwhite);
  --sh-color-text-strong:   var(--sh-black);
  --sh-color-bg:            var(--sh-offwhite);
  --sh-color-bg-alt:        var(--sh-white);
  --sh-color-bg-dark:       var(--sh-black);
  --sh-color-accent:        var(--sh-red);
  --sh-color-link:          var(--sh-red);
  --sh-color-link-hover:    var(--sh-red-dark);
  --sh-color-border:        var(--sh-border);

  /* -------- TYPOGRAPHY -------- */
  --sh-font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sh-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Font sizes — fluid with clamp() */
  --sh-fs-xs:    0.75rem;    /* 12 */
  --sh-fs-sm:    0.875rem;   /* 14 */
  --sh-fs-base:  1rem;       /* 16 */
  --sh-fs-md:    1.125rem;   /* 18 */
  --sh-fs-lg:    1.25rem;    /* 20 */
  --sh-fs-xl:    1.5rem;     /* 24 */
  --sh-fs-2xl:   clamp(1.5rem, 2vw + 1rem, 2rem);         /* 24-32 */
  --sh-fs-3xl:   clamp(2rem, 3vw + 1rem, 2.75rem);        /* 32-44 */
  --sh-fs-4xl:   clamp(2.5rem, 4vw + 1rem, 3.5rem);       /* 40-56 */
  --sh-fs-5xl:   clamp(3rem, 5vw + 1rem, 4.5rem);         /* 48-72 */

  --sh-fw-light:    300;  /* Rzadko używany */
  --sh-fw-regular:  400;  /* Body domyślny — wg Brandbook v3 */
  --sh-fw-medium:   500;  /* CTA buttons, nav links */
  --sh-fw-semibold: 600;  /* H3, captions, labels */
  --sh-fw-bold:     700;  /* H1, H2, prices, badges */
  --sh-fw-extra:    800;  /* Akcenty (rzadko) */

  --sh-lh-tight:    1.1;
  --sh-lh-snug:     1.25;
  --sh-lh-normal:   1.5;
  --sh-lh-relaxed:  1.7;

  /* Letter spacing */
  --sh-tracking-tight:  -0.02em;
  --sh-tracking-normal: 0;
  --sh-tracking-wide:   0.06em;
  --sh-tracking-wider:  0.12em;
  --sh-tracking-widest: 0.28em;

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

  /* -------- LAYOUT -------- */
  --sh-container:      1200px;
  --sh-container-wide: 1440px;
  --sh-container-narrow: 760px;
  --sh-gutter:         24px;
  --sh-gutter-sm:      16px;

  /* -------- RADII -------- */
  --sh-radius-0:   0;
  --sh-radius-sm:  2px;
  --sh-radius:     4px;
  --sh-radius-md:  8px;
  --sh-radius-lg:  12px;
  --sh-radius-xl:  16px;
  --sh-radius-full: 9999px;

  /* -------- ELEVATION (shadows) -------- */
  --sh-shadow-sm: 0 1px 2px rgba(17,17,17,.05);
  --sh-shadow:    0 4px 12px rgba(17,17,17,.06);
  --sh-shadow-md: 0 12px 32px rgba(17,17,17,.08);
  --sh-shadow-lg: 0 20px 48px rgba(17,17,17,.12);

  /* -------- TRANSITIONS -------- */
  --sh-ease:         cubic-bezier(.25, .8, .25, 1);
  --sh-ease-out:     cubic-bezier(.16, 1, .3, 1);
  --sh-duration-fast:   120ms;
  --sh-duration:        200ms;
  --sh-duration-slow:   400ms;

  /* -------- Z-INDEX -------- */
  --sh-z-navbar:    100;
  --sh-z-subnav:    90;
  --sh-z-dropdown:  200;
  --sh-z-modal:     1000;
  --sh-z-toast:     2000;

  /* -------- FOCUS RING (WCAG) -------- */
  --sh-focus-ring: 0 0 0 3px rgba(204, 27, 27, 0.35);
}

/* Dark section (used as .sh-invert wrapper) */
.sh-invert {
  --sh-color-text:         var(--sh-offwhite);
  --sh-color-text-muted:   rgba(248, 247, 244, 0.72);
  --sh-color-text-subtle:  rgba(248, 247, 244, 0.45);
  --sh-color-bg:           var(--sh-black);
  --sh-color-bg-alt:       var(--sh-black-2);
  --sh-color-border:       rgba(248, 247, 244, 0.12);
  color: var(--sh-color-text);
  background: var(--sh-color-bg);
}