/* ==========================================================================
   CRYSTAL JEWELRY INSTITUTE — DESIGN TOKENS
   Palette inspired by cut gemstones & warm gold — Surat's jewelry trade
   ========================================================================== */
:root{
  /* --- Core palette --- */
  --onyx:        #0E0C0A;   /* near-black, warm charcoal — deep sections */
  --onyx-2:      #1A1613;   /* card surface on dark */
  --onyx-3:      #24201B;   /* hover surface on dark */
  --cream:       #F8F4EA;   /* light section bg — polishing-cloth cream */
  --cream-2:     #F1EADA;   /* light card surface */
  --ivory:       #FFFDF8;

  --gold:        #C9A24B;   /* primary gold — muted, antique, not neon */
  --gold-light:  #E8CD8A;
  --gold-deep:   #9C7A2E;
  --ruby:        #7A2635;   /* single accent gem color — used sparingly */
  --ruby-light:  #A83B4C;
  --emerald:     #2F5D4E;   /* secondary accent — offline/in-person cues */

  --ink:         #1C1712;   /* body text on light */
  --ink-soft:    #5C5348;   /* muted text on light */
  --paper:       #F8F4EA;   /* alias */
  --white:       #FFFFFF;

  /* --- Semantic --- */
  --t1:          var(--ivory);   /* heading text on dark */
  --t2:          #C9BFAE;        /* body text on dark */
  --td1:         var(--ink);     /* heading text on light */
  --td2:         var(--ink-soft);/* body text on light */

  /* --- Typography --- */
  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* --- Radius / facet motif ---
     Signature element: every card/button/frame has ONE clipped corner —
     like the bezel-cut of a gemstone catching light. */
  --facet: 22px;
  --radius-sm: 4px;
  --radius: 8px;

  /* --- Shadow --- */
  --shadow-gold: 0 8px 30px -6px rgba(201,162,75,0.35);
  --shadow-soft: 0 20px 60px -20px rgba(14,12,10,0.35);
  --shadow-card: 0 2px 20px -4px rgba(14,12,10,0.08);

  /* --- Motion --- */
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: .25s;
  --dur: .5s;
  --dur-slow: .9s;

  /* --- Layout --- */
  --container: 1240px;
  --gutter: 24px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior:auto !important; }
}