/* ============================================================
   VEDIKKS — Colors & Type foundations
   A Vedic-astrology mobile app. Cosmic, premium, minimal.
   Import this file, then use the CSS variables below.
   Fonts load from Google Fonts (see @import).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&family=Nunito:wght@600;700;800&family=Figtree:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand core ---------- */
  --vk-purple:        #5F39FF;  /* primary brand purple (most-used) */
  --vk-purple-bright: #7B2CFF;  /* buttons, active accents          */
  --vk-purple-indigo: #614FFE;  /* secondary purple                 */
  --vk-purple-deep:   #6831E1;  /* organic blob shapes behind logo  */
  --vk-pink:          #FF1678;  /* hero accent — headings & CTA     */
  --vk-magenta:       #FC3DD3;  /* zodiac glyph stroke, sparkle      */
  --vk-cyan:          #73E9FE;  /* cool highlight                    */
  --vk-yellow:        #FFE98D;  /* tarot / talisman gold             */

  /* ---------- Surfaces ---------- */
  --vk-bg-deep:    #250045;  /* primary dark cosmic background      */
  --vk-bg-light:   #F6EDFF;  /* light lavender app background       */
  --vk-lavender:   #D6BDFF;  /* mid lavender — chips, fills         */
  --vk-white:      #FFFFFF;
  --vk-black:      #000000;

  /* ---------- Lines & nav ---------- */
  --vk-border:     #D8DADC;  /* hairline borders on light surfaces  */
  --vk-nav-active: #3E71F6;  /* bottom-nav active icon (blue)        */
  --vk-nav-rest:   #5E5F60;  /* bottom-nav inactive icon/label      */

  /* ---------- Text ---------- */
  --vk-ink:        #000000;            /* primary text on light       */
  --vk-ink-70:     rgba(0,0,0,0.70);   /* secondary text on light     */
  --vk-ink-50:     rgba(0,0,0,0.50);   /* placeholder / tertiary      */
  --vk-on-dark:        #FFFFFF;        /* primary text on dark        */
  --vk-on-dark-70: rgba(255,255,255,0.70); /* secondary on dark       */
  --vk-on-dark-40: rgba(255,255,255,0.40); /* tertiary / micro on dark*/

  /* ---------- Cosmic warm gradient (tarot sunburst / talismans) ---------- */
  --vk-warm-1: #FEE38F;
  --vk-warm-2: #FED495;
  --vk-warm-3: #FEBB9F;
  --vk-warm-4: #FD99AD;
  --vk-warm-5: #FC6DBF;
  --vk-grad-warm: linear-gradient(135deg, var(--vk-warm-1), var(--vk-warm-3) 45%, var(--vk-warm-5));

  /* Radial cosmic glow used on the splash/onboarding behind the mark */
  --vk-glow-purple: radial-gradient(60% 50% at 50% 42%, #4A1A8E 0%, #2D0857 55%, #250045 100%);
  /* Primary CTA gradient (subtle) */
  --vk-grad-purple: linear-gradient(180deg, #7B2CFF 0%, #5F39FF 100%);

  /* ---------- Type families ---------- */
  --vk-font-display: 'Poppins', system-ui, sans-serif;  /* headings, titles */
  --vk-font-body:    'Inter', system-ui, sans-serif;     /* body, buttons    */
  --vk-font-num:     'Nunito', system-ui, sans-serif;    /* numerics, % chips */
  --vk-font-nav:     'Figtree', system-ui, sans-serif;   /* nav labels        */

  /* ---------- Radii ---------- */
  --vk-r-sm:  5px;    /* keyboard keys, tiny chips        */
  --vk-r-md:  10px;   /* buttons, inputs                 */
  --vk-r-lg:  12px;   /* nav bar, cards                  */
  --vk-r-xl:  24px;   /* large content cards             */
  --vk-r-hero: 50px;  /* dark hero panel bottom curve    */
  --vk-r-pill: 100px; /* floating action button, pills   */

  /* ---------- Elevation ---------- */
  --vk-shadow-key:   0 1px 0 rgba(0,0,0,0.35);            /* keyboard key      */
  --vk-shadow-card:  0 8px 30px rgba(37,0,69,0.10);       /* light card        */
  --vk-shadow-float: 0 4px 20px rgba(255,22,120,0.35);    /* pink FAB glow      */
  --vk-shadow-soft:  0 4px 20px rgba(95,57,255,0.15);     /* soft purple lift  */

  /* ---------- Spacing scale (4pt base) ---------- */
  --vk-s-1: 4px;  --vk-s-2: 8px;  --vk-s-3: 12px; --vk-s-4: 16px;
  --vk-s-5: 20px; --vk-s-6: 24px; --vk-s-8: 32px; --vk-s-10: 40px;

  /* App canvas width (iPhone reference) */
  --vk-screen-w: 393px;
  --vk-screen-h: 852px;
}

/* ============================================================
   Semantic type — apply these classes or copy the rules.
   Scale tuned to the 393px mobile canvas.
   ============================================================ */

.vk-hero      { font-family: var(--vk-font-display); font-weight: 700; font-size: 32px; line-height: 1.3; letter-spacing: -0.01em; }
.vk-h1        { font-family: var(--vk-font-display); font-weight: 700; font-size: 30px; line-height: 1.3; letter-spacing: -0.01em; }
.vk-h2        { font-family: var(--vk-font-display); font-weight: 700; font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; }
.vk-h3        { font-family: var(--vk-font-display); font-weight: 600; font-size: 20px; line-height: 1.3; }
.vk-label     { font-family: var(--vk-font-display); font-weight: 600; font-size: 16px; line-height: 1.25; }  /* pink section labels */
.vk-body      { font-family: var(--vk-font-body);    font-weight: 400; font-size: 16px; line-height: 1.5; }
.vk-body-sm   { font-family: var(--vk-font-display); font-weight: 300; font-size: 14px; line-height: 1.3; }   /* muted subcopy */
.vk-button    { font-family: var(--vk-font-body);    font-weight: 700; font-size: 16px; line-height: 1.25; }
.vk-caption   { font-family: var(--vk-font-display); font-weight: 300; font-size: 11px; line-height: 1.25; }  /* micro / reassurance */
.vk-num       { font-family: var(--vk-font-num);     font-weight: 700; font-size: 14px; line-height: 1; }     /* % and counters */
.vk-nav       { font-family: var(--vk-font-nav);     font-weight: 400; font-size: 12px; line-height: 1; }