/* FluencyOS design tokens -------------------------------------------------- */

:root {
  /* Brand ---------------------------------------------------------------- */
  --purple-50:  #F3F1FE;
  --purple-100: #EAE6FD;
  --purple-200: #D9D2FB;
  --purple-300: #BCAFF7;
  --purple-400: #8C77EE;
  --purple-500: #6D57E8;
  --purple-600: #5B48E0;
  --purple-700: #4A3ABE;
  --purple-800: #372B8E;

  /* Skill accents (grammar = purple, vocabulary = green,
     writing / adaptive = amber, reading = blue) -------------------------- */
  --green-50:  #ECFDF3;
  --green-100: #D6F5E3;
  --green-500: #16A34A;
  --green-600: #128A3E;

  --amber-50:  #FFF8EB;
  --amber-100: #FDEFD0;
  --amber-500: #E08C0B;
  --amber-600: #B8720A;

  --blue-50:  #EEF5FF;
  --blue-100: #DCE9FE;
  --blue-500: #2F6FED;
  --blue-600: #2258C8;
  --teal-50:  #EBFAF7;
  --teal-100: #CDF0E9;
  --teal-500: #0F9C8C;
  --teal-600: #0B7F72;
  --teal-700: #096A5F;

  --red-50:  #FEF1F1;
  --red-100: #FDE0E0;
  --red-500: #DC2626;
  --red-600: #B81D1D;

  /* Neutrals ------------------------------------------------------------- */
  --ink-900: #171438;
  --ink-800: #211D4A;
  --ink-700: #2B2758;
  --ink-500: #5C5880;
  --ink-400: #7C789A;
  --ink-300: #A5A2BC;
  --ink-200: #D8D6E6;
  --ink-100: #ECEAF4;
  --ink-50:  #F5F4FA;
  --white: #FFFFFF;

  /* Wordmark navy, taken from the logo */
  --brand-ink: #101B3D;

  /* Surfaces ------------------------------------------------------------- */
  --bg-app: #F6F5FC;
  --bg-app-accent: radial-gradient(1100px 620px at 12% -10%, #EFEBFF 0%, rgba(239,235,255,0) 60%),
                   radial-gradient(900px 520px at 100% 0%, #F0ECFF 0%, rgba(240,236,255,0) 55%);
  --surface: #FFFFFF;
  --surface-sunken: #FAF9FE;
  --border: #ECEAF4;
  --border-strong: #DEDBEC;

  /* Typography ----------------------------------------------------------- */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* El logotipo: geometrica y compacta, como en la imagen original. */
  --font-brand: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-base: 0.9375rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.125rem;

  /* Radii & shadows ------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  --shadow-xs: 0 1px 2px rgba(23, 20, 56, .05);
  --shadow-sm: 0 2px 8px rgba(23, 20, 56, .05);
  --shadow-md: 0 6px 22px rgba(23, 20, 56, .07);
  --shadow-lg: 0 18px 44px rgba(23, 20, 56, .12);
  --shadow-brand: 0 10px 24px rgba(91, 72, 224, .28);

  /* Layout --------------------------------------------------------------- */
  --sidebar-w: 240px;
  --page-max: 1320px;
  --gap: 20px;
  --pad-page: 32px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* Accent helpers: any element can set --accent-* through a modifier class. */
.accent-grammar    { --accent: var(--purple-600); --accent-soft: var(--purple-50);  --accent-line: var(--purple-200); }
.accent-vocabulary { --accent: var(--green-600);  --accent-soft: var(--green-50);   --accent-line: var(--green-100); }
.accent-writing    { --accent: var(--amber-600);  --accent-soft: var(--amber-50);   --accent-line: var(--amber-100); }
.accent-reading    { --accent: var(--blue-600);   --accent-soft: var(--blue-50);    --accent-line: var(--blue-100); }
.accent-listening  { --accent: var(--teal-600);   --accent-soft: var(--teal-50);    --accent-line: var(--teal-100); }
.accent-adaptive   { --accent: var(--amber-600);  --accent-soft: var(--amber-50);   --accent-line: var(--amber-100); }
.accent-neutral    { --accent: var(--ink-500);    --accent-soft: var(--ink-50);     --accent-line: var(--ink-100); }