/*
 * Gradex brand palette and type tokens.
 * This file is the source of truth. site/assets/css/tokens.css is an exact copy
 * (a test checks they match), so edit here and copy across.
 *
 * Contrast notes are WCAG 2.x ratios. Tones marked "decorative" fail 4.5:1 as
 * text and must never carry words.
 */
:root {
  /* Core: violet is the company colour. Use it once per screen. */
  --gx-violet-50: #F2F0FC;   /* quiet tint behind violet text (violet-700: 6.7:1) */
  --gx-violet-100: #E6E1FA;  /* lavender: the mark's tile, tint blocks, selected states */
  --gx-violet-200: #CBC2F6;  /* decorative: borders on lavender, illustration */
  --gx-violet-300: #A99BF0;  /* accent on night (6.8:1); decorative on light grounds */
  --gx-violet-400: #8C80CC;  /* decorative: the spark on lavender marks */
  --gx-violet-600: #6A5FAB;  /* brand violet: primary buttons, links (5.5:1 with white) */
  --gx-violet-700: #564C8E;  /* hover, and text on violet-100 (5.9:1) */
  --gx-ink: #2A2547;         /* headlines and body text (13.4:1 on mist) */
  --gx-night: #1F1C33;       /* dark bands, footer */
  --gx-mist: #F7F6FB;        /* page ground: a cool, faintly lilac white */
  --gx-white: #FFFFFF;       /* cards on mist */
  --gx-line: #E4E1EE;        /* hairlines; decorative only */
  --gx-muted: #625E78;       /* secondary text (5.8:1 on mist, 6.2:1 on white) */

  /* Honey: Enrol and platform tools */
  --gx-honey-50: #F7EFDC;
  --gx-honey-100: #EFDFB8;
  --gx-honey-300: #D4B375;   /* accent on night only */
  --gx-honey-500: #A8823F;   /* decorative */
  --gx-honey-700: #7C5A1E;   /* text on honey-100 (4.8:1) and honey-50 (5.5:1) */
  --gx-honey-900: #3A2B10;

  /* Sage: Hire (teachers and HR) */
  --gx-sage-50: #EEF4EF;
  --gx-sage-100: #DCEADF;
  --gx-sage-300: #9FC8AF;    /* accent on night only */
  --gx-sage-500: #6F9C83;    /* decorative */
  --gx-sage-700: #3D6650;    /* text on sage-100 (5.3:1) */
  --gx-sage-900: #1F3329;

  /* Clay: custom builds */
  --gx-clay-50: #FAEEE8;
  --gx-clay-100: #F5DCD2;
  --gx-clay-300: #E3A08C;    /* accent on night only */
  --gx-clay-500: #CC7A63;    /* decorative */
  --gx-clay-700: #9C4634;    /* text on clay-100 (4.8:1) */
  --gx-clay-900: #3D1E17;

  /* Status reuses the family tones. Always pair with a word or icon. */
  --gx-success: var(--gx-sage-700);
  --gx-success-bg: var(--gx-sage-100);
  --gx-warning: var(--gx-honey-700);
  --gx-warning-bg: var(--gx-honey-100);
  --gx-danger: var(--gx-clay-700);
  --gx-danger-bg: var(--gx-clay-100);
  --gx-info: var(--gx-violet-700);
  --gx-info-bg: var(--gx-violet-100);

  /* Type */
  --gx-font: "Figtree", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --gx-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Shape */
  --gx-radius-sm: 8px;
  --gx-radius-md: 12px;
  --gx-radius-lg: 24px;
  --gx-radius-mark: 25%;     /* the logo tile; also crops photos and screenshots */
  --gx-radius-pill: 999px;
}