/* ==========================================================================
   KEMU — Design Tokens
   Fonte da verdade para cores, tipografia, espaçamento, raios e sombras.
   Extraído dos mockups oficiais (roxo #6C4CE0 + branco, cards arredondados).
   ========================================================================== */

:root {
  /* ---- Marca ---- */
  --brand-50:  #F4F1FF;
  --brand-100: #EAE4FF;
  --brand-200: #D6C9FF;
  --brand-300: #B9A3FB;
  --brand-400: #9878F5;
  --brand-500: #7C5CFA;
  --brand-600: #6C4CE0;   /* principal */
  --brand-700: #5A3CC4;
  --brand-800: #47309C;
  --brand-900: #35246F;

  --accent-teal:   #2BB8A3;
  --accent-teal-d: #17998A;

  /* ---- Semânticas ---- */
  --success:   #22C55E;
  --success-b: #E8F9EF;
  --warning:   #F59E0B;
  --warning-b: #FEF4E2;
  --danger:    #EF4444;
  --danger-b:  #FEECEC;
  --info:      #3B82F6;
  --info-b:    #E8F1FE;

  --coin:      #F5B301;
  --coin-d:    #D99700;
  --xp:        #7C5CFA;
  --streak:    #FF6B35;

  /* ---- Superfícies (tema claro) ---- */
  --bg:          #F7F6FC;
  --bg-alt:      #F0EEFA;
  --surface:     #FFFFFF;
  --surface-2:   #FBFAFF;
  --surface-3:   #F4F2FD;
  --overlay:     rgba(26, 21, 51, .45);

  /* ---- Texto ---- */
  --text:        #1A1533;
  --text-2:      #56516F;
  --text-3:      #8A85A3;
  --text-inv:    #FFFFFF;

  /* ---- Bordas ---- */
  --border:      #ECEAF5;
  --border-2:    #DFDCEE;
  --ring:        rgba(108, 76, 224, .35);

  /* ---- Matérias (cor + fundo suave) ---- */
  --sub-matematica:   #7C5CFA;  --sub-matematica-b:   #F1EDFF;
  --sub-portugues:    #F97316;  --sub-portugues-b:    #FFF1E6;
  --sub-historia:     #14B8A6;  --sub-historia-b:     #E4F8F5;
  --sub-geografia:    #3B82F6;  --sub-geografia-b:    --sub-geografia-b;
  --sub-ciencias:     #8B5CF6;  --sub-ciencias-b:     #F2ECFF;
  --sub-fisica:       #2563EB;  --sub-fisica-b:       #E7EFFE;
  --sub-quimica:      #EA580C;  --sub-quimica-b:      #FFEDE3;
  --sub-biologia:     #22C55E;  --sub-biologia-b:     #E7F9EE;
  --sub-ingles:       #EC4899;  --sub-ingles-b:       #FEEAF3;

  /* ---- Tipografia ---- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-xs:   0.6875rem;  /* 11 */
  --fs-sm:   0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;  /* 15 */
  --fs-md:   1.0625rem;  /* 17 */
  --fs-lg:   1.25rem;    /* 20 */
  --fs-xl:   1.5rem;     /* 24 */
  --fs-2xl:  1.875rem;   /* 30 */
  --fs-3xl:  2.375rem;   /* 38 */
  --fs-4xl:  3rem;       /* 48 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.55;

  /* ---- Espaçamento ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 48px;  --sp-10: 64px; --sp-11: 80px;

  /* ---- Raios ---- */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* ---- Sombras ---- */
  --sh-xs: 0 1px 2px rgba(26, 21, 51, .05);
  --sh-sm: 0 2px 8px rgba(26, 21, 51, .06);
  --sh-md: 0 6px 20px rgba(26, 21, 51, .08);
  --sh-lg: 0 14px 40px rgba(26, 21, 51, .12);
  --sh-brand: 0 8px 24px rgba(108, 76, 224, .28);

  /* ---- Layout ---- */
  --sidebar-w:      248px;
  --sidebar-w-thin: 76px;
  --topbar-h:       68px;
  --tabbar-h:       64px;
  --content-max:    1440px;

  /* ---- Movimento ---- */
  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 220ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 380ms cubic-bezier(.4, 0, .2, 1);
  --t-spring: 460ms cubic-bezier(.34, 1.56, .64, 1);

  /* ---- Z-index ---- */
  --z-sticky: 50;
  --z-sidebar: 60;
  --z-tabbar: 70;
  --z-modal: 100;
  --z-toast: 120;
  --z-fx: 130;
}

/* corrige token que precisa de valor literal */
:root { --sub-geografia-b: #E8F1FE; }

/* ==========================================================================
   Tema escuro
   ========================================================================== */
[data-theme="dark"] {
  --bg:        #12101E;
  --bg-alt:    #0D0B17;
  --surface:   #1B1830;
  --surface-2: #221E3B;
  --surface-3: #2A2547;
  --overlay:   rgba(0, 0, 0, .6);

  --text:   #F3F1FB;
  --text-2: #B4AFCE;
  --text-3: #837DA3;

  --border:   #2C2748;
  --border-2: #393265;

  --brand-50:  #221E3B;
  --brand-100: #2A2450;

  --success-b: #14301F;
  --warning-b: #33260C;
  --danger-b:  #38191B;
  --info-b:    #14243F;

  --sub-matematica-b: #241E44;
  --sub-portugues-b:  #3A2413;
  --sub-historia-b:   #10312D;
  --sub-geografia-b:  #14243F;
  --sub-ciencias-b:   #261C46;
  --sub-fisica-b:     #12203F;
  --sub-quimica-b:    #3A2010;
  --sub-biologia-b:   #12301E;
  --sub-ingles-b:     #3A1428;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --sh-sm: 0 2px 8px rgba(0, 0, 0, .35);
  --sh-md: 0 6px 20px rgba(0, 0, 0, .4);
  --sh-lg: 0 14px 40px rgba(0, 0, 0, .5);
}

/* ==========================================================================
   Preferências de movimento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-spring: 1ms;
  }
}
[data-motion="reduced"] {
  --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-spring: 1ms;
}