/*
 * FILE: public/css/tokens.css
 * PURPOSE:
 * - Shared design tokens for public, internal, and certificate surfaces.
 * - Component CSS may keep local aliases, but canonical values live here.
 */

:root {
  /* Brand and dark public theme */
  --vhq-navy-900: #050d1a;
  --vhq-navy-800: #0a1628;
  --vhq-navy-700: #0f2040;
  --vhq-navy-600: #162d58;
  --vhq-section-900: #06111e;
  --vhq-section-800: #071321;
  --vhq-section-700: #081628;
  --vhq-section-600: #091a2d;
  --vhq-ice: #5bb8ff;
  --vhq-ice-dim: #2f7ab8;

  /* Light corporate theme */
  --vhq-bg: #f5f7fa;
  --vhq-bg-muted: #eef1f6;
  --vhq-bg-subtle: #f3f4f6;
  --vhq-surface: #ffffff;
  --vhq-surface-muted: #f8fafc;
  --vhq-border: #e5e7eb;
  --vhq-border-soft: #e2e8f0;
  --vhq-ink: #0f172a;
  --vhq-ink-soft: #374151;
  --vhq-muted: #64748b;
  --vhq-muted-2: #4b5563;

  /* Semantic accents */
  --vhq-blue: #1a5fbf;
  --vhq-blue-bootstrap: #1b6ec2;
  --vhq-blue-dark: #144d9e;
  --vhq-blue-link: #1d4ed8;
  --vhq-blue-link-hover: #1e40af;
  --vhq-green: #1a8a4a;
  --vhq-green-dark: #146e3b;
  --vhq-save-green: #1a7a42;
  --vhq-success: #45c79a;
  --vhq-warning: #d8a858;
  --vhq-danger: #e16455;
  --vhq-red: #cc2f2f;
  --vhq-info: #6aa7e8;

  /* Certificate / maritime dark surface */
  --vhq-sail-bg: #030405;
  --vhq-sail-bg-2: #080a0d;
  --vhq-sail-panel: #101620;
  --vhq-sail-panel-soft: #151d2a;
  --vhq-sail-text: #f8fafc;
  --vhq-sail-muted: #a7b3c6;
  --vhq-sail-border: rgba(255, 255, 255, 0.1);
  --vhq-sail-gold: #d8a858;

  /* Alpha tokens */
  --vhq-white: #ffffff;
  --vhq-white-70: rgba(255, 255, 255, 0.7);
  --vhq-white-40: rgba(255, 255, 255, 0.4);
  --vhq-white-10: rgba(255, 255, 255, 0.08);
  --vhq-dark-border: rgba(255, 255, 255, 0.1);
  --vhq-ink-border: rgba(15, 23, 42, 0.12);
  --vhq-ink-shadow: rgba(15, 23, 42, 0.18);

  /* Radius, shadow, motion */
  --vhq-radius-xs: 8px;
  --vhq-radius-sm: 10px;
  --vhq-radius-md: 12px;
  --vhq-radius-lg: 16px;
  --vhq-radius-xl: 22px;
  --vhq-radius-pill: 9999px;
  --vhq-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --vhq-shadow-md: 0 4px 16px rgba(15, 25, 35, 0.1), 0 2px 6px rgba(15, 25, 35, 0.06);
  --vhq-shadow-lg: 0 10px 36px rgba(15, 25, 35, 0.12), 0 4px 12px rgba(15, 25, 35, 0.07);
  --vhq-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --vhq-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --vhq-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --vhq-tap-target: 44px;
}