/* ============================================================================
   Voriq Agro — design tokens
   Custom properties only. No other selectors live in this file, so nothing here
   can ever lose a specificity fight with a later rule.
   Load order: tokens → base → ui → store (or admin).

   The idea behind the system is the masala dabba: the round steel tin of seven
   bowls in every Indian kitchen. Steel and rice-white carry the structure, the
   logo's two greens carry interaction, and each aisle owns the colour of what
   it actually sells — wheat, masoor, turmeric, jaggery, semolina, ghee,
   pistachio. Colour here is information: it tells you which aisle you are in.
   ========================================================================= */

:root {
    color-scheme: light;

    /* ---- surfaces -------------------------------------------------------- */
    --surface-page:     #FBFBF8;  /* rice — a neutral white, not a cream */
    --surface-raised:   #FFFFFF;
    --surface-sunken:   #F0F2EE;  /* steel-white — wells, summaries, the filter rail */
    --surface-sunken-2: #E2E6E1;
    --surface-ink:      #12351F;  /* the logo's deep leaf green — hero, footer */
    --surface-ink-2:    #1A4429;

    /* ---- ink ------------------------------------------------------------- */
    --ink-1:         #14301F;  /* 13.6:1 on rice */
    --ink-2:         #3C5244;  /*  8.0:1 */
    --ink-muted:     #5D6F63;  /*  5.2:1 — the lightest text allowed */
    --ink-on-dark:   #F4F6EE;  /* 12.4:1 on deep leaf */
    --ink-on-dark-2: #B5C5B4;  /*  7.0:1 */

    /* ---- leaf: interaction. Token names keep the "olive" prefix so every
            component written against them needs no change. ------------------ */
    --olive-50:  #EAF2E1;
    --olive-100: #D5E6C3;
    --olive-400: #6BA51F;  /* the logo's bright leaf — decoration only, 2.9:1 */
    --olive-500: #3D7D22;
    --olive-600: #1B5E2B;  /* default  7.7:1 on rice */
    --olive-700: #154B22;
    --olive-800: #0F3A1A;

    /* ---- chilli: emphasis, at most one per page --------------------------- */
    --terracotta-50:  #FBE9E4;
    --terracotta-100: #F4CFC5;
    --terracotta-500: #C8391F;
    --terracotta-600: #A82C16;  /* 6.6:1 on rice */
    --terracotta-700: #8A2311;
    --terracotta-800: #6E1B0D;

    /* ---- the dabba: one colour per aisle, taken from the ingredient -------- */
    --aisle-wheat:     #D9B26A;
    --aisle-masoor:    #C9622E;
    --aisle-turmeric:  #E0A30B;
    --aisle-jaggery:   #8A4B1F;
    --aisle-semolina:  #EFD9A0;
    --aisle-ghee:      #F2C230;
    --aisle-pistachio: #A3B55A;
    --aisle-marigold:  #E8871E;
    --aisle-steel:     #9AA3A7;
    --aisle-rose:      #C98B8B;
    --aisle: var(--aisle-steel);          /* whichever aisle the element belongs to */
    --steel: #C9CFCC;
    --steel-light: #E9EDEB;
    --steel-dark: #8C9693;

    /* ---- semantic -------------------------------------------------------- */
    --success: #1B6B3A;  --success-bg: #E2F1E6;  --success-line: #B3D8BF;
    --warning: #8A5A12;  --warning-bg: #FBF1D3;  --warning-line: #E6CF9E;
    --danger:  #A82C16;  --danger-bg:  #FBE9E4;  --danger-line:  #F4CFC5;
    --info:    #2A5B7A;  --info-bg:    #E6EFF5;  --info-line:    #B7CEDC;

    /* ---- borders --------------------------------------------------------- */
    --border-subtle:  #E4E8E2;
    --border:         #CDD5CD;
    --border-strong:  #8C9A8E;  /* 3.1:1 — may carry state */
    --border-on-dark: rgba(244, 246, 238, .18);

    /* ---- elevation: almost none. Tins sit flat; only things that float lift. */
    --e-0: none;
    --e-1: 0 1px 0 rgba(18, 53, 31, .06);
    --e-2: 0 2px 6px rgba(18, 53, 31, .08), 0 12px 28px -14px rgba(18, 53, 31, .22);
    --e-3: 0 22px 50px -22px rgba(18, 53, 31, .4);
    --contact-shadow: radial-gradient(ellipse 46% 8% at 50% 90%, rgba(18, 53, 31, .18), transparent 70%);

    /* ---- type: one family, and its width axis does the work ---------------
       Anek Latin (Ek Type, Mumbai). Expanded and heavy for headlines, the way a
       grain sack is stencilled; condensed and bold for prices, the way a shop
       price chit is written. There is deliberately no second typeface. */
    --font-display: 'Anek Latin', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-sans: 'Anek Latin', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
    --wdth-display: 125;
    --wdth-chit: 78;

    --fs-display: 76px;   --lh-display: .94;   --ls-display: -.025em;
    --fs-h1: 46px;        --lh-h1: 1.0;        --ls-h1: -.02em;
    --fs-h2: 34px;        --lh-h2: 1.05;       --ls-h2: -.015em;
    --fs-h3: 22px;        --lh-h3: 1.2;        --ls-h3: -.005em;
    --fs-h4: 17px;        --lh-h4: 1.30;       --ls-h4: 0;
    --fs-lead: 19px;      --lh-lead: 1.55;
    --fs-body: 16.5px;    --lh-body: 1.55;
    --fs-small: 15px;     --lh-small: 1.5;
    --fs-caption: 13.5px; --lh-caption: 1.4;   --ls-caption: 0;
    --fs-eyebrow: 15px;   --lh-eyebrow: 1.2;   --ls-eyebrow: 0;

    /* ---- spacing — 4px base, a closed set of nine ------------------------- */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
    --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

    --gutter: 16px;
    --measure: 66ch;
    --container: 1240px;
    --section-y: clamp(48px, 7vw, 96px);

    /* ---- shape: a hierarchy, not one radius everywhere ---------------------
       Circles are for things you press (a katori, the add button, the basket
       count). Tins are containers. Chips are small. */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 16px;    /* tins: wells, tiles, panels */
    --r-lg: 24px;    /* sheets */
    --r-pill: 999px;

    /* ---- motion ---------------------------------------------------------- */
    --dur-fast: 120ms;
    --dur: 180ms;
    --dur-slow: 320ms;
    --ease: cubic-bezier(.32, .72, 0, 1);
    --ease-inout: cubic-bezier(.65, 0, .35, 1);
}

@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

@media (max-width: 600px) {
    :root {
        --fs-display: 44px; --lh-display: .98;
        --fs-h1: 32px;
        --fs-h2: 26px;
        --fs-h3: 20px;
        --fs-h4: 16.5px;
        --fs-lead: 17.5px;
        --fs-body: 16px;   /* never below 16px: iOS zooms the page on focus otherwise */
        --fs-small: 14.5px;
        --fs-caption: 13px;
    }
}