/* ============================================================
   Genesis Education Solutions — Color Tokens
   ============================================================ */

:root {
  /* ── Brand Palette ──────────────────────────────────────── */

  /* Teal — primary action, brand identity */
  --color-teal-50:  #3BC0D5;
  --color-teal-100: #c3e9e9;
  --color-teal-200: #8dd4d4;
  --color-teal-300: #55bfbf;
  --color-teal-400: #2eacac;
  --color-teal-500: #0F6B66; /* brand primary — Stormy Teal */
  --color-teal-600: #147a7a;
  --color-teal-700: #0f5d5d;
  --color-teal-800: #093f3f;
  --color-teal-900: #042020;

  /* Cyan — accent, highlights, CTA text */
  --color-cyan-50:  #e7f8fc;
  --color-cyan-100: #c0eff8;
  --color-cyan-200: #84e1f1;
  --color-cyan-300: #4dd2ea;
  --color-cyan-400: #32c8e1; /* brand accent */
  --color-cyan-500: #1baabd;
  --color-cyan-600: #138999;
  --color-cyan-700: #0d6875;
  --color-cyan-800: #074751;
  --color-cyan-900: #02272d;

  /* Coral — secondary, alerts, warmth */
  --color-coral-50:  #fef1ed;
  --color-coral-100: #fcd9d1;
  --color-coral-200: #f8b3a4;
  --color-coral-300: #f28d77;
  --color-coral-400: #ec7560;
  --color-coral-500: #e8664a; /* brand secondary */
  --color-coral-600: #c44f38;
  --color-coral-700: #9e3c2a;
  --color-coral-800: #78291c;
  --color-coral-900: #52170e;

  /* Charcoal — text, dark elements */
  --color-charcoal-50:  #f5f5f5;
  --color-charcoal-100: #e8e8e8;
  --color-charcoal-200: #d0d0d0;
  --color-charcoal-300: #b0b0b0;
  --color-charcoal-400: #888888;
  --color-charcoal-500: #646464;
  --color-charcoal-600: #484848;
  --color-charcoal-700: #323232; /* brand charcoal */
  --color-charcoal-800: #1e1e1e;
  --color-charcoal-900: #0a0a0a;

  /* Neutral grays */
  --color-gray-0:   #ffffff;
  --color-gray-50:  #f8f9fa;
  --color-gray-100: #f1f3f5;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #868e96;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;

  /* ── Semantic Aliases ───────────────────────────────────── */

  /* Foreground */
  --fg-1: var(--color-charcoal-700);       /* primary text */
  --fg-2: var(--color-gray-700);           /* secondary text */
  --fg-3: var(--color-gray-600);           /* muted / captions */
  --fg-disabled: var(--color-gray-400);    /* disabled state */
  --fg-on-brand: #ffffff;                  /* text on brand color */
  --fg-link: var(--color-teal-500);        /* links */
  --fg-link-hover: var(--color-teal-600);

  /* Background */
  --bg-primary: #ffffff;
  --bg-secondary: var(--color-gray-50);
  --bg-tertiary: var(--color-gray-100);
  --bg-brand: var(--color-teal-500);
  --bg-brand-subtle: var(--color-teal-50);
  --bg-accent: var(--color-cyan-400);
  --bg-accent-subtle: var(--color-cyan-50);
  --bg-coral: var(--color-coral-500);
  --bg-coral-subtle: var(--color-coral-50);

  /* Border */
  --border-default: var(--color-gray-200);
  --border-subtle: var(--color-gray-100);
  --border-strong: var(--color-gray-400);
  --border-brand: var(--color-teal-500);
  --border-focus: var(--color-teal-400);

  /* Status */
  --color-success: #1e9e6e;
  --color-success-bg: #e8f7f1;
  --color-warning: #d9840d;
  --color-warning-bg: #fef4e6;
  --color-error: #d63c3c;
  --color-error-bg: #fef0f0;
  --color-info: var(--color-cyan-500);
  --color-info-bg: var(--color-cyan-50);
}