/**
 * @file theme.css
 * @description Shared --pl-* tokens for colour, type, radius, shadow and
 *   spacing. Tokens only: no selectors other than :root, no layout. Feature
 *   stylesheets read them with var(--pl-...).
 *
 *   base.html loads this for every page that extends it. Standalone documents
 *   (auth_page.html, the sitemanager/password_reset_*.html pages and the two
 *   policy modal fragments) link it themselves before their own styles.
 *
 *   Brand and neutral tokens hold the hex values the older stylesheets
 *   hard-code. The interactive-state and status tokens point at them with
 *   var(). Keep the text tokens dark enough to read on white; accent is for
 *   borders, large text and the button gradient only.
 *
 * @author Murtaza Lightwala
 * @since 26 Oct 2026
 *
 * Edit log:
 *   26 Oct 2026 - Created with colour, type, radius, shadow and spacing tokens.
 *   30 Oct 2026 - Load from base.html. Add brand, neutral, state, status,
 *     radius, type size and shadow tokens.
 *   31 Oct 2026 - Link from the standalone pages.
 */
:root {
  --pl-font-family: "DM Sans", Arial, sans-serif;

  /* Brand */
  --pl-color-primary: #067577;
  --pl-color-primary-dark: #044c4e;
  --pl-color-accent: #1d9097;
  --pl-color-navy: #0f395c;
  --pl-color-blue: #1a629e;
  --pl-color-brand-deep: #004d66; /* sign-in page actions */
  --pl-gradient-brand: linear-gradient(270deg, #1d9097 0%, rgba(9, 47, 49, 0.8) 100%);

  /* Text */
  --pl-color-text: #152850;
  --pl-color-text-strong: #222222;
  --pl-color-text-body: #333333;
  --pl-color-text-muted: #334155;
  --pl-color-text-secondary: #555555;
  --pl-color-text-tertiary: #666666;
  --pl-color-text-subtle: #5b6472; /* placeholders and input edges */
  --pl-color-text-inverse: #ffffff;

  /* Surfaces */
  --pl-color-surface: #ffffff;
  --pl-color-surface-alt: #f6fbff;
  --pl-color-surface-muted: #f8f9fa;
  --pl-color-surface-tint: #eef6fc;
  --pl-color-surface-highlight: #dcecf9;
  --pl-color-revision-bg: #e6f4f3;

  /* Borders and dividers (decorative) */
  --pl-color-border: #dcecf9;
  --pl-color-border-strong: #9fccf1;
  --pl-color-border-neutral: #e0e0e0;
  --pl-color-border-light: #dddddd;
  --pl-color-border-cool: #dce0e4;
  --pl-color-divider: #eeeeee;

  /* Interactive states */
  --pl-color-primary-hover: var(--pl-color-primary-dark);
  --pl-color-on-primary: var(--pl-color-text-inverse);
  --pl-color-secondary: var(--pl-color-blue);
  --pl-color-secondary-hover: var(--pl-color-navy);
  --pl-color-on-secondary: var(--pl-color-text-inverse);
  --pl-color-focus-ring: var(--pl-color-navy);
  --pl-focus-ring-width: 3px;
  --pl-focus-ring-offset: 2px;
  --pl-color-disabled-bg: #e0e0e0;
  --pl-color-disabled-text: #555555;

  /* Status: base colour for fills, borders and icons; -text for words; -bg for tints */
  --pl-color-success: #198754;
  --pl-color-success-text: #155724;
  --pl-color-success-bg: #d4edda;
  --pl-color-warning: #856404;
  --pl-color-warning-text: var(--pl-color-warning);
  --pl-color-warning-bg: #fff3cd;
  --pl-color-danger: #dc3545;
  --pl-color-danger-text: #b42318;
  --pl-color-danger-bg: #f8d7da;
  --pl-color-info: #1565c0;
  --pl-color-info-text: var(--pl-color-info);
  --pl-color-info-bg: #d1ecf1;

  /* Type sizes */
  --pl-font-size-xs: 12px;
  --pl-font-size-sm: 14px;
  --pl-font-size-base: 16px;
  --pl-font-size-lg: 18px;
  --pl-font-size-xl: 20px;
  --pl-font-size-2xl: 26px;
  --pl-font-size-3xl: 30px;

  /* Radius */
  --pl-radius: 10px;
  --pl-radius-sm: 6px;
  --pl-radius-md: 8px;
  --pl-radius-button: var(--pl-radius-md);
  --pl-radius-lg: 12px;
  --pl-radius-round: 999px;

  /* Shadows */
  --pl-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  --pl-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --pl-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --pl-shadow-lg: rgba(0, 0, 0, 0.16) 0 10px 36px 0, rgba(0, 0, 0, 0.06) 0 0 0 1px;

  --pl-space-1: 4px;
  --pl-space-2: 8px;
  --pl-space-3: 12px;
  --pl-space-4: 16px;
  --pl-space-5: 24px;
  --pl-space-6: 32px;
}