/* Tutoryx Academy brand tokens: the :root block of tutoryx-web/src/app/tokens.css, verbatim except the two font
   variables (there they come from next/font; here from fonts.css). Shared by the console and data.tutoryx.net. */

:root {
  /* —— Teal scale (primary brand) —— */
  --teal-50:  #ecfdfd;
  --teal-100: #d2f7f9;
  --teal-200: #a6eef2;
  --teal-300: #6fe0e7;
  --teal-400: #34cad4;
  --teal-500: #14b3c2;   /* primary */
  --teal-600: #0f93a1;
  --teal-700: #127481;
  --teal-800: #165d68;
  --teal-900: #174d57;

  /* —— Course / accent colors —— */
  --blue:   #3a72ff;  --blue-soft:   #e6edff;   /* Data */
  --coral:  #ff6a45;  --coral-soft:  #ffe7e0;   /* Robotics */
  /* The brand coral is for shapes and fills; as text, or behind white
     text, it fails WCAG AA (2.84:1). These are the same hue, darkened
     until they pass: 600 behind white text (4.99:1), 700 as text on
     white (5.74:1), cloud (5.32:1) or coral-soft (4.85:1). */
  --coral-600: #c8401f;
  --coral-700: #b83a1c;
  --violet: #7b5cff;  --violet-soft: #ece8ff;   /* Math */
  --green:  #18b67e;  --green-soft:  #d6f5ea;   /* Programming */
  /* Success text: 4.96:1 on cloud, 5.34:1 on white (the old #0e9468
     was 3.57:1 on cloud). */
  --success: #0b7a55;
  --amber:  #ffb020;  --amber-soft:  #fff1d2;   /* English / highlight */
  --sun:    #ffc63d;

  /* —— Category ink: each course colour darkened for text ——
     The brand colours above are for icons, fills and doodles. Text in a
     category's colour (tags, dates, "Learn more" links) and white text on
     a category-coloured button use these, which pass WCAG AA (4.5:1) on
     white, cloud and the colour's own -soft tint:
       blue-700   6.19 white · 5.28 blue-soft
       violet-700 6.06 white · 5.07 violet-soft
       amber-700  5.93 white · 5.30 amber-soft (the old #d98a05 was 2.77)
     Coral and green reuse --coral-700 and --success. */
  --blue-700:   #2856d6;
  --violet-700: #6442e6;
  --amber-700:  #8a5a00;
  /* Hover borders on category cards: decoration, not text. */
  --blue-ring:   #c3d4ff;
  --coral-ring:  #ffc9bb;
  --violet-ring: #d3c7ff;
  --green-ring:  #a8e0c7;
  --amber-ring:  #ffdb9a;

  /* —— Status —— */
  /* Text on an amber-soft warning strip: 6.49:1. */
  --warning-ink: #7a4d02;

  /* —— Neutrals —— */
  --ink:    #0e2f34;   /* deep teal-charcoal, primary text */
  --ink-2:  #36545b;
  --muted:  #5e757c;
  --line:   #e7eded;
  --line-2: #d6e0e1;
  --cloud:  #f3f7f8;
  --cream:  #fbfaf5;   /* warm off-white band */
  --paper:  #ffffff;
  /* The dark button's hover: a step lighter than ink (white on it 10.41:1). */
  --ink-hover: #16464d;

  /* —— Brand semantic —— */
  --brand:        var(--teal-500);
  --brand-deep:   var(--teal-800);
  --brand-ink:    var(--ink);
  --accent:       var(--coral);

  /* —— Type —— */
  --font-display: "Fredoka", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  /* —— Radii —— */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* —— Shadows (teal-tinted, soft) —— */
  --sh-xs: 0 1px 2px rgba(14,47,52,.06);
  --sh-sm: 0 4px 14px rgba(14,47,52,.07);
  --sh-md: 0 12px 30px rgba(14,47,52,.10);
  --sh-lg: 0 24px 60px rgba(14,47,52,.14);
  --sh-teal: 0 16px 40px rgba(20,179,194,.28);
  --sh-coral: 0 16px 40px rgba(255,106,69,.28);

  /* —— Motion —— */
  --dur: 200ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}