/* ============================================================
   RabtPCS Theme — Design Tokens
   DO NOT add visual rules here. Only @font-face and :root vars.
   ============================================================ */

/* ── Almarai Font Face — Local files take priority over CDN ── */

@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Almarai Light'), local('Almarai-Light'),
       url('../fonts/Almarai-Light.woff2') format('woff2'),
       url('../fonts/Almarai-Light.woff')  format('woff');
}

@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Almarai'), local('Almarai-Regular'),
       url('../fonts/Almarai-Regular.woff2') format('woff2'),
       url('../fonts/Almarai-Regular.woff')  format('woff');
}

@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Almarai Bold'), local('Almarai-Bold'),
       url('../fonts/Almarai-Bold.woff2') format('woff2'),
       url('../fonts/Almarai-Bold.woff')  format('woff');
}

@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Almarai ExtraBold'), local('Almarai-ExtraBold'),
       url('../fonts/Almarai-ExtraBold.woff2') format('woff2'),
       url('../fonts/Almarai-ExtraBold.woff')  format('woff');
}

/* ── CSS Custom Properties ─────────────────────────────────── */

:root {

  /* Brand Colors */
  --rabtpcs-primary:          #e5451a;
  --rabtpcs-primary-dark:     #c73a14;
  --rabtpcs-primary-light:    #f05a30;
  --rabtpcs-primary-pale:     #fdf1ec;
  --rabtpcs-primary-rgb:      229, 69, 26;

  --rabtpcs-secondary:        #1a1a2e;
  --rabtpcs-secondary-rgb:    26, 26, 46;
  --rabtpcs-secondary-light:  #252540;
  --rabtpcs-accent:           #f8a004;
  --rabtpcs-accent-pale:      #fff8e6;

  /* Semantic */
  --rabtpcs-success:          #1e8a4c;
  --rabtpcs-success-rgb:      30, 138, 76;
  --rabtpcs-warning:          #e6a817;
  --rabtpcs-warning-rgb:      230, 168, 23;
  --rabtpcs-error:            #d32f2f;
  --rabtpcs-error-rgb:        211, 47, 47;
  --rabtpcs-info:             #1565c0;
  --rabtpcs-info-rgb:         21, 101, 192;

  /* RGBA overlays */
  --rabtpcs-hero-gradient-start: rgba(var(--rabtpcs-secondary-rgb), 0.85);
  --rabtpcs-hero-gradient-end:   rgba(var(--rabtpcs-primary-rgb), 0.35);
  --rabtpcs-cat-overlay-top:     rgba(var(--rabtpcs-primary-rgb), 0.80);
  --rabtpcs-cat-overlay-bottom:  rgba(var(--rabtpcs-secondary-rgb), 0.40);
  --rabtpcs-promo-overlay:       rgba(var(--rabtpcs-secondary-rgb), 0.75);
  --rabtpcs-focus-outline:       rgba(var(--rabtpcs-primary-rgb), 0.15);
  --rabtpcs-success-soft:        rgba(var(--rabtpcs-success-rgb), 0.10);
  --rabtpcs-error-soft:          rgba(var(--rabtpcs-error-rgb), 0.10);
  --rabtpcs-warning-soft:        rgba(var(--rabtpcs-warning-rgb), 0.10);
  --rabtpcs-info-soft:           rgba(var(--rabtpcs-info-rgb), 0.10);

  /* Neutrals */
  --rabtpcs-white:            #ffffff;
  --rabtpcs-off-white:        #f8f9fa;
  --rabtpcs-bg:               #f5f5f7;
  --rabtpcs-light-gray:       #e9ecef;
  --rabtpcs-mid-gray:         #adb5bd;
  --rabtpcs-dark-gray:        #6c757d;
  --rabtpcs-text:             #1d1d1f;
  --rabtpcs-text-body:        #3a3a3c;
  --rabtpcs-text-muted:       #86868b;
  --rabtpcs-text-light:       #c8cdd5;
  --rabtpcs-border:           #e0e0e5;
  --rabtpcs-black:            #0a0a0a;

  /* Typography */
  --rabtpcs-font:             'Almarai', 'Tahoma', 'Arial', sans-serif;
  --rabtpcs-text-xs:          0.75rem;    /* 12px */
  --rabtpcs-text-sm:          0.875rem;   /* 14px */
  --rabtpcs-text-base:        1rem;       /* 16px */
  --rabtpcs-text-lg:          1.125rem;   /* 18px */
  --rabtpcs-text-xl:          1.25rem;    /* 20px */
  --rabtpcs-text-2xl:         1.5rem;     /* 24px */
  --rabtpcs-text-3xl:         1.875rem;   /* 30px */
  --rabtpcs-text-4xl:         2.25rem;    /* 36px */
  --rabtpcs-text-5xl:         3rem;       /* 48px */
  --rabtpcs-text-6xl:         3.75rem;    /* 60px */

  --rabtpcs-leading-tight:    1.25;
  --rabtpcs-leading-normal:   1.6;
  --rabtpcs-leading-relaxed:  1.75;

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

  /* Layout */
  --rabtpcs-max-w:            1440px;
  --rabtpcs-pad-x:            1.25rem;
  --rabtpcs-header-h:         80px;
  --rabtpcs-header-h-mobile:  64px;

  /* Logo */
  --rabtpcs-logo-w:           180px;

  /* Border radius */
  --rabtpcs-r-xs:   3px;
  --rabtpcs-r-sm:   6px;
  --rabtpcs-r-md:   10px;
  --rabtpcs-r-lg:   14px;
  --rabtpcs-r-xl:   20px;
  --rabtpcs-r-2xl:  28px;
  --rabtpcs-r-full: 9999px;

  /* Shadows */
  --rabtpcs-shadow-xs:    0 1px 2px rgba(0,0,0,0.05);
  --rabtpcs-shadow-sm:    0 1px 4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --rabtpcs-shadow-md:    0 4px 8px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --rabtpcs-shadow-lg:    0 10px 20px rgba(0,0,0,0.09), 0 4px 8px rgba(0,0,0,0.04);
  --rabtpcs-shadow-xl:    0 20px 40px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.04);
  --rabtpcs-shadow-card:       0 2px 12px rgba(0,0,0,0.07);
  --rabtpcs-shadow-card-hover: 0 8px 28px rgba(229,69,26,0.18);
  --rabtpcs-shadow-header:     0 2px 16px rgba(0,0,0,0.08);

  /* Transitions */
  --rabtpcs-ease-fast:    150ms ease;
  --rabtpcs-ease:         250ms ease;
  --rabtpcs-ease-slow:    400ms ease;
  --rabtpcs-ease-spring:  350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index layers */
  --rabtpcs-z-below:    -1;
  --rabtpcs-z-base:      0;
  --rabtpcs-z-raised:   10;
  --rabtpcs-z-sticky:   50;
  --rabtpcs-z-header:  100;
  --rabtpcs-z-overlay: 150;
  --rabtpcs-z-modal:   200;
  --rabtpcs-z-toast:   300;

  /* Footer */
  --rabtpcs-footer-bg:      #1a1a2e;
  --rabtpcs-footer-text:    rgba(255,255,255,0.65);
  --rabtpcs-footer-heading: #ffffff;
  --rabtpcs-footer-border:  rgba(255,255,255,0.08);
  --rabtpcs-footer-link:    rgba(255,255,255,0.55);

  /* WooCommerce / Product cards */
  --rabtpcs-card-bg:       #ffffff;
  --rabtpcs-card-border:   #ebebeb;
  --rabtpcs-card-radius:   var(--rabtpcs-r-lg);
  --rabtpcs-badge-sale-bg: var(--rabtpcs-primary);
  --rabtpcs-badge-new-bg:  #1a6e41;
  --rabtpcs-star-color:    #f8a004;
}