/*!
 * Theme Name:  3T Oman
 * Theme URI:   https://3toman.com
 * Author:      3T Oman
 * Description: Custom WooCommerce theme for 3T Oman watch retail, Muscat.
 * Version:     1.0.428
 * Requires at least: 6.0
 * Tested up to:      6.7
 * WC requires at least: 8.0
 * WC tested up to:      9.4
 * License:     Proprietary
 * Text Domain: toman
 */

/* ================================================================
   DESIGN TOKENS
   Single source of truth. All other files reference these vars.
   ================================================================ */

:root {
  /* --- Brand palette --- */
  --color-navy:        #0B2540;
  --color-navy-light:  #163452;
  --color-navy-dark:   #071929;
  /* Logo blue (from the 3T mark) — replaces the old cyan accent everywhere.
     Pixel-sampled from the actual logo file: rgb(38, 85, 194). */
  --color-blue:        #2655C2;
  --color-blue-light:  #6788D4;
  --color-blue-dark:   #1D4092;

  /* --- Neutrals --- */
  --color-white:       #FFFFFF;
  --color-off-white:   #F5F6F7;
  /* A soft, barely-off-white for cards/surfaces — pure #FFFFFF sitting
     directly on --color-bg read as glary/clinical (user feedback:
     "too bright"). --color-white stays pure white for its other jobs
     (text/logos on navy, etc.) — only --color-surface moves. */
  --color-surface-soft: #FAFAF9;
  --color-gray-100:    #F1F3F5;
  --color-gray-200:    #E9ECEF;
  --color-gray-300:    #DEE2E6;
  --color-gray-500:    #ADB5BD;
  --color-gray-600:    #6C757D;
  --color-gray-700:    #495057;
  --color-gray-800:    #343A40;

  /* --- Semantic aliases --- */
  --color-bg:          var(--color-off-white);
  --color-surface:     var(--color-surface-soft);
  --color-nav-bg:      var(--color-navy);
  --color-accent:      var(--color-blue);
  --color-text:        var(--color-navy);
  /* Deliberately its own value, not var(--color-gray-600) (#6C757D) —
     that gray only measures 4.33:1 against --color-bg (#F5F6F7),
     under the WCAG AA 4.5:1 minimum for normal-size text, and this
     token is used at small sizes sitewide (labels, dates, hints).
     #5F6970 is barely different visually but clears 5.19:1. Left
     --color-gray-600 itself untouched — its one other use (a disabled
     button's text) isn't held to the same contrast requirement. */
  --color-text-muted:  #5F6970;
  --color-border:      var(--color-gray-200);
  --color-blue-subtle: rgba(38, 85, 194, 0.10);
  --color-overlay:     rgba(11, 37, 64, 0.55);

  /* --- Typography --- */
  --font:          'Montserrat', sans-serif;
  /* Montserrat stays the sitewide default (headings, buttons, nav,
     labels — everywhere the many components across this theme
     explicitly set font-family: var(--font)); this is the one
     deliberate exception, for plain running body copy only — see
     main.css's `p { font-family: var(--font-body) }`. */
  --font-body:     'Poppins', sans-serif;
  --text-xs:       0.75rem;    /* 12px */
  --text-sm:       0.875rem;   /* 14px */
  --text-base:     1rem;       /* 16px */
  --text-md:       1.125rem;   /* 18px */
  --text-lg:       1.25rem;    /* 20px */
  --text-xl:       1.5rem;     /* 24px */
  --text-2xl:      1.875rem;   /* 30px */
  --text-3xl:      2.25rem;    /* 36px */
  --fw-normal:     400;
  --fw-medium:     500;
  --fw-semi:       600;
  --fw-bold:       700;
  --fw-black:      800;
  --lh-tight:      1.25;
  --lh-normal:     1.5;
  --lh-relaxed:    1.625;
  --lh-display:    1.05;

  /* --- Display / Hero scale --- */
  --text-4xl:     3rem;                          /* 48px */
  --text-5xl:     3.75rem;                       /* 60px */
  --text-display: clamp(2.75rem, 7vw, 4.75rem);  /* fluid hero headline */
  --ls-display:  -0.025em;                       /* tight tracking for large type */
  --ls-wide:      0.08em;                        /* wide tracking for eyebrows/labels */

  /* --- Spacing (4-pt grid) --- */
  --sp-1:   0.25rem;   /*  4px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-8:   2rem;      /* 32px */
  --sp-10:  2.5rem;    /* 40px */
  --sp-12:  3rem;      /* 48px */
  --sp-16:  4rem;      /* 64px */
  --sp-20:  5rem;      /* 80px */

  /* --- Border radius --- */
  --r-sm:   0.25rem;
  --r-md:   0.5rem;
  --r-lg:   0.75rem;
  --r-xl:   1rem;
  --r-2xl:  1.5rem;
  --r-full: 9999px;

  /* --- Shadows (navy-tinted) --- */
  --shadow-sm:        0 1px 3px rgba(11,37,64,0.08), 0 1px 2px rgba(11,37,64,0.04);
  --shadow-md:        0 4px 12px rgba(11,37,64,0.10), 0 2px 4px rgba(11,37,64,0.06);
  --shadow-lg:        0 10px 30px rgba(11,37,64,0.12), 0 4px 8px rgba(11,37,64,0.08);
  --shadow-card-hover:0 16px 40px rgba(11,37,64,0.16), 0 6px 12px rgba(11,37,64,0.10);
  --shadow-glow-sm:   0 0 0 1px rgba(38,85,194,0.35), 0 2px 10px rgba(38,85,194,0.25);
  --shadow-glow-md:   0 4px 24px rgba(38,85,194,0.35), 0 0 0 1px rgba(38,85,194,0.20);

  /* --- Transitions ---
     Deceleration curve (not plain "ease") on everything by default — this
     one change ripples through every var(--t-*) transition in the theme.
     Reserve --t-spring's overshoot for things a gesture/tap actually set
     in motion (press feedback, dropped-in badges) — a menu that just
     faded in shouldn't bounce, per Apple's fluid-interfaces guidance. */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:    150ms var(--ease-out);
  --t-base:    250ms var(--ease-out);
  --t-slow:    400ms var(--ease-out);
  --t-spring:  300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Instant-feeling press feedback — no easing delay, this should read
     as "the same frame as the tap" */
  --t-press:   100ms cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Layout --- */
  --container-max: 1280px;
  --container-pad: var(--sp-4);
  --nav-h:         3.75rem;   /* 60px mobile */
  --mobile-brand-bar-h: 3.5rem; /* 56px — logo-only strip replacing the top nav on phones */
  --utility-bar-h: 2.25rem;   /* 36px — thin trust strip pinned above everything */

  /* --- Z-index scale --- */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     300;
  --z-modal:     500;
  --z-toast:     600;
}

/* Wider screens get more breathing room */
@media (min-width: 768px) {
  :root {
    --container-pad: var(--sp-6);
    --nav-h: 4.5rem;   /* 72px */
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad: var(--sp-8);
  }
}

/* ================================================================
   REDUCED TRANSPARENCY
   Glass panels (nav pill, tab bar, dropdowns, modals) go frosty/solid
   instead of blurred for users who've asked for less translucency.
   ================================================================ */
@media (prefers-reduced-transparency: reduce) {
  .site-nav,
  .tab-bar,
  .mobile-brand-bar,
  .nav-links .sub-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--color-navy) !important;
  }
}