@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/*
 * ═══════════════════════════════════════════════════════════════════════════
 *  THEME: Regular  —  Clean modern commerce
 *
 *  Every visual decision for the storefront is declared here as a CSS custom
 *  property. Changing any variable controls the corresponding element
 *  site-wide — colors, typography, shapes, layout, spacing, and animations.
 *
 *  To create a new theme: copy this file into themes/<name>/theme.css,
 *  change the selector to  body.theme-<name>  and override the tokens.
 * ═══════════════════════════════════════════════════════════════════════════
 */

body.theme-regular {

  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  TYPOGRAPHY                                                         │
   * │  Controls all text rendering across the storefront.                 │
   * └─────────────────────────────────────────────────────────────────────┘ */

  /* Font stacks */
  --font-family:  Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans:    var(--font-family);
  --font-heading: var(--font-family);   /* Heading font can differ from body */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  BRAND COLORS                                                       │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --color-primary:       #2563eb;   /* Main action color — buttons, links, highlights */
  --color-primary-hover: #0d9488;   /* Darker shade used on hover states */
  --color-primary-light: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg)); /* Tinted bg */
  --color-accent:        #0d9488;   /* Secondary accent — callouts, trust badges */
  --color-on-primary:    #ffffff;   /* Text/icon color placed on top of primary */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  SURFACE / BACKGROUND COLORS                                        │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --color-bg:               #ffffff;   /* Page background */
  --color-surface:          #f9fafb;   /* Subtle off-white for cards, inputs, footer */
  --color-surface-elevated: #f3f4f6;   /* Slightly darker surface for hover/active states */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  TEXT COLORS                                                        │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --color-text:  #111827;   /* Body text — headings, labels, primary content */
  --color-muted: #6b7280;   /* Secondary text — descriptions, captions, metadata */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  BORDER COLOR                                                       │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --color-border: #e5e7eb;   /* Dividers, card outlines, input borders */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  STATUS / FEEDBACK COLORS                                           │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --color-danger:          #dc2626;
  --color-success-strong:  #198754;

  /* Success */
  --color-success-fg:      #065f46;
  --color-success-bg:      #ecfdf5;
  --color-success-border:  #a7f3d0;

  /* Danger / Error */
  --color-danger-fg:       #991b1b;
  --color-danger-bg:       #fef2f2;
  --color-danger-border:   #fecaca;

  /* Warning */
  --color-warning-fg:      #92400e;
  --color-warning-bg:      #fffbeb;
  --color-warning-border:  #fde68a;

  /* Info */
  --color-info-fg:         #1e40af;
  --color-info-bg:         #eff6ff;
  --color-info-border:     #bfdbfe;


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  COMPONENT-SPECIFIC COLORS                                          │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --color-overlay-scrim:        rgba(17, 24, 39, 0.45);   /* Drawer / modal backdrop */
  --color-cat-label-scrim-end:  rgba(17, 24, 39, 0.75);   /* Category card text gradient end */
  --color-pill-accent-bg:       rgba(37, 99, 235, 0.10);  /* Discount pill background */
  --color-option-selected-bg:   rgba(37, 99, 235, 0.08);  /* Variant button selected bg */
  --color-pcard-wishlist-bg:    rgba(255, 255, 255, 0.92); /* Wishlist button backdrop */
  --color-star-rating:          var(--color-warning-fg);   /* Star icons color */
  --color-trust-accent:         var(--color-muted);        /* Trust strip icon tint */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  SOCIAL / BRAND COLORS                                              │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --color-whatsapp:           #25d366;
  --color-whatsapp-on:        #ffffff;
  --color-social-instagram:   #f09433;
  --color-social-facebook:    #1877f2;
  --color-social-youtube:     #ff0000;

  --gradient-social-instagram: linear-gradient(
    45deg,
    var(--color-social-instagram) 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  BORDER RADIUS  —  Controls the "sharpness" of all UI shapes        │
   * │  Set all to 0 for brutalist/square; increase for soft/rounded feel. │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --radius-sm:   4px;      /* Smallest — tags, small buttons, inputs */
  --radius-md:   8px;      /* Standard — cards, dropdowns, modals */
  --radius-lg:   12px;     /* Larger — drawers, panels */
  --radius-xl:   18px;     /* Extra large — hero cards, featured blocks */
  --radius-full: 9999px;   /* Circle */
  --radius-pill: 999px;    /* Pill shape for badges */

  --border-radius: var(--radius-md);   /* Shorthand alias */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  SHADOWS  —  Controls elevation and depth perception                │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --shadow-xs:          0 1px 2px  rgba(0, 0, 0, 0.04);   /* Barely visible lift */
  --shadow-sm:          0 1px 2px  rgba(0, 0, 0, 0.05);   /* Subtle — header, inputs */
  --shadow-md:          0 4px 8px  rgba(0, 0, 0, 0.10);   /* Medium — modals, popovers */
  --shadow-header:      var(--shadow-sm);                  /* Sticky header shadow */
  --shadow-pcard-hover: 0 8px 24px rgba(17, 24, 39, 0.08); /* Product card on hover */
  --shadow-toast:       0 4px 12px rgba(0, 0, 0, 0.15);   /* Toast notifications */
  --shadow-drawer:      -8px 0 32px rgba(17, 24, 39, 0.12); /* Cart drawer */
  --shadow-offcanvas:   -8px 0 32px rgba(17, 24, 39, 0.10); /* Filter offcanvas */
  --shadow-bottom-bar:  0 -2px 10px rgba(17, 24, 39, 0.06); /* Mobile bottom nav */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  MOTION & INTERACTION                                               │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --opacity-muted-icon:          0.5;                        /* Faded icon opacity */
  --backdrop-blur-overlay:       3px;                        /* Scrim/overlay blur */
  --backdrop-blur-floating:      6px;                        /* Floating element blur */
  --interaction-brightness-hover: 1.05;                      /* Filter on hover */


  /* ═══════════════════════════════════════════════════════════════════════
   *  DESIGN PATTERN TOKENS
   *  These control the structural appearance and layout of each UI region.
   *  Changing these values alters the design pattern, not just the color.
   * ═══════════════════════════════════════════════════════════════════════ */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  HEADER                                                             │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --color-header-bg:                   var(--color-bg);       /* Header bar background */
  --color-header-border:               var(--color-border);   /* Header bottom divider */
  --color-header-logo:                 var(--color-text);     /* Logo text / icon color */
  --color-header-icon:                 var(--color-text);     /* Action icon color (search, cart…) */
  --color-header-icon-hover-bg:        var(--color-surface);  /* Icon button hover background */
  --color-header-search-bg:            var(--color-surface);  /* Search bar fill */
  --color-header-search-border:        var(--color-border);   /* Search bar border */
  --color-header-search-text:          var(--color-text);     /* Search input text */
  --color-header-search-placeholder:   var(--color-muted);    /* Search placeholder text */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  NAVIGATION LINKS  (desktop nav inside header)                      │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --color-header-nav:        var(--color-muted);   /* Resting nav link color */
  --color-header-nav-active: var(--color-text);    /* Hover / active nav link */
  --nav-link-size:           0.8125rem;             /* Nav link font-size */
  --nav-link-weight:         600;                   /* Nav link font-weight */
  --nav-letter-spacing:      0.04em;                /* Letter spacing */
  --nav-text-transform:      uppercase;             /* uppercase | none | capitalize */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  HERO / BANNER SLIDER                                               │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --hero-max-height:       min(70vh, 520px);          /* Max banner image height */
  --hero-dot-color:        var(--color-border);        /* Inactive slide dot */
  --hero-dot-active-color: var(--color-primary);       /* Active slide dot */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  SECTIONS  (sf-section — wraps home page content blocks)            │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --section-pad-y:          var(--space-8);    /* Top & bottom padding for each section */
  --section-head-align:     flex-end;          /* align-items of the section header row */
  --section-head-justify:   space-between;     /* justify-content of the section header row */
  --section-head-direction: row;               /* row | column (column = stacked, centered) */

  /* Section heading (h2 inside .sf-section__head) */
  --section-title-size:      1.25rem;          /* Font size */
  --section-title-weight:    700;              /* Font weight */
  --section-title-transform: none;             /* uppercase | none | capitalize */
  --section-title-spacing:   0;               /* Letter spacing */
  --section-title-color:     var(--color-text); /* Color */
  --section-title-align:     left;            /* text-align */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  PRODUCT GRID                                                       │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --product-grid-min: 220px;            /* Minimum card width for auto-fill grid */
  --product-grid-gap: var(--space-md);  /* Gap between cards */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  PRODUCT CARD  (sf-pcard)                                           │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --pcard-radius:      var(--radius-md);        /* Card corner radius */
  --pcard-bg:          var(--color-bg);          /* Card background */
  --pcard-border-color: var(--color-border);     /* Card border color (transparent = no border) */
  --pcard-shadow:      none;                     /* Default shadow (no shadow by default) */
  --pcard-hover-shadow: var(--shadow-pcard-hover); /* Shadow on hover */
  --pcard-aspect-ratio: 1 / 1;                   /* Image area aspect ratio (4/5 = portrait) */
  --pcard-gallery-bg:  var(--color-surface);     /* Image area fill / placeholder color */
  --pcard-body-pad:    var(--space-3);           /* Padding inside the card text area */

  /* Product name */
  --pcard-name-size:      0.875rem;              /* Product title font size */
  --pcard-name-weight:    600;                   /* Product title font weight */
  --pcard-name-transform: none;                  /* none | uppercase | capitalize */
  --pcard-name-spacing:   0;                    /* Letter spacing */
  --pcard-name-color:     var(--color-text);     /* Product title color */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  PRODUCT CARD BUTTON  (Add to cart / View cart)                     │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --pcard-btn-radius:    var(--radius-sm);           /* Button corner radius */
  --pcard-btn-height:    40px;                        /* Min button height */
  --pcard-btn-bg:        var(--color-primary);        /* Button background */
  --pcard-btn-color:     var(--color-on-primary);     /* Button text/icon */
  --pcard-btn-hover-bg:  var(--color-primary-hover);  /* Button hover background */
  --pcard-btn-size:      0.8125rem;                   /* Button font size */
  --pcard-btn-weight:    600;                         /* Button font weight */
  --pcard-btn-transform: none;                        /* none | uppercase */
  --pcard-btn-spacing:   0;                          /* Letter spacing */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  BUTTONS  (sf-btn — used in pages, checkout, modals)                │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --btn-radius:         var(--radius-md);   /* Corner radius */
  --btn-font-size:      0.875rem;           /* Font size */
  --btn-font-weight:    600;               /* Font weight */
  --btn-letter-spacing: 0;               /* Letter spacing */
  --btn-text-transform: none;             /* none | uppercase */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  FORM INPUTS                                                        │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --input-radius:     var(--radius-sm);      /* Input corner radius */
  --input-bg:         var(--color-bg);       /* Input background */
  --input-border:     var(--color-border);   /* Input border */
  --input-focus-ring: var(--color-primary);  /* Focus outline color */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  FOOTER                                                             │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --color-footer-bg:         var(--color-surface);   /* Footer background */
  --color-footer-border:     var(--color-border);    /* Footer top border + bottom divider */
  --color-footer-text:       var(--color-muted);     /* Footer body text */
  --color-footer-heading:    var(--color-text);      /* Footer column headings */
  --color-footer-link:       var(--color-muted);     /* Footer link color */
  --color-footer-link-hover: var(--color-primary);   /* Footer link hover */
  --color-footer-logo:       var(--color-text);      /* Footer logo text/icon color */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  TRUST STRIP  (shipping / security / support bar above footer)      │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --color-trust-bg: var(--color-surface);   /* Trust bar background */


  /* ┌─────────────────────────────────────────────────────────────────────┐
   * │  BADGES & PILLS  (discount %, "New", category labels)               │
   * └─────────────────────────────────────────────────────────────────────┘ */

  --badge-radius:          var(--radius-sm);        /* Discount badge corner radius */
  --badge-discount-bg:     var(--color-primary);    /* Discount badge background */
  --badge-discount-color:  var(--color-on-primary); /* Discount badge text */
}