/* Google Fonts loaded via HTML <head> with preconnect */


/* =============================================================================
   DESIGN TOKENS - Dalija Dekor redesign
   =============================================================================

   Brand colours are the CLIENT's own two-colour palette (magenta #E6177C,
   deep blue #095487) - marked [CLIENT] below, with everything derived from
   them marked [DERIVED]. They replace the reference site's blue ramp.

   Structure, type scale, spacing, radii and motion still come from
   https://directcommerce.rs/ (WordPress + Elementor).
   Values marked [REF] were read verbatim out of the live reference CSS:
     - Elementor kit 2510 ...... wp-content/uploads/elementor/css/post-2510.css
     - Page/header/footer CSS .. wp-content/uploads/elementor/css/post-2518.css
     - Theme custom CSS ........ <style id="wp-custom-css"> in the page source
   Values marked [DERIVED] are computed from a [REF] value (documented inline).
   Values marked [SPEC] come from REDESIGN_SPEC.md, not from the reference.

   NOTE: the reference self-hosts Poppins (300/400/500/600/700) from its own
   server. We load the same family from Google Fonts instead of hotlinking it.

   This file must contain ONLY custom-property declarations on :root.
   Never put a literal color anywhere else in the codebase - reference a token.
============================================================================= */

:root {

    /* ---------------------------------------------------------------------
       BRAND / ACCENT  -  [CLIENT] two-colour house palette
       -------------------------------------------------------------------
       Supplied by the client and used INSTEAD of the reference site's blue
       ramp: magenta #E6177C as the accent, deep blue #095487 as the
       structural colour. Everything below is derived from those two.

         magenta  #E6177C  accent, CTAs, badges, highlight fills
         blue     #095487  dark surfaces, hovers, structure

       Every step records its measured WCAG contrast so the next person does
       not have to guess which token is safe for text.
    --------------------------------------------------------------------- */

    /* --- magenta ------------------------------------------------------- */
    --brand:            #E6177C;   /* [CLIENT] the identity colour. 4.39:1 on white -
                                      just under AA, so it must NEVER carry small text
                                      and never sit under white text. Decorative fills,
                                      tints, borders, badges and icons only. */
    --brand-text:       #CF1570;   /* [DERIVED] --brand darkened 10%: 5.26:1 on white,
                                      4.95:1 on --surface-muted, 5.26:1 with white on
                                      top. THIS is the one for links, accent words,
                                      eyebrows and any filled control with a white
                                      label. Visually the same pink. */
    --brand-strong:     #B31261;   /* [DERIVED] 6.61:1 - pressed / active states */
    --brand-light:      #CF1570;;;   /* [DERIVED] 4.52:1 on --surface-inverse - accent
                                      text on the dark blue panels */
    --brand-pale:       #FBDCEB;   /* [DERIVED] 6.29:1 on --surface-inverse - eyebrow
                                      labels and focus rings on dark panels */
    --brand-tint:       #E6177C1F; /* [DERIVED] magenta @ 12% - soft highlight fills */

    /* --- deep blue ----------------------------------------------------- */
    --brand-deep:       #095487;   /* [CLIENT] 7.99:1 on white and white-on-it - safe
                                      for text either way. Dark surfaces, button
                                      hovers, structural accents. */
    --brand-deep-dark:  #07436C;   /* [DERIVED] 10.35:1 with white - footer bottom bar */
    --brand-deep-tint:  #0954871A; /* [DERIVED] deep blue @ 10% - quiet blue fills */

    /* Photo scrim. A deeply darkened house blue rather than neutral black, so
       overlays on hero/category imagery stay in the brand family. Exposed as
       bare channels so gradients can vary the alpha:
           background: rgb(var(--scrim-rgb) / 88%)
       White on the solid colour measures 15.7:1. */
    --scrim-rgb:        255 255 255;

    /* ---------------------------------------------------------------------
       SURFACES
    --------------------------------------------------------------------- */
    --surface:          #FFFFFF;   /* [REF] --e-global-color-secondary - cards, header */
    --surface-alt:      #FCFCFC;   /* [REF] alternating section background */
    --surface-tint:     #FAFEFF;   /* [REF] --e-global-color-77540d2 - cool-white band */
    --surface-muted:    #F8F8F9;   /* [REF] search field / pill backgrounds */
    --surface-sunken:   #EFEFEF;   /* [REF] page background behind the content column */
    --surface-inverse:  #095487;   /* [CLIENT] the house blue is now the dark band -
                                      utility bar, footer, contact panel. White text
                                      on it measures 7.99:1. */
    --surface-inverse-alt: #07436C;/* [CLIENT] darker step for the footer bottom bar,
                                      10.35:1 with white. */

    /* ---------------------------------------------------------------------
       TEXT
    --------------------------------------------------------------------- */
    --text:             #333333;   /* [REF] --e-global-color-text - body + headings */
    --text-strong:      #231F20;   /* [REF] near-black, used for emphasis */
    --text-muted:       #6E6E6E;   /* [DERIVED + A11Y] the reference has no dedicated
                                      muted body colour. First pick (#7A7A7A) measured
                                      4.29:1 on white and failed AA, so it was darkened
                                      to #6E6E6E: 5.10:1 on white, 4.80:1 on
                                      --surface-muted. */
    --text-slate:       #464D67;   /* [REF] slate heading color used on feature cards */
    --text-inverse:     #FFFFFF;   /* [REF] text on dark surfaces */
    --text-inverse-muted: #C9D6E2; /* [DERIVED] cool blue-grey secondary text on the
                                      dark blue surface: 5.40:1 on --surface-inverse.
                                      (The old neutral #D3D3D3 read muddy on blue.) */
    --text-on-brand:    #FFFFFF;   /* white label on --brand-text / --brand-deep fills */

    /* ---------------------------------------------------------------------
       BORDERS
    --------------------------------------------------------------------- */
    --border:           #EAEAEA;   /* [REF] --e-global-color-3046d25 - the site's default hairline */
    --border-subtle:    #EFEFEF;   /* [REF] lighter divider */
    --border-strong:    #D3D3D3;   /* [REF] emphasised divider */
    --border-inverse:   #2E6E9E;   /* [DERIVED] hairline on the dark blue surfaces */
    --border-brand:     #CF1570;   /* [DERIVED] focus ring / active outline. 5.26:1 on
                                      white - well past the 3:1 WCAG 1.4.11 minimum
                                      for a non-text indicator. On dark panels the
                                      ring switches to --brand-pale (components.css). */

    /* ---------------------------------------------------------------------
       STATUS / SUPPORTING ACCENTS
    --------------------------------------------------------------------- */
    --accent-warm:      #FBB040;   /* [REF] rating stars / warm highlight.
                                      1.84:1 on white - DECORATIVE ONLY, never text. */
    --success:          #0F7A44;   /* [REF #149453 darkened for A11Y - the reference
                                      value measured 3.90:1 on white and failed AA;
                                      this is 5.40:1. */
    --success-border:   #95AC3C;   /* [REF] success notice border */

    /* ---------------------------------------------------------------------
       TYPOGRAPHY - families & weights
       [REF] Poppins everywhere (51 declarations in the reference page CSS);
       kit typography: primary 22px/600, accent 16px/600, text 400.
    --------------------------------------------------------------------- */
    --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    --fw-light:     300;  /* [REF] */
    --fw-regular:   400;  /* [REF] body copy, large section headings */
    --fw-medium:    500;  /* [REF] */
    --fw-semibold:  600;  /* [REF] buttons, labels, nav */
    --fw-bold:      700;  /* [REF] card headings, accent words */
    --fw-black:     900;  /* [REF] hero H1 only */

    /* ---------------------------------------------------------------------
       TYPOGRAPHY - size scale
       [REF] anchored on the sizes the reference actually ships:
       12 13 14 15 16 17 18 20 24 26 27 30 40 50.
    --------------------------------------------------------------------- */
    --text-xs:      0.75rem;    /* 12px [REF] */
    --text-sm:      0.875rem;   /* 14px [REF] most common small size */
    --text-base:    1rem;       /* 16px [REF] body + buttons */
    --text-md:      1.125rem;   /* 18px [REF] */
    --text-lg:      1.25rem;    /* 20px [REF] */
    --text-xl:      1.375rem;   /* 22px [REF] kit primary heading size */
    --text-2xl:     1.5rem;     /* 24px [REF] */
    --text-3xl:     1.6875rem;  /* 27px [REF] */
    --text-4xl:     1.875rem;   /* 30px [REF] card / sub-section heading */
    --text-5xl:     2.5rem;     /* 40px [REF] section H2 */
    --text-6xl:     3.125rem;   /* 50px [REF] hero H1 */

    /* line-height & tracking */
    --leading-tight:    1.1;    /* [REF] hero H1 */
    --leading-heading:  1.3;    /* [REF] card headings */
    --leading-normal:   1.5;    /* [DERIVED] UI default */
    --leading-body:     1.6;    /* [SPEC] readable long-form copy */
    --tracking-tight:   -1px;   /* [REF] 40px section headings */
    --tracking-wide:    0.05em; /* [DERIVED] eyebrow / small-caps labels */

    /* ---------------------------------------------------------------------
       SPACING SCALE
       [REF] the reference lays out on a 5px grid (5/10/15/20 padding,
       10/20px gaps, 20px widget spacing). Extended upward for sections.
    --------------------------------------------------------------------- */
    --space-1:   5px;   /* [REF] */
    --space-2:  10px;   /* [REF] */
    --space-3:  15px;   /* [REF] */
    --space-4:  20px;   /* [REF] widget spacing / grid gap */
    --space-5:  30px;   /* [DERIVED] */
    --space-6:  40px;   /* [DERIVED] */
    --space-7:  60px;   /* [DERIVED] */
    --space-8:  80px;   /* [DERIVED] section rhythm */
    --space-9: 100px;   /* [DERIVED] */

    /* ---------------------------------------------------------------------
       RADIUS SCALE
       [REF] the reference is pill-heavy: 90px buttons, 20px cards, 4px chips.
    --------------------------------------------------------------------- */
    --radius-sm:      4px;   /* [REF] chips, small inputs */
    --radius-md:     12px;   /* [REF] */
    --radius-lg:     16px;   /* [REF] */
    --radius-xl:     20px;   /* [REF] cards, image tiles */
    --radius-pill:   90px;   /* [REF] every button on the reference */
    --radius-round: 360px;   /* [REF] fully-round wrappers */
    --radius-circle:  50%;   /* [REF] avatars, icon bubbles */

    /* ---------------------------------------------------------------------
       ELEVATION
       [SPEC] The reference is a flat, border-driven design - it ships no
       box-shadows at all (only `box-shadow:none` and one inset hairline).
       REDESIGN_SPEC.md asks for "soft diffuse shadows on cards", so these
       levels are authored, tinted with --brand so they sit in the palette.
       Use --border for anything meant to match the reference exactly.
    --------------------------------------------------------------------- */
    --shadow-1: 0 1px 2px rgba(9, 84, 135, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-2: 0 4px 12px rgba(9, 84, 135, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-3: 0 10px 28px rgba(9, 84, 135, 0.10), 0 4px 8px rgba(0, 0, 0, 0.05);
    --shadow-4: 0 20px 48px rgba(9, 84, 135, 0.14), 0 8px 16px rgba(0, 0, 0, 0.06);
    --shadow-inset-hairline: inset 0 0 0 1px rgba(0, 0, 0, 0.1); /* [REF] */

    /* ---------------------------------------------------------------------
       MOTION
       [REF] the reference transitions at 0.3s.
       [SPEC] asks for 150–250ms hover transitions - both are provided.
    --------------------------------------------------------------------- */
    --duration-fast:  150ms;  /* [SPEC] */
    --duration-base:  250ms;  /* [SPEC] default hover */
    --duration-slow:  300ms;  /* [REF] transition-duration:0.3s */
    --ease:           cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: all var(--duration-base) var(--ease);

    /* ---------------------------------------------------------------------
       LAYOUT
       [REF] the reference container is 1440px, tablet 1024, mobile 767.
       [SPEC] this redesign targets a ~1200px content column; the reference
       width is kept as --container-wide for full-bleed / showcase rows.
    --------------------------------------------------------------------- */
    --container-max:   1200px;  /* [SPEC] */
    --container-wide:  1440px;  /* [REF] --container-max-width */
    --container-pad:     24px;  /* [DERIVED] matches the current site's gutter */
    --container-pad-sm:  20px;  /* [DERIVED] mobile gutter */

    /* Breakpoints are listed for reference only - CSS media queries cannot
       consume custom properties. Keep base.css in sync with these:
         desktop  >= 1024px
         tablet    768px – 1023px   [REF] Elementor tablet break is 1024
         mobile    <  768px         [REF] Elementor mobile break is 767      */

    /* ---------------------------------------------------------------------
       Z-INDEX SCALE
    --------------------------------------------------------------------- */
    --z-base:       1;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-header:    300;
    --z-overlay:   400;
    --z-drawer:    500;
    --z-modal:     600;
    --z-toast:     700;
}
