/* =====================================================
   VERO — palette and design tokens
   Every colour comes from the client's two images (cover and logo). The copied code keeps
   its --gk-* names, mapped here: "green" is now charcoal, "orange" is rose gold.
   Rose gold on white is only 2.4:1, so small accent text and prices use bronze
   (--gk-orange-ink, 6.4:1); text on rose gold is charcoal (--gk-on-orange, 6.3:1).
   Only --gk-red is not from the images: it marks errors and must stay readable as an error.
   ===================================================== */
:root {
    --vero-charcoal: #232326;
    --vero-black: #19191A;
    --vero-raised: #2E2E31;
    --vero-graphite: #373538;
    --vero-rose: #C89986;
    --vero-highlight: #F1CAB6;
    --vero-champagne: #F5D8C6;
    --vero-ivory: #FEF8E7;
    --vero-bronze: #785749;
    --vero-soft: #FCF3EE;   /* champagne, 30% on white */
    --vero-soft-2: #FAEBE2; /* champagne, 50% on white */

    --gk-green: var(--vero-charcoal);
    --gk-green-2: var(--vero-black);
    --gk-green-bright: var(--vero-raised);
    --gk-green-soft: var(--vero-soft);
    --gk-green-mint: var(--vero-soft-2);

    --gk-orange: var(--vero-rose);
    --gk-orange-2: var(--vero-highlight);
    --gk-orange-ink: var(--vero-bronze);
    --gk-on-orange: var(--vero-charcoal);
    --gk-orange-soft: var(--vero-soft);
    --gk-orange-tint: var(--vero-soft);
    --gk-on-dark: var(--vero-ivory);

    --gk-amber: var(--vero-rose);
    --gk-amber-soft: var(--vero-soft);

    /* Astra's own elements (links, checkboxes, buttons, pagination) use these */
    --ast-global-color-0: var(--gk-green);
    --ast-global-color-1: var(--gk-green-2);

    --gk-red: #d32f2f;
    --gk-red-soft: #fef2f2;
    --gk-pink: var(--vero-bronze);

    --gk-bg: #ffffff;
    --gk-white: #ffffff;
    /* greys warmed towards the logo's charcoal; 900 and 950 are the palette's own */
    --gk-slate-50: #FAF8F5;
    --gk-slate-100: #F5F2EE;
    --gk-slate-150: #F0ECE8;
    --gk-slate-200: #E8E3DF;
    --gk-slate-300: #CFC9C5;
    --gk-slate-400: #98938F;
    --gk-slate-500: #6B6769;
    --gk-slate-600: #4F4C4E;
    --gk-slate-700: var(--vero-graphite);
    --gk-slate-800: var(--vero-raised);
    --gk-slate-900: var(--vero-charcoal);
    --gk-slate-950: var(--vero-black);

    --gk-shadow-xs: 0 1px 2px rgba(25, 25, 26, .04);
    --gk-shadow-sm: 0 1px 3px rgba(25, 25, 26, .06), 0 1px 2px rgba(25, 25, 26, .04);
    --gk-shadow: 0 4px 12px rgba(25, 25, 26, .07);
    --gk-shadow-md: 0 8px 24px rgba(25, 25, 26, .08);
    --gk-shadow-lg: 0 18px 48px rgba(25, 25, 26, .14);
    --gk-shadow-orange: 0 10px 25px -5px rgba(200, 153, 134, .25);

    --gk-r-sm: 10px;
    --gk-r: 12px;
    --gk-r-lg: 16px;
    --gk-r-xl: 20px;
    --gk-r-2xl: 24px;
    --gk-r-3xl: 30px;
    --gk-pill: 9999px;

    /* Cabin has no Bengali letters: the browser takes those from Hind Siliguri, letter by letter */
    --gk-font: "Cabin", "Hind Siliguri", "SolaimanLipi", system-ui, -apple-system, sans-serif;
    --gk-font-display: "Cormorant Garamond", "Hind Siliguri", Georgia, serif;
    --gk-container: 1280px;
}

/* The display serif is thin at small sizes, so it stays on page and section titles;
   form and checkout titles keep the body font (easy to read for anyone). */
h1, h2 { font-family: var(--gk-font-display); }
.gk-sbn-h2, .gk-fast-order-head h2 { font-family: var(--gk-font); }