/* GENERATED by assets/dev/css/build-virasat-home.py — edit virasat-tokens.css instead. */
/* ==========================================================================
   Virasat design tokens — single source of truth
   Figma: "Hamari Virasat" > "Skill Demo / UX Quick Wins" (node 209:404)
   https://www.figma.com/design/xWpHAcjUfuhMtFMoaGrffr/Hamari-Virasat?node-id=209-404

   Every token is named after its Figma variable (the Figma name is in the comment).
   Edit values HERE, then run:  python assets/dev/css/build-virasat-home.py
   The build
     - inlines this block at the top of assets/production/css/virasat-home.css,
     - writes it on its own to assets/production/css/virasat-tokens.css (loaded sitewide
       before the skin in virasat-design-system.css),
     - re-emits the radius / space / type tokens in the desktop (>= 1200px) media block
       with every length scaled by --vh-u, so components that use them keep scaling with
       the page exactly like the hand-written pixel values do.

   Lengths are the 1440px Figma sizes. Use the tokens instead of literals:
     color: var(--vh-ink);   border-radius: var(--vh-radius-md);   font: var(--vh-font-h2-bold);
   ========================================================================== */

:root {
    /* -- Color: text ------------------------------------------------------- */
    --vh-white: #ffffff;               /* text/white */
    --vh-ink: #212322;                 /* text/heading */
    --vh-body: #5c5953;                /* text/body */
    --vh-muted: #706d69;               /* text/muted */
    --vh-on-dark-head: #fff1d0;        /* text/on-dark-heading */
    --vh-on-dark-body: #f0ece4;        /* text/on-dark-body */
    --vh-on-dark-muted: #cbbea9;       /* text/on-dark-muted */
    --vh-on-dark-link: #d3d6d0;        /* text/on-dark-link */

    /* -- Color: brand ------------------------------------------------------ */
    --vh-cream: #fbf6ec;               /* cream/50 */
    --vh-gold-400: #d6aa55;            /* gold/400 */
    --vh-gold-500: #c8953c;            /* color/gold-500 */
    --vh-yellow: #ffd056;              /* color/cta-yellow */
    --vh-accent: #915b2f;              /* color/eyebrow-on-light */
    --vh-gold-text: #f6cf70;           /* color/eyebrow-on-dark */

    /* -- Radius (buttons are pills) ----------------------------------------- */
    --vh-radius-sm: 8px;               /* radius/sm */
    --vh-radius-md: 16px;              /* radius/md */
    --vh-radius-lg: 24px;              /* radius/lg */
    --vh-radius-pill: 999px;

    /* -- Space ------------------------------------------------------------- */
    --vh-space-8: 8px;                 /* space/8 */
    --vh-space-12: 12px;               /* space/12 */
    --vh-space-16: 16px;               /* space/16 */
    --vh-space-24: 24px;               /* space/24 */

    /* -- Font families ----------------------------------------------------- */
    --vh-serif: 'Merriweather', Georgia, serif;
    --vh-sans: 'Inter', 'Noto Sans Devanagari', sans-serif;
    --vh-deva: 'Noto Sans Devanagari', 'Inter', sans-serif;
    --vh-display: 'Martel', 'Noto Sans Devanagari', serif;

    /* -- Type styles (font shorthand: weight size/line-height family) ------- */
    --vh-font-display-hindi: 800 56px/1.3 var(--vh-display);   /* Display/Hindi */
    --vh-font-h2-bold: 700 44px/1.25 var(--vh-serif);          /* Heading/H2 Bold */
    --vh-font-h2-light: 400 44px/1.25 var(--vh-serif);         /* Heading/H2 Light */
    --vh-font-h3: 700 32px/1.25 var(--vh-serif);               /* Heading/H3 */
    --vh-font-h4: 700 22px/32px var(--vh-serif);               /* Heading/H4 */
    --vh-font-h4-light: 400 22px/32px var(--vh-serif);         /* Heading/H4 Light */
    --vh-font-hindi-22: 700 22px/31px var(--vh-deva);          /* Heading/Hindi 22 */
    --vh-font-hindi-18: 700 18px/30px var(--vh-deva);          /* Heading/Hindi 18 */
    --vh-font-body-xl: 500 22px/30px var(--vh-sans);           /* Body/XL */
    --vh-font-body-l: 400 18px/1.6 var(--vh-sans);             /* Body/L */
    --vh-font-body-l-compact: 400 18px/1.5 var(--vh-sans);     /* Text/Inter Regular 18 */
    --vh-font-body-s: 400 14px/1.5 var(--vh-sans);             /* Body/S */
    --vh-font-nav: 500 14px/21px var(--vh-sans);               /* Nav/14 */
    --vh-font-button-s: 600 14px/18px var(--vh-sans);          /* Button/S */
    --vh-font-button-m: 600 16px/21px var(--vh-sans);          /* Button/M */
    --vh-font-button-l: 600 18px/24px var(--vh-sans);          /* Button/L */
    --vh-font-label-14: 600 14px/19px var(--vh-sans);          /* Label/14 */
    --vh-font-label-16: 600 16px/22px var(--vh-sans);          /* Label/16 */
    --vh-font-label-12: 600 12px/16px var(--vh-sans);          /* Label/12 */
    --vh-font-eyebrow: 600 12px/16px var(--vh-sans);           /* Eyebrow */
    --vh-font-caption: 500 12px/19px var(--vh-sans);           /* Caption/Medium 12 */

    /* -- Letter spacing ------------------------------------------------------ */
    --vh-ls-eyebrow: .24em;            /* Eyebrow (24%) */
    --vh-ls-label-12: 2.4px;           /* Label/12 */
    --vh-ls-label-12-tight: .7px;      /* Label/12 · PIXELS15 */
}