/*
 * Brand tokens — the one place the company's colours and surfaces are decided.
 *
 * WHY THIS FILE EXISTS
 * The Helpdesk portal first shipped in the Billing system's indigo, then had
 * to be redone in the website's slate-and-cyan, because a customer arrives at
 * the portal from the website and the jump was jarring. The fix was not the
 * new colours; it was that the colours were written out twice, so the two
 * drifted apart the moment one of them changed.
 *
 * The website is going to be redesigned. When it is, change the values in
 * this file and the portal follows with no code change at all. Nothing else
 * should contain a colour.
 *
 * WHO READS IT
 *   css/style.css            the marketing pages
 *   support/includes/layout.php   the Helpdesk portal
 *
 * HOW FAR IT REACHES
 * The marketing pages are drawn with Tailwind utility classes. Those used to
 * carry colours frozen into the built stylesheet, so changing this file moved
 * the page background and nothing else - the navigation and the buttons
 * stayed as they were. tailwind.config.js now maps the brand names
 * (slate-900/800, cyan-300/400/500/600, gray-300/400) onto the channel
 * tokens below, so `bg-cyan-500` and `text-gray-300` in index.html follow
 * this file too.
 *
 * Still NOT covered: Tailwind colours that are not brand decisions and are
 * used for one-off details - gray-700/800/900, blue-900, white/black. A
 * redesign touching those changes index.html. Everything that defines how the
 * company looks is here.
 *
 * ACCESSIBILITY — please keep these true after a redesign
 * Measured contrast against --surface, and the minimum WCAG AA asks for:
 *   --text        on --surface   12.1:1   (needs 4.5:1)
 *   --text-muted  on --surface    7.0:1   (needs 4.5:1)
 *   --on-accent   on --accent     9.9:1   (needs 4.5:1)
 * The last one is why --on-accent is dark and not white. White on the current
 * cyan measures 2.43:1, which fails, and is recorded as an open defect in
 * docs/system-analysis.md under WWW-10. Do not reintroduce it here.
 */

:root {
  /*
   * Channels, not colours, for the ones Tailwind uses.
   *
   * The marketing pages are drawn with Tailwind utility classes, and several
   * of them apply an opacity - bg-slate-900/30, bg-cyan-500/20,
   * border-white/10. Tailwind can only do that if the colour is given as bare
   * channels it can put an alpha into, so these exist alongside the hex
   * values below. tailwind.config.js maps its slate/cyan/gray names onto
   * them, which is what makes a utility class in index.html follow this file
   * instead of a colour frozen into the built stylesheet.
   *
   * KEEP THESE TWO BLOCKS IN STEP. The hex value and its -rgb twin are the
   * same colour written twice because CSS cannot derive one from the other.
   */
  --surface-rgb:        15 23 42;
  --surface-raised-rgb: 30 41 59;
  /*
   * The accent has four steps because the marketing pages use four, and they
   * are NOT interchangeable. Collapsing cyan-500 onto cyan-400 would brighten
   * every button on the site and push the white text on them from 2.43:1 to
   * 1.81:1 - worse, not better. Each step keeps its own token so the pages
   * look exactly as they do now.
   */
  --accent-rgb:         34 211 238;          /* cyan-400, links and marks    */
  --accent-strong-rgb:  6 182 212;           /* cyan-500, the site's buttons */
  --accent-hover-rgb:   103 232 249;         /* cyan-300                     */
  --accent-deep-rgb:    8 145 178;           /* cyan-600                     */
  --text-rgb:           209 213 219;
  --text-muted-rgb:     156 163 175;
  --text-strong-rgb:    248 250 252;

  /* ---- surfaces -------------------------------------------------------- */
  --surface:        #0f172a;                 /* Tailwind slate-900           */
  --surface-raised: #1e293b;                 /* slate-800                    */

  /* The hero's wash. Gives a translucent card something to sit on; on a flat
     surface a 40%-opacity card is invisible. */
  --surface-wash:
      radial-gradient(at 15% 0%,   rgba(8,145,178,.28) 0, transparent 45%),
      radial-gradient(at 85% 10%,  rgba(30,64,175,.26) 0, transparent 42%),
      radial-gradient(at 50% 100%, rgba(14,116,144,.20) 0, transparent 50%);

  /* ---- text ------------------------------------------------------------ */
  --text:        #d1d5db;                    /* text-gray-300                */
  --text-strong: #f8fafc;                    /* slate-50                     */
  --text-muted:  #9ca3af;                    /* text-gray-400                */

  /* ---- accent ---------------------------------------------------------- */
  --accent:       #22d3ee;                   /* cyan-400, the site's accent  */
  --accent-hover: #67e8f9;                   /* cyan-300                     */
  /* Text drawn ON the accent. Dark on purpose - see the note above. */
  --on-accent:    #0f172a;

  /* ---- lines and glass ------------------------------------------------- */
  --line:        rgba(255,255,255,.10);      /* border-white/10              */
  --line-strong: rgba(255,255,255,.18);
  --glass:       rgba(15,23,42,.40);         /* .glassmorphism on the site   */
  --glass-blur:  blur(10px);
  --field:       rgba(15,23,42,.65);         /* form inputs                  */

  /* ---- states ---------------------------------------------------------- */
  --danger:        #fca5a5;
  --danger-bg:     rgba(127,29,29,.35);
  --danger-line:   rgba(248,113,113,.35);
  --ok:            #6ee7b7;
  --ok-bg:         rgba(6,78,59,.35);
  --ok-line:       rgba(52,211,153,.35);

  /* ---- shape ----------------------------------------------------------- */
  --radius:     14px;
  --radius-sm:  8px;
  --shadow:     0 8px 32px rgba(0,0,0,.35);

  /* ---- type ------------------------------------------------------------ */
  /* Google Sans covers Thai as well as Latin, so it is what actually
     appears; Sarabun stands behind it. Both are self-hosted - see fonts.css.
     14px/1.6 is what the Billing system uses, so all three systems read as
     one product. */
  --font:      'Google Sans', 'Sarabun', sans-serif;
  --font-size: 16px;
  --line-height: 1.6;
}