/*
Theme Name: Homeshopping.gr Kadence Child
Theme URI: https://homeshopping.gr
Description: Child theme for homeshopping.gr. Carries the design tokens from docs/DESIGN.novamira.md. Do not add colours, fonts, spacing values or radii that are not defined here.
Author: Homeshopping.gr
Template: kadence
Version: 1.2.0
Text Domain: hs-kadence-child
*/

/* ============================================================
   DESIGN TOKENS
   Source of truth: docs/DESIGN.novamira.md
   Novamira reads that file via get-active-design / check-design
   before any visual work. Keep the two in sync.

   NOTE: the exported design system defines --text-body twice,
   as both a colour and a font shorthand, which silently drops
   body text colour. Here --text-body is the COLOUR alias only;
   body typography is written out literally. See the "Known
   defect in the source tokens" section of DESIGN.novamira.md.
   ============================================================ */

:root {
  /* ---- Paper / warm neutral scale (backgrounds & surfaces) ---- */
  --paper:        #F6F1E7;
  --paper-2:      #FBF8F1;
  --canvas:       #EDE6D6;
  --canvas-2:     #E3DAC7;
  --oat:          #D8CDB6;

  /* ---- Ink / charcoal scale (text & dark surfaces) ---- */
  --ink:          #23211C;
  --ink-2:        #3A362E;
  --charcoal:     #4A453B;
  --stone:        #6E685B;
  --stone-2:      #928A78;

  /* ---- Brand hues (heritage) ---- */
  --clay:         #B27F5C;
  --clay-deep:    #96633F;
  --clay-soft:    #E8D6C4;
  --sage:         #909A80;
  --sage-deep:    #6E7860;
  --sage-soft:    #DCE1D2;
  --olive:        #5C6349;
  --olive-deep:   #454B36;
  --slate-blue:   #7C8894;
  --slate-soft:   #DBE0E1;

  /* ---- Semantic status ---- */
  --success:      #5E7A54;
  --success-soft: #DCE6D3;
  --warning:      #C08A3E;
  --warning-soft: #F1E2C4;
  --danger:       #A5503F;   /* also the sale/markdown colour — a muted brick */
  --danger-soft:  #EBD3CB;
  --info:         #5C7079;
  --info-soft:    #D8E2E4;

  /* ---- Semantic aliases — reference THESE in components ---- */
  --surface-page:      var(--paper);
  --surface-card:      var(--paper-2);
  --surface-raised:    #FFFFFF;
  --surface-sunken:    var(--canvas);
  --surface-alt:       var(--canvas);
  --surface-inverse:   var(--ink);
  --surface-inverse-2: var(--ink-2);

  --text-strong:    var(--ink);
  --text-body:      var(--charcoal);
  --text-muted:     var(--stone);
  --text-subtle:    var(--stone-2);
  --text-on-dark:   var(--paper);
  --text-on-accent: var(--paper-2);
  --text-link:      var(--olive);

  --border-hairline: var(--canvas-2);
  --border-soft:     var(--oat);
  --border-strong:   var(--stone);
  --border-inverse:  rgba(246, 241, 231, 0.18);

  --accent:         var(--clay);
  --accent-hover:   var(--clay-deep);
  --accent-tint:    var(--clay-soft);
  --accent-2:       var(--olive);
  --accent-2-hover: var(--olive-deep);

  --focus-ring: 0 0 0 3px rgba(178, 127, 92, 0.35);

  /* ---- Type ---- */
  --font-display: 'EB Garamond', 'Times New Roman', Georgia, serif;
  --font-body:    'Commissioner', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'SFMono-Regular', ui-monospace, 'Menlo', 'Consolas', monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --text-display-xl: 400 clamp(3rem, 6vw, 5.25rem)/1.02 var(--font-display);
  --text-display-l:  400 clamp(2.4rem, 4.4vw, 3.75rem)/1.05 var(--font-display);
  --text-display-m:  400 clamp(1.9rem, 3vw, 2.75rem)/1.1 var(--font-display);
  --text-display-s:  500 clamp(1.5rem, 2.2vw, 2rem)/1.15 var(--font-display);

  --text-lead:    400 1.25rem/1.6 var(--font-body);
  --text-sm:      400 0.875rem/1.55 var(--font-body);
  --text-xs:      400 0.75rem/1.5 var(--font-body);
  --text-eyebrow: 500 0.75rem/1.3 var(--font-body);

  --tracking-eyebrow: 0.16em;
  --tracking-wide:    0.06em;
  --tracking-tight:  -0.01em;

  --leading-tight:  1.1;
  --leading-snug:   1.35;
  --leading-normal: 1.6;

  /* ---- Spacing (4px base grid) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radii — restrained, near-square ---- */
  --radius-0:    0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  --border-width:       1px;
  --border-width-thick: 1.5px;

  /* ---- Shadows — soft, warm-tinted, low elevation only ---- */
  --shadow-xs:    0 1px 2px rgba(35, 33, 28, 0.05);
  --shadow-sm:    0 2px 8px rgba(35, 33, 28, 0.06);
  --shadow-md:    0 8px 24px rgba(35, 33, 28, 0.08);
  --shadow-lg:    0 18px 48px rgba(35, 33, 28, 0.12);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* ---- Layout ---- */
  --container:      1280px;
  --container-wide: 1480px;
  --container-text: 68ch;
  --gutter:         clamp(20px, 5vw, 64px);
  --header-h:       76px;
  --sticky-top:     96px;

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;

  /* ---- Z ---- */
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   210;
  --z-toast:   300;
}

/* ============================================================
   BASE
   ============================================================ */

body {
  font: 400 1rem/1.65 var(--font-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font: var(--text-display-l); }
h2 { font: var(--text-display-m); }
h3 { font: var(--text-display-s); }

p { text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The recurring uppercase tracked label. */
.eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

::selection { background: var(--clay-soft); color: var(--ink); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Respect the reader. Motion here is decorative, never load-bearing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}