/*
 * GlenMark Storage — DESIGN TOKENS (addendum #8: one interface, all surfaces)
 * ============================================================================
 * Single source of truth for the shared design system across ALL public
 * surfaces: funnel (/spa-preview/ + /spa-preview/rates/), /sign/<token>,
 * /pwa/ tenant app, admin. Every surface imports this file and consumes ONLY
 * the variables below for brand color, ink/muted text, surfaces, borders,
 * radii, shadows, type scale, and focus rings.
 *
 * Canonical values (ratified from the funnel design, the most-recently
 * Russ-reviewed surface):
 *   brand red #B91C1C / dark #991B1B (the PWA legacy #C41E3A retires to an
 *   alias so nothing breaks before the PWA reskin lands).
 *
 * Contract: pages may keep their own layout rules, but brand/semantic colors,
 * radii, and font stack MUST come from here. Guarded by
 * api/scripts/test-design-tokens.mjs (local + live).
 *
 * Deployment: static file. Served from /spa-preview/ (funnel webroot) and
 * copied for /sign/ + /pwa/ on their next deploys. No build step.
 */

:root {
  /* ---- Brand ---- */
  --brand-red: #B91C1C;        /* primary brand red (funnel canonical) */
  --brand-dark: #991B1B;       /* hover / pressed */
  --brand-tint: #FEE2E2;       /* light red wash (hero gradient, selected rails) */
  --brand-tint-2: #FEF2F2;     /* fainter wash (error bg, selected rail bg) */

  /* Legacy PWA aliases — retire when pwa/style.css is reskinned (addendum 8
     phase 2). Both old PWA variable names resolve to canonical values. */
  --accent-red: var(--brand-red);
  --accent-red-dark: var(--brand-dark);

  /* ---- Ink / text ---- */
  --ink: #1F2937;              /* primary text on light surfaces */
  --muted: #6B7280;            /* secondary text */

  /* ---- Surfaces & lines ---- */
  --bg: #FFFFFF;               /* page background (light surfaces) */
  --bg-page: #F3F4F6;          /* light page canvas where cards float on gray (sign) */
  --panel: #F9FAFB;            /* card / panel background */
  --line: #E5E7EB;             /* borders, dividers */

  /* ---- Semantic ---- */
  --good: #047857;             /* success / available */
  --warn: #B45309;             /* caution */
  --error: #DC3545;            /* destructive / error text (PWA legacy value kept) */
  --error-bg: #FEF2F2;         /* error panel background */
  --error-line: #FECACA;       /* error panel border */

  /* ---- PWA dark-surface aliases (the tenant app still renders dark; these
     keep ONE brand red across light and dark surfaces until phase 2) ---- */
  --bg-dark: #1A1A2E;
  --bg-card: #252541;
  --bg-card-hover: #2D2D4A;   /* secondary-button hover on dark surfaces */
  --text-primary: #FFFFFF;
  --text-secondary: #B0B0C8;
  --border-color: #3A3A54;
  --good-bright: #66BB6A;     /* success text on dark surfaces (AA on --bg-card) */
  --warn-bright: #F0B35C;     /* caution text on dark surfaces (AA on --bg-card) */

  /* ---- Shape ---- */
  --radius: 12px;              /* cards */
  --radius-btn: 8px;           /* buttons, inputs */
  --radius-pill: 999px;        /* tabs, chips */

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 6px rgba(185, 28, 28, .18);  /* hover lift on cards */

  /* ---- Type ---- */
  --font: system-ui, -apple-system, sans-serif;
  --fs-body: 16px;
  --fs-small: 13px;

  /* ---- Focus ---- */
  --focus-ring: 2px solid var(--brand-red);
}

/* Shared primitives — components that must look IDENTICAL on every surface.
   Pages may override size/padding locally but not the brand look. */
.gm-btn {
  display: inline-block;
  background: var(--brand-red);
  color: #fff;
  border-radius: var(--radius-btn);
  padding: 10px 18px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-family: inherit;
}
.gm-btn:hover { background: var(--brand-dark); }
.gm-btn:disabled { opacity: .5; cursor: not-allowed; }
.gm-btn.ghost {
  background: transparent;
  color: var(--brand-red);
  border: 2px solid var(--brand-red);
}
.gm-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.gm-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
}
.gm-input:focus { outline: var(--focus-ring); outline-offset: -1px; }