/*
  DailyDabba public site — global design tokens.
  Every color / gradient / font / radius / shadow used on the public
  site MUST come from one of these custom properties. No hardcoded
  hex values or font names in site.css or inline styles.
*/
:root{
  /* ---- Brand palette ---- */
  --color-bg:            #FFFDF7;   /* cream background */
  --color-bg-alt:        #F8FBF6;   /* alternate section background */
  --color-bg-warm:       #F8FBF6;
  --color-surface:       #FFFFFF;   /* cards */

  --color-primary-50:    #FFF3E0;
  --color-primary-100:   #FFCC80;   /* light orange */
  --color-primary-400:   #FFA726;   /* mid orange */
  --color-primary:       #FF9800;   /* primary orange — brand / headings / CTAs */
  --color-primary-600:   #E68A00;
  --color-primary-700:   #C97800;   /* dark orange */

  --color-accent-100:    #FBEFEE;
  --color-accent:        #7A2620;   /* secondary maroon — highlights, badges */
  --color-accent-600:    #641F1A;
  --color-accent-700:    #4E1815;

  --color-ink:           #212121;   /* text dark */
  --color-muted:         #616161;   /* secondary text */
  --color-muted-2:       #8A8A8A;
  --color-border:        #E8ECE8;
  --color-border-soft:   #EEF2EC;

  --color-white:         #FFFFFF;
  --color-dark:          #C97800;
  --color-success:       #7A2620;

  --color-footer-blue-900: #0B1F3D;   /* deep navy — footer base */
  --color-footer-blue-600: #24466F;   /* mid navy — footer highlight */

  /* ---- Gradients ---- */
  --gradient-primary:    linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-400) 100%);
  --gradient-footer:     linear-gradient(100deg, var(--color-footer-blue-900) 0%, var(--color-footer-blue-600) 100%);
  --gradient-badges-bar: linear-gradient(100deg, var(--color-primary-700) 0%, var(--color-primary) 50%, var(--color-primary-400) 100%);
  --gradient-accent:     linear-gradient(120deg, var(--color-accent) 0%, var(--color-accent-600) 100%);
  --gradient-hero:       radial-gradient(1100px 550px at 15% -10%, rgba(255,152,0,.12), transparent 60%),
                         radial-gradient(900px 480px at 100% 0%, rgba(122,38,32,.10), transparent 55%);
  --gradient-dark:       linear-gradient(160deg, var(--color-primary-700) 0%, var(--color-primary) 60%, var(--color-primary-400) 100%);
  --gradient-text:       linear-gradient(120deg, var(--color-primary) 0%, var(--color-accent) 100%);

  /* ---- Typography ---- */
  --font-heading: 'Poppins', 'Hind', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Poppins', 'Hind', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-devanagari: 'Hind', 'Noto Sans Devanagari', sans-serif;

  --fs-h1: clamp(2.2rem, 4.6vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 3vw, 2.5rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: .875rem;

  --lh-body: 1.6;
  --ls-tight: -.01em;

  /* ---- Shape / elevation ---- */
  --radius-sm:  10px;
  --radius-btn: 12px;
  --radius-md:  16px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-pill: 999px;

  --shadow-sm:  0 2px 10px rgba(201,120,0,.05);
  --shadow-md:  0 10px 26px rgba(201,120,0,.08);
  --shadow-lg:  0 20px 46px rgba(201,120,0,.12);
  --shadow-accent: 0 10px 24px rgba(122,38,32,.24);
  --shadow-primary: 0 10px 24px rgba(255,152,0,.26);

  /* ---- Layout ---- */
  --container-max: 1320px;
  --container-pad: 12px;
  --section-pad-y: 120px;
  --section-pad-y-tight: 72px;
  --sidebar-width: 300px;
  --header-height: 84px;

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(.16,.84,.44,1);
  --dur-fast: .2s;
  --dur-med: .35s;
  --dur-slow: .6s;
}

@media (max-width: 767px){
  :root{
    --section-pad-y: 64px;
    --section-pad-y-tight: 44px;
    --header-height: 68px;
    --container-pad: 12px;
  }
}