/*
 * DESIGN TOKENS
 * Source of truth for all visual styling on this project.
 *
 * Source:  uk.blissy.com/products/pillowcase-plum-king
 * Method:  Computed CSS values extracted via Chrome DevTools, 2026-05-10
 * Viewport at time of extraction: 1470px
 *
 * RULES
 *   1. Never write a hardcoded value in any CSS file — always use a token.
 *   2. If the token you need does not exist here, add it here first.
 *   3. Before styling any new section, list the tokens you plan to use and
 *      get confirmation before writing CSS.
 */

:root {

  /* =====================================================
     COLOR — BRAND PALETTE
     ===================================================== */

  --blissy-color-ink:             #162950;   /* primary text / headings / icons */
  --blissy-color-ink-deep:        #14255c;   /* h2 section headings (computed on LESS FRICTION) */
  --blissy-color-navy:            #37487d;   /* secondary CTA / footer / "View All" button */
  --blissy-color-dark-blue:       #172950;   /* CSS variable --dark-blue on source page */
  --blissy-color-light-blue:      #dfeaf5;   /* light blue band background */
  --blissy-color-white:           #ffffff;
  --blissy-color-off-black:       #333333;
  --blissy-color-black:           #000000;   /* editorial quote text (confirmed on BYRDIE section) */

  /* =====================================================
     COLOR — CTA
     ===================================================== */

  --blissy-color-cta:             #ff9000;   /* add-to-cart button background */
  --blissy-color-cta-hover:       #26345c;   /* add-to-cart hover state (from Tailwind class) */

  /* =====================================================
     COLOR — BACKGROUNDS
     ===================================================== */

  --blissy-bg-page:               #ffffff;
  --blissy-bg-details-tab:        #fcf4ee;   /* details tab content area (bg-[#FCF4EE], py-8) */
  --blissy-bg-ivory:              #f5f1ee;   /* comparison table rows, warm neutral */
  --blissy-bg-specs:              #f7f7f7;   /* product specs band */
  --blissy-bg-pink:               #ffe5e2;   /* reviews CTA band / active tab pill */
  --blissy-bg-light-blue:         #dfeaf5;   /* clinically-backed results band */
  --blissy-bg-light-blue-50:      rgba(223, 234, 245, 0.50);   /* brand column bg in comparison table (50% opacity, confirmed on Blissy) */
  --blissy-bg-footer:             #f3f4f6;   /* footer background */

  /* =====================================================
     COLOR — TEXT
     ===================================================== */

  --blissy-text-primary:          #162950;   /* body copy */
  --blissy-text-muted:            #6b7280;   /* inactive tab labels, secondary copy */
  --blissy-text-subtle:           #6d6d6d;   /* review card body text */
  --blissy-text-input:            #374151;   /* form input text */
  --blissy-text-on-cta:           #ffffff;   /* text on orange/navy buttons */
  --blissy-text-on-dark:          #ffffff;

  /* =====================================================
     COLOR — UI ACCENTS
     ===================================================== */

  --blissy-color-star:            #ffd700;   /* review star rating */
  --blissy-color-gold:            #c9a366;   /* decorative gold accent */
  --blissy-color-border:          #d1d5db;   /* input / card borders */
  --blissy-color-divider:         #e5e7eb;   /* horizontal dividers */
  --blissy-color-promo-text:      #162950;   /* announcement bar text */

  /* =====================================================
     TYPOGRAPHY — FONT FAMILIES
     ===================================================== */

  --blissy-font-body:             'Muli', sans-serif;           /* body, UI labels, tabs, paragraphs */
  --blissy-font-heading:          'Oswald', sans-serif;         /* h1, h2, h3, review titles, ATC */
  --blissy-font-display:          'Bebas Neue', sans-serif;     /* big section display titles */
  --blissy-font-expert:           'Spartan', sans-serif;        /* doctor/expert names and bios */
  --blissy-font-utility:          'Helvetica Neue', sans-serif; /* small utility labels */

  /* =====================================================
     TYPOGRAPHY — SIZE SCALE (all confirmed computed values)
     ===================================================== */

  --blissy-text-2xs:              12px;   /* promo bar small labels */
  --blissy-text-xs:               13px;
  --blissy-text-sm:               14px;   /* tab buttons, inputs, review body */
  --blissy-text-base:             16px;   /* body default */
  --blissy-text-md:               17px;   /* expert names (Spartan) */
  --blissy-text-lg:               18px;   /* section body paragraphs */
  --blissy-text-xl:               24px;   /* ATC button */
  --blissy-text-2xl:              30px;   /* "View All Reviews" button */
  --blissy-text-3xl:              36px;   /* H2 section headings (LESS FRICTION, expert title) */
  --blissy-text-4xl:              48px;   /* H3 big titles, reviews heading (Bebas Neue) */
  --blissy-text-5xl:              60px;   /* hero banner heading (Spartan, confirmed on Blissy "Invest in Better Sleep Today") */
  --blissy-text-6xl:              72px;   /* comparison table heading (Spartan, confirmed on Blissy "The Difference is Clear") */

  /* =====================================================
     TYPOGRAPHY — FONT WEIGHTS
     ===================================================== */

  --blissy-weight-light:          300;   /* Spartan body text (font-light, confirmed on "Drab to Fab" body) */
  --blissy-weight-regular:        400;   /* body, Bebas Neue display, inactive tabs */
  --blissy-weight-medium:         500;   /* H1, tab buttons */
  --blissy-weight-semibold:       600;   /* expert names (Spartan) */
  --blissy-weight-bold:           700;   /* H3 titles, ATC button, section H2 */

  /* =====================================================
     TYPOGRAPHY — LINE HEIGHTS (confirmed computed values)
     ===================================================== */

  --blissy-leading-heading:       1.0;    /* H1 32px / 26.4px ≈ tight */
  --blissy-leading-tight:         1.15;
  --blissy-leading-snug:          1.25;
  --blissy-leading-base:          1.5;    /* body: 24px / 16px */
  --blissy-leading-relaxed:       1.625;  /* expert bio (Spartan): 29.25px / 18px */
  --blissy-leading-loose:         2.0;    /* Spartan body text: 32px / 16px (leading-8, confirmed on "Drab to Fab") */
  --blissy-leading-review-body:   1.43;   /* review text: 20px / 14px */

  /* =====================================================
     TYPOGRAPHY — LETTER SPACING (confirmed computed values)
     ===================================================== */

  --blissy-tracking-normal:       normal;
  --blissy-tracking-cta:          2.4px;     /* ATC button */
  --blissy-tracking-display-sm:   1.8px;     /* Bebas Neue expert heading (36px) */
  --blissy-tracking-display-lg:   4.8px;     /* Bebas Neue reviews heading (48px) */
  --blissy-tracking-wider:        3px;       /* Bebas Neue CTA band heading (60px), confirmed on Blissy */

  /* =====================================================
     LAYOUT
     ===================================================== */

  --blissy-container-max:         1216px;    /* content container width at 1470px viewport */
  --blissy-container-gutter:      127px;     /* side margin each side at 1470px viewport */
  --blissy-hero-height-home:      620px;     /* homepage full-width hero fixed height (desktop) */
  --blissy-hero-copy-max-w:       560px;     /* max width of hero text column */
  --blissy-outlet-circle-size:    176px;     /* editorial outlet logo circle (sm:w-44 = 11rem, confirmed) */
  --blissy-icon-size:             100px;     /* feature icon image/circle size (max-h-[100px], confirmed on "Drab to Fab") */

  /* =====================================================
     SPACING — SECTION VERTICAL PADDING
     ===================================================== */

  --blissy-section-py-sm:         32px;    /* details tab content, reviews CTA (py-8) */
  --blissy-section-py-md:         48px;    /* LESS FRICTION / product feature sections */
  --blissy-section-py-top-lg:     60px;    /* light blue band top padding */
  --blissy-section-py-bottom-lg:  70px;    /* light blue band bottom padding */
  --blissy-section-tabs-mt:       44px;    /* tabs container margin-top from product form */

  /* =====================================================
     SPACING — COMPONENT GAPS
     ===================================================== */

  --blissy-gap-xs:                8px;
  --blissy-gap-sm:                16px;    /* 4-column icon grid gap */
  --blissy-gap-md:                24px;    /* 4-column expert grid, general component gap */
  --blissy-gap-lg:                32px;    /* 2-column section layout gap, column gap */
  --blissy-gap-xl:                40px;    /* "View All Reviews" button horizontal padding */

  /* =====================================================
     BORDERS — RADIUS
     ===================================================== */

  --blissy-radius-xs:             4px;     /* ATC button, product specs */
  --blissy-radius-sm:             6px;     /* inputs, "View All Reviews" button */
  --blissy-radius-pill:           999px;   /* fully rounded — icon circles */
  --blissy-radius-tab:            32px 32px 0 0;   /* active tab top-rounded pill */
  --blissy-photo-rotate:          12deg;           /* polaroid testimonial photo tilt, confirmed from Blissy transform matrix */

  /* =====================================================
     SHADOWS
     ===================================================== */

  --blissy-shadow-none:           none;    /* no box shadows confirmed on main elements */
  --blissy-shadow-card:           drop-shadow(0 4px 6px rgba(0,0,0,0.07)) drop-shadow(0 10px 8px rgba(0,0,0,0.04));   /* Tailwind drop-shadow-lg, confirmed on Blissy review cards */
  --blissy-shadow-box-lg:         0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);   /* Tailwind shadow-lg, confirmed on Blissy polaroid photo card */

  /* =====================================================
     COMPONENTS — ATC BUTTON
     ===================================================== */

  --blissy-btn-cta-bg:            #ff9000;
  --blissy-btn-cta-bg-hover:      #26345c;
  --blissy-btn-cta-color:         #ffffff;
  --blissy-btn-cta-height:        56px;
  --blissy-btn-cta-font-family:   'Oswald', sans-serif;
  --blissy-btn-cta-font-size:     24px;
  --blissy-btn-cta-font-weight:   700;
  --blissy-btn-cta-radius:        4px;
  --blissy-btn-cta-tracking:      2.4px;
  --blissy-btn-cta-padding:       8px 16px;

  /* =====================================================
     COMPONENTS — SECONDARY BUTTON ("View All Reviews")
     ===================================================== */

  --blissy-btn-secondary-bg:      #37487d;
  --blissy-btn-secondary-color:   #ffffff;
  --blissy-btn-secondary-font:    'Bebas Neue', sans-serif;
  --blissy-btn-secondary-size:    30px;
  --blissy-btn-secondary-radius:  6px;
  --blissy-btn-secondary-padding: 16px 40px;

  /* =====================================================
     COMPONENTS — TABS
     ===================================================== */

  --blissy-tab-bg-active:         #ffe5e2;
  --blissy-tab-bg-inactive:       #ffffff;
  --blissy-tab-color-active:      #111827;
  --blissy-tab-color-inactive:    #6b7280;
  --blissy-tab-font-family:       'Muli', sans-serif;
  --blissy-tab-font-size:         14px;
  --blissy-tab-font-weight:       500;
  --blissy-tab-radius:            32px 32px 0 0;
  --blissy-tab-padding:           8px 16px 16px;

  /* =====================================================
     COMPONENTS — FORM INPUT
     ===================================================== */

  --blissy-input-bg:              #ffffff;
  --blissy-input-border:          1px solid #d1d5db;
  --blissy-input-border-color:    #d1d5db;
  --blissy-input-radius:          6px;
  --blissy-input-font-size:       14px;
  --blissy-input-color:           #374151;

}