/* ============================================================================
   FROOTCITY DESIGN SYSTEM — TOKENS
   One source of truth. Two surface modes (day / night), one palette.
   day   = consumer surfaces (customer, b2b, horeca, gifting) — fresh, bright
   night = operational surfaces (delivery, store, mandi, admin, support, cmd)
   ========================================================================= */

:root {
  /* ---- BRAND ------------------------------------------------------------ */
  --fc-green-50:  #F2FAE6;
  --fc-green-100: #E2F4C9;
  --fc-green-200: #CBEA9F;
  --fc-green-300: #B0DE70;
  --fc-green-400: #9BD14A;
  --fc-green-500: #8CC63F;   /* brand primary — from logo */
  --fc-green-600: #76B72A;
  --fc-green-700: #5F9E1E;
  --fc-green-800: #487A17;
  --fc-green-900: #2F5210;

  --fc-red-400:   #F0483C;
  --fc-red-500:   #E63329;   /* apple red — from logo */
  --fc-red-600:   #D5211B;
  --fc-red-700:   #A8130F;

  --fc-ink-900:   #0C1109;
  --fc-ink-800:   #141B10;
  --fc-ink-700:   #1E2718;
  --fc-ink-600:   #34412B;
  --fc-ink-500:   #55654A;
  --fc-ink-400:   #7C8B71;
  --fc-ink-300:   #A8B49F;
  --fc-ink-200:   #CDD6C6;
  --fc-ink-100:   #E7ECE3;
  --fc-ink-50:    #F5F8F3;

  /* ---- FRUIT INTERIOR ---------------------------------------------------
     The cut-away palette. Nine archetypes carry real internal geometry, and
     the flesh, pith and seeds are as much a part of the product's identity as
     its skin — so they are tokens, not literals buried in a renderer.        */
  --flesh-citrus:  #F7B44E;
  --flesh-apple:   #F4E9C8;
  --flesh-mango:   #F2A32B;
  --flesh-melon:   #E8536A;
  --flesh-kiwi:    #8FC64A;
  --flesh-avocado: #D9DE93;
  --flesh-berry:   #E8657A;
  --flesh-pom:     #D8213E;
  --flesh-banana:  #F6EDD2;
  --pith-white:    #F6F2E4;
  --pith-cream:    #EDE6CE;
  --seed-dark:     #2B2118;

  /* ---- SEMANTIC / STATUS ------------------------------------------------ */
  --fc-eat-today:   #E8A21C;  /* ripeness: eat today      */
  --fc-eat-soon:    #8CC63F;  /* ripeness: 2-3 days       */
  --fc-ripen-home:  #4C9BD1;  /* ripeness: ripen at home  */
  --fc-success:     #1FA85B;
  --fc-warn:        #E8A21C;
  --fc-danger:      #E0362C;
  --fc-info:        #3E8FD0;
  --fc-premium:     #C89B3C;  /* exotic / imported / gifting accent */

  /* ---- APP ACCENTS ------------------------------------------------------
     One accent per application. Referenced by rbac.js APPS[].color so the
     colour is declared once and consumed everywhere else by name.          */
  --app-customer: #8CC63F;
  --app-delivery: #4C9BD1;
  --app-store:    #7C8B71;
  --app-mandi:    #C89B3C;
  --app-admin:    #5F9E1E;
  --app-b2b:      #4C7BD1;
  --app-horeca:   #C87C3C;
  --app-support:  #3E8FD0;
  --app-command:  #E8892A;

  /* ---- TIERS ------------------------------------------------------------ */
  --tier-bronze:  #C87C3C;
  --tier-silver:  #8C9C84;
  --tier-gold:    #C89B3C;

  /* ---- GRADES (procurement) -------------------------------------------- */
  --grade-a: var(--fc-success);
  --grade-b: var(--fc-warn);
  --grade-c: var(--fc-danger);

  /* ---- BADGE INK (accessible text on tinted badge grounds) -------------- */
  --ink-on-warn:  #7A5206;
  --ink-on-green: #0E7040;
  --ink-on-blue:  #1E6394;
  --ink-on-info:  #256AA6;
  --ink-on-gold:  #7A5A0E;

  /* ---- TYPE SCALE (fluid, mobile-first) --------------------------------- */
  --fc-font-display: "Georgia", "Iowan Old Style", "Times New Roman", serif;
  --fc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
                  "Noto Sans Telugu", "Noto Sans Devanagari", Roboto, Helvetica, Arial, sans-serif;
  --fc-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --fc-t-2xs: 10px;
  --fc-t-xs:  11px;
  --fc-t-sm:  12.5px;
  --fc-t-md:  14px;
  --fc-t-lg:  16px;
  --fc-t-xl:  19px;
  --fc-t-2xl: 23px;
  --fc-t-3xl: 28px;
  --fc-t-4xl: 34px;
  --fc-t-5xl: 44px;

  --fc-lh-tight: 1.15;
  --fc-lh-snug:  1.3;
  --fc-lh-base:  1.5;
  --fc-lh-loose: 1.65;

  --fc-w-regular: 400;
  --fc-w-medium: 550;
  --fc-w-semi: 650;
  --fc-w-bold: 750;

  /* ---- SPACING (4pt grid) ----------------------------------------------- */
  --fc-s-1: 4px;   --fc-s-2: 8px;   --fc-s-3: 12px;  --fc-s-4: 16px;
  --fc-s-5: 20px;  --fc-s-6: 24px;  --fc-s-7: 32px;  --fc-s-8: 40px;
  --fc-s-9: 48px;  --fc-s-10: 64px; --fc-s-11: 80px;

  /* ---- RADIUS ----------------------------------------------------------- */
  --fc-r-xs: 6px;  --fc-r-sm: 10px; --fc-r-md: 14px; --fc-r-lg: 20px;
  --fc-r-xl: 26px; --fc-r-2xl: 34px; --fc-r-pill: 999px;

  /* ---- MOTION ----------------------------------------------------------- */
  --fc-m-fast:   140ms;   /* micro: press, toggle, ripple      */
  --fc-m-quick:  220ms;   /* micro-nav: sheet nudge, badge     */
  --fc-m-medium: 340ms;   /* navigation: route, drawer, modal  */
  --fc-m-slow:   560ms;   /* brand: splash, celebration        */
  --fc-m-epic:   1100ms;  /* splash sequence                   */
  --fc-ease:        cubic-bezier(.22, .61, .36, 1);
  --fc-ease-out:    cubic-bezier(.16, 1, .3, 1);
  --fc-ease-in:     cubic-bezier(.55, .06, .68, .19);
  --fc-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---- LAYOUT ----------------------------------------------------------- */
  --fc-shell-max: 460px;        /* phone canvas width          */
  --fc-tap: 44px;               /* min touch target            */
  --fc-press: .965;             /* the one press scale         */
  /* Everything a state change may animate. Deliberately excludes width,
     height, top and left: those are layout, and animating them janks. */
  --fc-tx: background-color, border-color, color, opacity, box-shadow, transform;
  --fc-safe-top: env(safe-area-inset-top, 0px);
  --fc-safe-bot: env(safe-area-inset-bottom, 0px);
  --fc-z-nav: 40; --fc-z-sheet: 60; --fc-z-modal: 70;
  --fc-z-toast: 80; --fc-z-splash: 95; --fc-z-top: 100;

  /* Set at runtime by shell.js; declared here so it always resolves. */
  --grain-url: none;
}

/* ---- DAY SURFACE (consumer) --------------------------------------------- */
[data-surface="day"] {
  --bg-base:     #EAF2E2;
  --bg-wash-a:   #C9E39C;
  --bg-wash-b:   #F7FBF2;
  --bg-wash-c:   #FFD9C2;

  --glass-fill:      rgba(255, 255, 255, .62);
  --glass-fill-soft: rgba(255, 255, 255, .40);
  --glass-fill-hard: rgba(255, 255, 255, .84);
  --glass-stroke:    rgba(255, 255, 255, .78);
  --glass-stroke-lo: rgba(20, 40, 14, .07);
  --glass-shadow:    0 1px 2px rgba(20,40,14,.05), 0 8px 24px -8px rgba(20,40,14,.16);
  --glass-shadow-lg: 0 2px 6px rgba(20,40,14,.06), 0 24px 60px -18px rgba(20,40,14,.28);
  --glass-blur: 20px;
  --glass-sat: 165%;

  --txt-1: var(--fc-ink-900);
  --txt-2: var(--fc-ink-600);
  --txt-3: var(--fc-ink-500);
  --txt-inv: #FFFFFF;

  --line:      rgba(20, 40, 14, .10);
  --line-soft: rgba(20, 40, 14, .06);
  --field:     rgba(255, 255, 255, .74);
  --scrim:     rgba(12, 17, 9, .40);
  --accent:    var(--fc-green-600);
  --accent-ink:var(--fc-ink-900);   /* dark ink on brand green: 7.8:1 */
  --focus:     var(--fc-green-800); /* 4.5:1 on the day ground */
  --on-glass-chip: rgba(20, 40, 14, .05);
}

/* ---- NIGHT SURFACE (operations) ----------------------------------------- */
[data-surface="night"] {
  /* Dark surface needs lighter ink on the same tinted badge grounds. */
  --ink-on-warn:  #F2BD57;
  --ink-on-green: #6FDCA3;
  --ink-on-blue:  #8AC6EE;
  --ink-on-info:  #8DC4F0;
  --ink-on-gold:  #E5C173;

  --bg-base:     #080C07;
  --bg-wash-a:   #12331A;
  --bg-wash-b:   #0A1410;
  --bg-wash-c:   #2A1A10;

  --glass-fill:      rgba(255, 255, 255, .055);
  --glass-fill-soft: rgba(255, 255, 255, .03);
  --glass-fill-hard: rgba(255, 255, 255, .10);
  --glass-stroke:    rgba(255, 255, 255, .12);
  --glass-stroke-lo: rgba(255, 255, 255, .06);
  --glass-shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 30px -10px rgba(0,0,0,.7);
  --glass-shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 30px 70px -20px rgba(0,0,0,.85);
  --glass-blur: 22px;
  --glass-sat: 150%;

  --txt-1: #F2F6EE;
  --txt-2: rgba(242, 246, 238, .70);
  --txt-3: rgba(242, 246, 238, .55);
  --txt-inv: #0C1109;

  --line:      rgba(255, 255, 255, .10);
  --line-soft: rgba(255, 255, 255, .055);
  --field:     rgba(255, 255, 255, .05);
  --scrim:     rgba(0, 0, 0, .62);
  --accent:    var(--fc-green-400);
  --focus:     var(--fc-green-400);
  --accent-ink:#0C1109;
  --on-glass-chip: rgba(255, 255, 255, .06);
}

/* ---- ACCESSIBILITY: reduced motion -------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --fc-m-fast: 1ms; --fc-m-quick: 1ms; --fc-m-medium: 1ms;
    --fc-m-slow: 1ms; --fc-m-epic: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    /* The delay has to go with the duration. A delayed animation with a
       backwards fill holds frame zero for the whole delay, so collapsing only
       the duration left the splash wordmark and both taglines at opacity 0
       until after the splash had already been removed. */
    animation-delay: 0s !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ---- ACCESSIBILITY: forced high contrast -------------------------------- */
[data-contrast="high"] {
  --glass-fill: var(--bg-wash-b);
  --glass-fill-soft: var(--bg-wash-b);
  --glass-fill-hard: var(--bg-wash-b);
  --glass-blur: 0px;
  --line: currentColor;
}
[data-contrast="high"] [data-surface="day"], [data-contrast="high"].day { --glass-fill: #fff; }