/* ============================================================
   DOS2026 — CSS Custom Properties
   Archetype: Swiss Modernist + Industrial
   Typography: Syne (display) + DM Sans (body)
   ============================================================ */

:root {

  /* ── Brand Colors ── */
  --color-blue:        #1F2A5A;   /* Primary — headers, nav, key sections */
  --color-navy:        #0F172A;   /* Darkest — hero, footer overlay */
  --color-red:         #E11D2E;   /* Action — CTAs, buttons, highlights */
  --color-red-hover:   #C4111F;   /* Deeper red on hover */
  --color-red-soft:    #F87171;   /* Soft red — hover text states */

  /* ── Neutrals ── */
  --color-white:       #FFFFFF;
  --color-off-white:   #F5F6F8;   /* Section backgrounds */
  --color-grey-light:  #E5E7EB;   /* Dividers, borders */
  --color-grey-mid:    #9CA3AF;   /* Captions, secondary text */
  --color-grey-dark:   #374151;   /* Body text, product card bg */
  --color-charcoal:    #1F2937;   /* Alternate dark sections */

  /* ── Typography ── */
  /* Raleway: geometric, confident, enterprise-grade headings — matches DocuWare aesthetic */
  /* Nunito Sans: humanist, readable, professional body — clean enterprise feel */
  --font-display: 'Raleway', system-ui, sans-serif;
  --font-body:    'Nunito Sans', system-ui, sans-serif;

  /* Type scale — fluid */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   clamp(2.5rem, 5vw, 4rem);
  --text-hero:  clamp(2.75rem, 6vw, 5rem);

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   800;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.15em;

  /* ── Spacing ── */
  --space-1:    0.25rem;   /* 4px */
  --space-2:    0.5rem;    /* 8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */
  --space-32:   8rem;      /* 128px */

  /* Section vertical padding */
  --section-py: clamp(4rem, 8vw, 7rem);

  /* ── Layout ── */
  --container-max:  1280px;
  --container-wide: 1440px;
  --container-px:   clamp(1.25rem, 5vw, 2.5rem);

  /* ── Borders ── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-full: 9999px;

  --border-thin:   1px solid var(--color-grey-light);
  --border-medium: 2px solid var(--color-grey-light);
  --border-accent: 3px solid var(--color-red);

  /* ── Shadows ── */
  --shadow-sm:
    0 1px 2px hsl(220 30% 10% / 0.06),
    0 1px 1px hsl(220 30% 10% / 0.04);

  --shadow-md:
    0 1px 1px hsl(220 30% 10% / 0.05),
    0 2px 4px hsl(220 30% 10% / 0.07),
    0 4px 8px hsl(220 30% 10% / 0.06);

  --shadow-lg:
    0 2px 4px hsl(220 30% 10% / 0.05),
    0 4px 8px hsl(220 30% 10% / 0.07),
    0 8px 16px hsl(220 30% 10% / 0.08),
    0 16px 32px hsl(220 30% 10% / 0.05);

  --shadow-card:
    0 1px 3px hsl(220 30% 10% / 0.1),
    0 4px 12px hsl(220 30% 10% / 0.08);

  /* ── Transitions ── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.76, 0, 0.24, 1);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;

  --transition-base:   var(--duration-normal) var(--ease-out-quart);
  --transition-slow:   var(--duration-slow) var(--ease-out-expo);

  /* ── Z-index ── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-overlay:  20;
  --z-nav:      100;
  --z-modal:    200;
  --z-toast:    300;

}