/* ============================================================
   Akasha — Vedic Premium Design System
   ============================================================
   Saffron · Maroon · Cream · Ink · Gold
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Tiro+Devanagari+Sanskrit:ital@0;1&family=Karla:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Marcellus&display=swap');

:root {
  /* Color — core */
  --ak-cream:        #F4EBD6;   /* page bg */
  --ak-cream-2:      #EFE3C7;   /* card bg */
  --ak-parchment:    #E8D9B5;
  --ak-ink:          #1A1410;   /* primary text */
  --ak-ink-2:        #3D2E22;
  --ak-ink-soft:     #6B5642;

  /* Color — pigment */
  --ak-saffron:      #E07A19;   /* primary CTA */
  --ak-saffron-2:    #C45F0B;
  --ak-marigold:     #F2A33A;
  --ak-maroon:       #6B1F2A;   /* secondary */
  --ak-maroon-2:     #4A1219;
  --ak-vermillion:   #B8341C;
  --ak-gold:         #B8923E;   /* line/ornament */
  --ak-gold-2:       #8C6B23;
  --ak-gold-leaf:    #D4B26A;
  --ak-indigo:       #2A2154;   /* deep night */
  --ak-indigo-2:     #181138;
  --ak-jade:         #4D6B3E;   /* aux remedy */

  /* Type */
  --ak-display: "Cormorant Garamond", "Marcellus", Georgia, serif;
  --ak-deva:    "Tiro Devanagari Sanskrit", "Cormorant Garamond", serif;
  --ak-body:    "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ak-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Geometry */
  --ak-r-sm: 4px;
  --ak-r-md: 8px;
  --ak-r-lg: 14px;

  --ak-shadow-1: 0 1px 2px rgba(26,20,16,.06), 0 6px 24px rgba(26,20,16,.06);
  --ak-shadow-2: 0 4px 14px rgba(26,20,16,.10), 0 20px 60px rgba(26,20,16,.12);
  --ak-line: 1px solid rgba(184,146,62,.35);
}

/* base reset for artboard contents */
.ak-root {
  font-family: var(--ak-body);
  color: var(--ak-ink);
  background: var(--ak-cream);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "kern";
  line-height: 1.5;
  letter-spacing: 0;
}
.ak-root, .ak-root * { box-sizing: border-box; }

.ak-display { font-family: var(--ak-display); font-weight: 500; letter-spacing: -0.01em; }
.ak-deva    { font-family: var(--ak-deva); }
.ak-mono    { font-family: var(--ak-mono); letter-spacing: 0.02em; }
.ak-small   { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.ak-eyebrow { font-family: var(--ak-mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ak-gold-2); }

/* Ornament — corner flourish */
.ak-corner {
  position: absolute;
  width: 28px; height: 28px;
  border: 1px solid var(--ak-gold);
  opacity: .8;
}
.ak-corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.ak-corner.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; }
.ak-corner.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; }
.ak-corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* Yantra hairline divider */
.ak-rule {
  height: 1px; background: linear-gradient(90deg, transparent, var(--ak-gold) 20%, var(--ak-gold) 80%, transparent);
  position: relative;
}
.ak-rule::before, .ak-rule::after {
  content: '◆'; position: absolute; top: -8px; color: var(--ak-gold);
  font-size: 10px; line-height: 1; background: var(--ak-cream); padding: 0 6px;
}
.ak-rule::before { left: 50%; transform: translateX(-50%); }
.ak-rule::after  { display: none; }

/* Saffron pill button */
.ak-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ak-saffron); color: #FFFBF1;
  font-family: var(--ak-body); font-weight: 600; font-size: 14px;
  letter-spacing: 0.04em; padding: 13px 24px; border: 0; border-radius: 999px;
  cursor: pointer; transition: transform .15s ease, background .15s ease;
  box-shadow: 0 8px 20px rgba(224,122,25,.25), inset 0 -2px 0 rgba(0,0,0,.10);
}
.ak-btn:hover { background: var(--ak-saffron-2); transform: translateY(-1px); }
.ak-btn.ghost {
  background: transparent; color: var(--ak-ink); box-shadow: inset 0 0 0 1px var(--ak-gold);
}
.ak-btn.ghost:hover { background: rgba(184,146,62,.10); }
.ak-btn.maroon { background: var(--ak-maroon); }
.ak-btn.maroon:hover { background: var(--ak-maroon-2); }

/* Chip */
.ak-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font-family: var(--ak-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(184,146,62,.12); color: var(--ak-gold-2);
  border: 1px solid rgba(184,146,62,.35);
}

/* Ornate frame around a card */
.ak-frame {
  position: relative;
  background: var(--ak-cream-2);
  border: 1px solid rgba(184,146,62,.45);
  box-shadow: inset 0 0 0 4px var(--ak-cream-2), inset 0 0 0 5px rgba(184,146,62,.25);
  border-radius: 2px;
}

/* Saffron→maroon gradient (subtle) */
.ak-grad-warm {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(224,122,25,.18), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(107,31,42,.18), transparent 70%),
    var(--ak-cream);
}

/* Ink night surface */
.ak-night {
  background:
    radial-gradient(60% 50% at 70% 20%, rgba(212,178,106,.10), transparent 60%),
    radial-gradient(50% 50% at 20% 80%, rgba(224,122,25,.10), transparent 60%),
    #14102B;
  color: #EFE4C9;
}

/* Striped image placeholder */
.ak-imgslot {
  background:
    repeating-linear-gradient(135deg, rgba(184,146,62,.16) 0 8px, transparent 8px 16px),
    var(--ak-parchment);
  border: 1px dashed rgba(184,146,62,.55);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ak-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ak-ink-soft);
}

/* Glyph badge — circular */
.ak-glyph {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(180deg, #FBF1D9, #E8D2A0);
  box-shadow: inset 0 0 0 1px var(--ak-gold), 0 2px 8px rgba(184,146,62,.25);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ak-display); font-weight: 600; color: var(--ak-maroon);
  font-size: 20px;
}

/* breathing animation utility */
@keyframes ak-breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.03); filter: brightness(1.08); }
}
@keyframes ak-rotate { to { transform: rotate(360deg); } }
@keyframes ak-glow { 0%,100% { opacity: .6 } 50% { opacity: 1 } }

/* selection */
.ak-root ::selection { background: rgba(224,122,25,.35); color: var(--ak-ink); }