/* ==========================================================================
   DFR Technical Textiles — Design Tokens
   Extracted verbatim from "DFR Filtration brochure" (12-page print master).
   Do not introduce colours, fonts or spacing values outside this file.
   ========================================================================== */

:root {

  /* ---------- Colour: brand ---------------------------------------------- */
  --c-blue:            #0091CE;  /* primary brand blue                        */
  --c-blue-light:      #00A7DE;  /* gradient terminus                         */
  --c-blue-deep:       #0F5FA6;  /* logo-blue, step badges, deep accents      */
  --c-blue-hover:      #0077AB;  /* link / CTA hover                          */
  --grad-blue:         linear-gradient(120deg, #0091CE, #00A7DE);
  --grad-blue-deep:    linear-gradient(120deg, #0F5FA6, #0091CE);

  /* ---------- Colour: neutrals ------------------------------------------- */
  --c-ink:             #3E464C;  /* headings, dark footer ground              */
  --c-ink-90:          #363D43;
  --c-ink-80:          #2E3439;
  --c-body:            #5C6670;  /* body copy                                 */
  --c-muted:           #8A949E;  /* meta, captions                            */
  --c-line:            #E3E8EE;  /* borders                                   */
  --c-line-soft:       #EEF2F5;  /* row dividers                              */
  --c-canvas:          #DDE3EA;  /* page ground (brochure sheet backdrop)     */
  --c-surface:         #FFFFFF;  /* card canvas                               */
  --c-surface-alt:     #F4F7FA;  /* tinted section band                       */

  /* ---------- Colour: tints ---------------------------------------------- */
  --c-tint:            #CFE3F2;  /* photo rings, badges                       */
  --c-tint-soft:       #EAF7FD;  /* icon wells, on-blue secondary text        */
  --c-dot-empty:       #C2CEDA;  /* unfilled rating dot                       */

  /* ---------- Typography -------------------------------------------------- */
  --f-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --f-body:    'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fw-reg: 400;  --fw-med: 500;  --fw-semi: 600;  --fw-bold: 700;  --fw-black: 800;

  /* Fluid display scale — print 37–40px page titles → responsive web */
  --t-display:  clamp(2.75rem, 1.9rem + 4.2vw, 5rem);      /* hero            */
  --t-h1:       clamp(2.25rem, 1.7rem + 2.7vw, 3.5rem);    /* page title      */
  --t-h2:       clamp(1.75rem, 1.4rem + 1.7vw, 2.625rem);  /* section title   */
  --t-h3:       clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);  /* block title     */
  --t-h4:       1.1875rem;                                  /* card title      */
  --t-h5:       1.0625rem;                                  /* sub-card title  */

  --t-lead:     clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-body:     1rem;
  --t-sm:       0.9375rem;
  --t-xs:       0.875rem;
  --t-2xs:      0.8125rem;
  --t-eyebrow:  0.75rem;

  --lh-display: 0.9;    /* brochure headings run tight                        */
  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-body:    1.55;   /* brochure body copy 1.45–1.55                       */

  --ls-display: -0.5px; /* brochure heading letter-spacing                    */
  --ls-eyebrow: 1.6px;
  --ls-label:   0.5px;

  /* ---------- Spacing (4px base) ------------------------------------------ */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;  --s-9: 48px;  --s-10: 64px;
  --s-11: 80px; --s-12: 96px; --s-13: 128px;

  /* Section rhythm — fluid vertical padding */
  --section-y:     clamp(56px, 3.2rem + 3.5vw, 104px);
  --section-y-sm:  clamp(40px, 2.4rem + 2.2vw, 72px);

  /* ---------- Layout ------------------------------------------------------ */
  --container:      1240px;
  --container-tight: 960px;
  --gutter:         clamp(20px, 4vw, 40px);
  --header-h:       76px;
  --header-h-sm:    64px;

  /* ---------- Radii ------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r:      10px;   /* brochure image / card radius                           */
  --r-lg:   16px;
  --r-pill: 999px;

  /* ---------- Elevation --------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(6, 48, 95, .06);
  --sh-2: 0 6px 20px rgba(6, 48, 95, .08);
  --sh-3: 0 12px 44px rgba(6, 48, 95, .16);   /* brochure sheet shadow        */
  --sh-header: 0 1px 0 rgba(6, 48, 95, .08), 0 6px 24px rgba(6, 48, 95, .07);

  /* ---------- Motion ------------------------------------------------------ */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  .16s;
  --dur:       .26s;
  --dur-slow:  .45s;

  /* ---------- Structural motifs ------------------------------------------- */
  --rule-w: 54px;   /* accent underline bar beneath page titles */
  --rule-h: 4px;
  --ring:   0 0 0 2px var(--c-tint);   /* circular photo ring */

  --z-header: 100;
  --z-menu:   200;
  --z-modal:  300;
}