/* ==========================================================================
   Students Scheduler — Design Tokens
   Plain CSS custom properties. Import once at the root of your app:
       @import "./tokens.css";
   Then reference with var(--token-name).
   These are the single source of truth for the redesign. The prototype HTML
   uses inline styles for fast live-preview only — rebuild with these tokens.
   ========================================================================== */

:root {
  /* ---- Brand / accent (cool palette) ------------------------------------ */
  --teal-700: #266B64;   /* pressed / deep */
  --teal-600: #2F7E76;   /* PRIMARY brand accent: buttons, active nav, links */
  --teal-500: #46A89B;   /* gradient partner, hovers */
  --teal-tint:#EAF2F0;   /* avatar / icon chip background */
  --teal-bg:  #EEF4F2;   /* app canvas background */

  /* ---- Neutrals (cool-toned) -------------------------------------------- */
  --ink:        #1F2D2B; /* primary text, headings */
  --ink-soft:   #213230; /* large display headings */
  --grey-600:   #6E817D; /* body secondary */
  --grey-500:   #8DA09C; /* labels, meta, captions */
  --grey-400:   #A6B6B2; /* placeholder text */
  --line:       #F1F6F4; /* row dividers */
  --line-200:   #EAF1EF; /* table header divider */
  --surface:    #FFFFFF; /* cards, panels */
  --field-bg:   #F4F8F7; /* input fill */
  --field-border:#DCE8E5;/* input border */
  --rail-icon-off:#9FB2AE;/* inactive rail icon stroke */

  /* ---- Semantic --------------------------------------------------------- */
  --success:    #3E9A6B; /* positive balance, "Done", public */
  --success-bg: #E4F3E9;
  --danger:     #C2697A; /* negative balance, delete, destructive */
  --danger-bg:  #F6E2E6;
  --info-bg:    #EFF4FB; /* info callouts */
  --info-text:  #5A6D8C; /* info text, method pills */
  --lavender:   #6A5DAE; /* secondary accent (e.g. Open homework) */
  --lavender-bg:#F1ECFA;

  /* ---- Lesson colour-coding (chip backgrounds + matching accent text) ----
     Each lesson/booking carries one hue. bg = chip fill, accent = its text. */
  --lesson-teal-bg:#C7E5E0;   --lesson-teal-accent:#2F7E76;
  --lesson-lavender-bg:#E0DAF3; --lesson-lavender-accent:#6A5DAE;
  --lesson-mint-bg:#CFEDDA;   --lesson-mint-accent:#3E9A6B;
  --lesson-blush-bg:#F4D6DC;  --lesson-blush-accent:#C2697A;
  --lesson-peri-bg:#D0D8EC;   --lesson-peri-accent:#5566A8;
  /* Full picker row (10 friendly pastels), used in the booking colour picker: */
  --swatch-1:#FBBBDA; --swatch-2:#99A9BF; --swatch-3:#99BF9A; --swatch-4:#BDBF99;
  --swatch-5:#CECECE; --swatch-6:#E8A6C2; --swatch-7:#C0E4F6; --swatch-8:#C1FBA4;
  --swatch-9:#E6BC87; --swatch-10:#E8CFF8;

  /* ---- Parent portal (warm, deliberately distinct identity) ------------- */
  --parent-bg:     #F3F0EA;
  --parent-ink:    #3A2E22;
  --parent-meta:   #9A8B76;
  --parent-accent: #E0853C; /* apricot */
  --parent-accent-2:#E8A766;
  --parent-line:   #F2EDE3;

  /* ---- Typography -------------------------------------------------------
     Single family. Plus Jakarta Sans (Google Fonts). Tabular numerals on
     all times / money / dates (font-variant-numeric: tabular-nums). */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --text-xs:  11px;  /* eyebrow labels, pills, meta */
  --text-sm:  12px;  /* secondary meta */
  --text-base:13px;  /* body small / table cells */
  --text-md:  14px;  /* body, field text, row names */
  --text-lg:  15px;  /* emphasised row / list title */
  --text-xl:  17px;  /* card section headings */
  --text-2xl: 19px;  /* card titles */
  --text-3xl: 22px;  /* screen titles */
  --text-4xl: 24px;  /* page hero (login, dashboard sub) */
  --text-5xl: 29px;  /* dashboard greeting */
  --text-6xl: 31px;  /* "up next" name */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extrabold:800; /* headings, screen titles, hero numbers */

  --tracking-tight: -0.01em; /* large headings */
  --tracking-label: 0.05em;  /* uppercase table headers */
  --tracking-eyebrow:0.16em; /* "UP NEXT", "DURATION" eyebrows */

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 22px;
  --space-7: 26px;
  --space-8: 30px;
  --space-9: 32px;

  /* ---- Radius ----------------------------------------------------------- */
  --radius-sm: 8px;   /* time pills, small chips */
  --radius-md: 12px;  /* inputs, buttons, list cards */
  --radius-lg: 14px;  /* lesson chips, primary buttons */
  --radius-xl: 16px;  /* day cards */
  --radius-2xl:20px;  /* list panels */
  --radius-3xl:24px;  /* dashboard cards, modal */
  --radius-pill:999px;/* nav pills, badges, swatch rings */

  /* ---- Shadows ---------------------------------------------------------- */
  --shadow-card:  0 2px 16px rgba(31,45,43,.05);  /* dashboard/detail cards */
  --shadow-row:   0 2px 12px rgba(31,45,43,.05);  /* list panels */
  --shadow-chip:  0 1px 3px rgba(31,45,43,.10);   /* week-nav buttons */
  --shadow-btn:   0 10px 22px rgba(47,126,118,.30);/* primary button */
  --shadow-btn-sm:0 8px 18px rgba(47,126,118,.24); /* compact primary button */
  --shadow-hero:  0 14px 30px rgba(46,119,111,.22);/* "up next" hero */
  --shadow-modal: 0 30px 70px rgba(0,0,0,.30);     /* modal / auth cards */

  /* ---- Layout ----------------------------------------------------------- */
  --rail-width: 90px;   /* staff side rail */
  --app-max:    1280px; /* app shell max width */
}