/* ============================================================
   PARROT AND PALM — COLORS & TYPE
   Vintage botanical · Regency fashion plate · Bohemian Turin
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IM+Fell+English:ital@0;1&family=Jost:wght@300;400;500;600&display=swap');

:root {
  /* ----- BASE PALETTE -----
     Warm aged-paper neutrals + botanical greens
     + dusty Regency accent hues pulled from the banner plate */

  /* Paper & ink */
  --paper:         #f4ece0;   /* aged parchment, primary background */
  --paper-warm:    #ede2d0;   /* slightly toasted paper */
  --paper-cool:    #ecebe2;   /* greenish-tinted paper */
  --paper-deep:    #e3d6bf;   /* shadowed plate edge */
  --ink:           #2a2520;   /* deep sepia-black, primary text */
  --ink-soft:      #4d433a;   /* secondary text, captions */
  --ink-faint:     #8a7d6c;   /* tertiary / metadata */
  --ink-line:      #c8bba3;   /* hairline rules on paper */

  /* Botanical greens (palm fronds) */
  --palm-deep:     #2e3a2a;   /* darkest frond — display headers on paper */
  --palm:          #4a5d3f;   /* canonical palm green */
  --palm-leaf:     #6b7e54;   /* mid frond */
  --palm-sage:     #a3ab8a;   /* faded sage */
  --palm-mist:     #d7d8c2;   /* palest sage wash */

  /* Plumage — parrot accents from the banner */
  --plume-teal:    #4a8079;   /* parrot wing teal */
  --plume-rose:    #c87b6f;   /* dusty terracotta-rose (period dress) */
  --plume-coral:   #b85841;   /* deeper crimson plume */
  --plume-blue:    #6c7f9c;   /* faded cornflower / hat ribbon */
  --plume-cream:   #efe1c2;   /* feather highlight */

  /* Gilt & metal */
  --gilt:          #b08a4a;   /* antique gold */
  --gilt-deep:     #8a6a35;   /* tarnished brass */
  --gilt-soft:     #d8bf8a;   /* gold leaf highlight */

  /* States & feedback (semantic) */
  --color-bg:               var(--paper);
  --color-bg-elevated:      #faf4e8;
  --color-bg-sunken:        var(--paper-warm);
  --color-fg:               var(--ink);
  --color-fg-muted:         var(--ink-soft);
  --color-fg-faint:         var(--ink-faint);
  --color-border:           var(--ink-line);
  --color-border-strong:    #a8987c;
  --color-accent:           var(--palm-deep);
  --color-accent-warm:      var(--plume-coral);
  --color-link:             var(--plume-teal);
  --color-link-hover:       var(--palm-deep);
  --color-success:          var(--palm-leaf);
  --color-danger:           var(--plume-coral);
  --color-price:            var(--ink);
  --color-sale:             var(--plume-coral);

  /* ----- TYPE -----
     Display: Cormorant Garamond — tall, classical, like the logo wordmark
     Body:    EB Garamond — refined readable serif, period-appropriate
     Italic flourish: IM Fell English Italic — antiquarian engraver's italic
     UI sans: Jost — geometric humanist for buttons/labels where serif would crowd */

  --font-display:  'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --font-body:     'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
  --font-italic:   'IM Fell English', 'EB Garamond', Garamond, serif;
  --font-ui:       'Jost', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:     'IM Fell English', ui-monospace, monospace; /* receipts use the italic flourish */

  /* Type scale — generous serif scale, classical proportions */
  --t-hero:        clamp(56px, 7.5vw, 112px);
  --t-display:     clamp(44px, 5.5vw, 76px);
  --t-h1:          clamp(36px, 4vw, 56px);
  --t-h2:          clamp(28px, 3vw, 40px);
  --t-h3:          clamp(22px, 2vw, 28px);
  --t-h4:          20px;
  --t-body-lg:     19px;
  --t-body:        17px;
  --t-body-sm:     15px;
  --t-caption:     13px;
  --t-micro:       11px;

  /* Line heights */
  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-body:       1.55;
  --lh-loose:      1.7;

  /* Letter spacing — refined display uses tight tracking; eyebrows use wide */
  --ls-tight:      -0.01em;
  --ls-normal:     0;
  --ls-eyebrow:    0.22em;
  --ls-caps:       0.08em;

  /* ----- SPACING -----
     8pt base — but elevated to feel airy and bookish */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ----- RADII -----
     Mostly squared (period-appropriate). A single small radius
     for nominal softness on inputs/chips. No pillowy corners. */
  --r-0:   0px;
  --r-1:   2px;
  --r-2:   4px;
  --r-pill: 999px; /* used sparingly — chips only */

  /* ----- SHADOWS -----
     No drop shadows on cards. Use hairline borders + paper layering.
     A single subtle "lifted page" shadow for modals & menus. */
  --shadow-page:   0 1px 0 rgba(42, 37, 32, 0.06);
  --shadow-lift:   0 8px 24px -10px rgba(42, 37, 32, 0.25),
                   0 2px 4px -1px rgba(42, 37, 32, 0.08);
  --shadow-deep:   0 24px 48px -16px rgba(42, 37, 32, 0.35);

  /* Vignette overlay for full-bleed imagery */
  --vignette: radial-gradient(ellipse at center,
                transparent 50%,
                rgba(42, 37, 32, 0.18) 100%);

  /* Grain texture overlay — applied as ::after on heroes */
  --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.14  0 0 0 0 0.13  0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Motion — gentle, like turning a page */
  --ease-page:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-soft:     cubic-bezier(0.32, 0.72, 0.4, 1);
  --dur-quick:     150ms;
  --dur-base:      280ms;
  --dur-slow:      520ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--color-fg);
  background: var(--color-bg);
  font-feature-settings: "liga", "kern", "onum"; /* old-style figures */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { margin: 0; }

/* Headings — display serif, tight tracking, deep palm green or ink */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
  margin: 0 0 var(--s-5);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-4);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
}

/* Hero / wordmark display */
.t-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-hero);
  line-height: 0.95;
  letter-spacing: -0.015em;
}
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1.0;
  letter-spacing: -0.01em;
}

/* Italic flourish — for accents like "Early Summer Fashions" */
.t-flourish, em.flourish {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* Eyebrow — wide-tracked small caps (used for category labels) */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* Body copy */
p, .body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}
.body-lg { font-size: var(--t-body-lg); line-height: var(--lh-loose); }
.body-sm { font-size: var(--t-body-sm); }
.caption {
  font-size: var(--t-caption);
  color: var(--color-fg-faint);
  font-style: italic;
}

/* Links — underlined like a printed citation */
a {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklab, var(--color-link), transparent 55%);
  text-underline-offset: 3px;
  transition: color var(--dur-quick) var(--ease-soft),
              text-decoration-color var(--dur-quick) var(--ease-soft);
}
a:hover {
  color: var(--color-link-hover);
  text-decoration-color: currentColor;
}

/* UI labels & buttons use the sans for legibility at small sizes */
button, .ui-label, .nav-item, input, select, textarea {
  font-family: var(--font-ui);
  font-size: var(--t-caption);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* Price — old-style figures, serif, heavier */
.price {
  font-family: var(--font-body);
  font-feature-settings: "lnum"; /* lining figures look more like prices */
  font-weight: 500;
}
.price--sale { color: var(--color-sale); }
.price--was  { color: var(--color-fg-faint); text-decoration: line-through; font-weight: 400; }

/* Horizontal rule — hairline, period-style ornamental optional */
hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--s-6) 0;
}
hr.ornament {
  border: 0;
  height: 16px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16'%3E%3Cg fill='none' stroke='%234d433a' stroke-width='0.6'%3E%3Cpath d='M0 8h80'/%3E%3Cpath d='M120 8h80'/%3E%3Ccircle cx='100' cy='8' r='3'/%3E%3Cpath d='M88 8c4 0 8-4 12-4s8 4 12 4-8 4-12 4-12-4-12-4z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Blockquote — italic engraver's */
blockquote {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: var(--t-body-lg);
  line-height: var(--lh-loose);
  color: var(--color-fg-muted);
  border-left: 1px solid var(--gilt);
  padding-left: var(--s-5);
  margin: var(--s-6) 0;
}