/* CaratAdvice - Emerald and champagne skin.
   Loads after app.css. It changes colour, type and motion only; no layout rules,
   so every page keeps the structure it already has. */

:root {
  --ink:          #0A241C;
  --ink-soft:     #12392C;
  --emerald:      #0F3D2E;
  --gold:         #C9A862;
  --gold-deep:    #8A6B2A;
  --gold-pale:    #EBD7A0;
  --topbar-bg:    #D4B872;
  --ivory:        #F5F6F1;
  --ivory-deep:   #E8EDE6;
  --stone:        #44524C;
  --stone-light:  #6B7A73;
  --hairline:     #D3DCD5;

  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --lx-ease: cubic-bezier(.2, .7, .1, 1);
}

/* Cormorant is light, so headings get a heavier weight. Sizes stay as app.css sets them. */
h1, h2, h3, h4, .ca-heading { font-weight: 600; letter-spacing: -.005em; }
.ca-heading em, .ca-hero h1 em { font-style: italic; font-weight: 500; }

/* Hero slides: emerald depth instead of brown. */
.ca-hero-slide.grad-1 { background: linear-gradient(135deg, #1B5A45 0%, #0A241C 66%); }
.ca-hero-slide.grad-2 { background: linear-gradient(135deg, #0F3D2E 0%, #071A14 66%); }
.ca-hero-slide.grad-3 { background: linear-gradient(135deg, #0A241C 0%, #1F6B52 55%, #0A241C 100%); }

/* Category panel accent bars: champagne and emerald only. */
.ca-accent-0 { background: var(--gold); }
.ca-accent-1 { background: var(--emerald); }
.ca-accent-2 { background: #1F6B52; }
.ca-accent-3 { background: var(--gold-pale); }
.ca-accent-4 { background: var(--gold-deep); }

/* Buttons: champagne gradient with a sheen that sweeps across on hover. */
.ca-btn { position: relative; overflow: hidden; transition: transform .35s var(--lx-ease), box-shadow .35s var(--lx-ease), background-color .25s, color .25s, border-color .25s; }
.ca-btn-gold { background: linear-gradient(180deg, var(--gold-pale), var(--gold)); border-color: var(--gold); color: var(--ink); }
.ca-btn-gold:hover { background: linear-gradient(180deg, #F2E3B6, #D4B872); color: var(--ink); transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(138,107,42,.7); }
.ca-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%); transform: translateX(-120%); transition: transform .8s var(--lx-ease); pointer-events: none; }
.ca-btn:hover::after { transform: translateX(120%); }

/* Cards: slow lift and a champagne edge. */
.ca-review-card, .ca-guide-card, .ca-category-panel, .ca-compare-card, .ca-feature {
  transition: transform .5s var(--lx-ease), box-shadow .5s var(--lx-ease), border-color .4s;
}
.ca-review-card:hover, .ca-guide-card:hover, .ca-compare-card:hover {
  transform: translateY(-8px); border-color: var(--gold); box-shadow: 0 38px 46px -34px rgba(10,36,28,.5);
}

/* Ink sections get a drifting emerald glow behind the content. */
.ca-section-ink, .ca-newsletter { position: relative; overflow: hidden; isolation: isolate; }
.ca-section-ink::before, .ca-newsletter::before {
  content: ''; position: absolute; z-index: -1; width: 70vmax; height: 70vmax; right: -25vmax; top: -30vmax;
  background: radial-gradient(closest-side, rgba(31,107,82,.55), transparent 70%);
  translate: 0 calc(var(--py, 0) * 1px); pointer-events: none;
}

/* Page progress line. */
.lx-progress { position: fixed; z-index: 2000; left: 0; top: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--scroll, 0)); background: linear-gradient(90deg, var(--gold-deep), var(--gold-pale)); pointer-events: none; }

/* Visible keyboard focus. */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ca-btn, .ca-btn::after, .ca-review-card, .ca-guide-card, .ca-category-panel, .ca-compare-card { transition: none; }
  .ca-section-ink::before, .ca-newsletter::before, .lx-progress { display: none; }
}

/* Italic accents read on dark backgrounds. */
.ca-hero .ca-heading em, .ca-section-ink .ca-heading em, .ca-newsletter .ca-heading em { color: var(--gold-pale); }