/* 10 Minute School — Design Tokens
   Generated from DESIGN.md frontmatter. Do not edit manually.
   Source: projects/10MS1/DESIGN.md
*/
/* fonts are loaded with <link> tags in each page's <head> (faster than @import) */

:root {
  /* Colors */
  --c-primary:            #1CAB55; /* active states, focus rings, progress */
  --c-primary-deep:       #17994B; /* hover/pressed on primary */
  --c-primary-container:  #D0FAD0;
  --c-on-primary:         #FFFFFF;
  --c-on-primary-container: #086347;
  --c-green-link:         #149353; /* text links, nav labels */
  --c-green-cta:          #37C25C; /* filled CTA button surfaces */
  --c-brand-red:          #E8001D; /* marketing/landing ONLY — never app UI */
  --c-error:              #DC2626; /* in-app errors, alerts, badges */
  --c-alert-surface:      #FEF2F2;
  --c-header-dark:        #050B14; /* mobile top bar, NOT desktop nav */
  --c-surface:            #FFFFFF;
  --c-surface-subtle:     #F3F4F6;
  --c-surface-tinted:     #EAFEF2;
  --c-surface-blue:       #EFF6FF;
  --c-nav-active-tint:    #EAFEF2;
  --c-inverse:            #111827;
  --c-text:               #111827;
  --c-text-2:             #374151;
  --c-text-3:             #6B7280;
  --c-text-dis:           #D1D5DB;
  --c-icon-off:           #CDD1D7; /* nav icons inactive ONLY — not body text */
  --c-outline:            #E5E7EB;
  --c-outline-v:          #D1D5DB;

  /* Typography */
  --f-en: 'Inter', sans-serif;       /* ALL English strings */
  --f-bn: 'Anek Bangla', sans-serif; /* ALL Bengali strings */

  /* Radius */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   12px;   /* inputs, small cards, icon-only square buttons */
  --r-2xl:  16px;   /* large cards */
  --r-3xl:  24px;
  --r-full: 999px;  /* all pill buttons, chips */

  /* Spacing */
  --s-xs:  6px;
  --s-sm:  8px;
  --s-sm2: 14px;
  --s-md:  12px;
  --s-lg:  16px;  /* card padding mobile */
  --s-xl:  24px;  /* card padding desktop */
  --s-2xl: 32px;
  --s-3xl: 48px;

  /* Shadows — flat by default, shadow = hover/modal only */
  --sh-card:  0 1px 3px rgba(0,0,0,0.08);   /* nav bar structural only */
  --sh-hover: 0 4px 16px rgba(0,0,0,0.10);  /* card hover + translateY(-2px) */
  --sh-modal: 0 8px 40px rgba(0,0,0,0.14);  /* modals, sheets, dropdowns */
  --sh-tab:   0 -4px 20px rgba(0,0,0,0.05); /* mobile bottom nav (upward) */
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--f-bn); /* default Bengali; switch to --f-en for English blocks */
  background: var(--c-surface);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}