/* =========================================================================
   Vietlearn Design System — tokens.css
   Canonical design tokens. Import this FIRST, before components.css.
   ========================================================================= */

:root {
  /* -------- Color: neutrals (warm) ------------------------------------- */
  --color-bg:            #FBF7F1;   /* app background, warm off-white     */
  --color-surface:       #FFFFFF;   /* cards, sheets                      */
  --color-surface-alt:   #F5EFE6;   /* subtle raised areas, hover fills   */
  --color-border:        #E7DFD2;   /* hairline borders                   */
  --color-border-strong: #D3C7B3;   /* focused / emphasized borders       */

  --color-text:          #1F1A14;   /* primary text                       */
  --color-text-muted:    #6B6153;   /* secondary text, meta               */
  --color-text-subtle:   #948875;   /* tertiary, placeholders             */
  --color-text-inverse:  #FFFFFF;   /* on primary/dark surfaces           */

  /* -------- Color: brand ---------------------------------------------- */
  --color-primary:        #B4531F;  /* warm terracotta, brand action      */
  --color-primary-hover:  #9A4418;
  --color-primary-active: #7F3712;
  --color-primary-soft:   #F6E4D5;  /* tinted background for primary      */
  --color-primary-fg:     #FFFFFF;

  --color-accent:         #2F6A5A;  /* deep green, secondary accent       */
  --color-accent-soft:    #DDEBE4;

  /* -------- Color: semantic ------------------------------------------- */
  --color-success:        #2E7D4F;
  --color-success-soft:   #DFF1E4;
  --color-success-fg:     #123B22;

  --color-warning:        #A9700B;
  --color-warning-soft:   #FBEBCC;
  --color-warning-fg:     #4A3106;

  --color-danger:         #B23A2E;
  --color-danger-soft:    #F6DAD5;
  --color-danger-fg:      #4E1712;

  --color-info:           #2C5E8A;
  --color-info-soft:      #D9E6F2;
  --color-info-fg:        #142B44;

  --color-revision:       #8A4A1E;   /* homework "needs revision"         */
  --color-revision-soft:  #F5DFCB;
  --color-revision-fg:    #3E1F0C;

  /* -------- Typography ------------------------------------------------ */
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (mobile-first; body stays 16px for iOS input zoom rule) */
  --text-xs:    0.75rem;   /* 12px  meta, chip counts                    */
  --text-sm:    0.875rem;  /* 14px  helper text, badges                  */
  --text-base:  1rem;      /* 16px  body, form input MINIMUM             */
  --text-md:    1.0625rem; /* 17px  emphasized body                      */
  --text-lg:    1.25rem;   /* 20px  card titles                          */
  --text-xl:    1.5rem;    /* 24px  section headers                      */
  --text-2xl:   1.875rem;  /* 30px  page headers                         */
  --text-3xl:   2.25rem;   /* 36px  hero (rare in-app)                   */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* -------- Spacing (4px base) ---------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */

  /* -------- Radius ---------------------------------------------------- */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;   /* default control radius                      */
  --radius-lg: 1rem;      /* cards                                       */
  --radius-xl: 1.25rem;   /* sheets, banners                             */
  --radius-pill: 999px;

  /* -------- Borders --------------------------------------------------- */
  --border-width:        1px;
  --border-width-strong: 2px;
  --border-default:      var(--border-width) solid var(--color-border);
  --border-strong:       var(--border-width) solid var(--color-border-strong);

  /* -------- Shadows (soft, restrained) -------------------------------- */
  --shadow-xs: 0 1px 2px rgba(31, 26, 20, 0.05);
  --shadow-sm: 0 1px 3px rgba(31, 26, 20, 0.06), 0 1px 2px rgba(31, 26, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(31, 26, 20, 0.08);
  --shadow-lg: 0 10px 24px rgba(31, 26, 20, 0.10);
  --shadow-focus: 0 0 0 3px rgba(180, 83, 31, 0.28); /* primary @ 28% */

  /* -------- Focus ring ------------------------------------------------ */
  --focus-ring:        var(--shadow-focus);
  --focus-ring-danger: 0 0 0 3px rgba(178, 58, 46, 0.30);

  /* -------- Sizing: tap targets & controls ---------------------------- */
  --tap-min:        44px;   /* WCAG-friendly minimum                     */
  --control-h-sm:   36px;
  --control-h-md:   44px;   /* default                                   */
  --control-h-lg:   52px;

  /* -------- Layout ---------------------------------------------------- */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --page-gutter:   var(--space-4);          /* mobile                     */
  --page-gutter-md: var(--space-6);         /* tablet+                    */

  /* -------- Z-index --------------------------------------------------- */
  --z-nav:      40;
  --z-sticky:   50;
  --z-overlay:  70;
  --z-modal:    80;
  --z-toast:    90;

  /* -------- Motion ---------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-med:  200ms;
  --duration-slow: 320ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-med:  0ms;
    --duration-slow: 0ms;
  }
}