/* ==========================================================================
   READ VPN Backoffice — Design Tokens (READVPN-DESIGN-SYSTEM.md §2)
   Every colour / size / radius used by the prototype comes from here.
   ========================================================================== */

/* DB Heavent (from assets) — used ONLY inside certificate artwork so it matches the learner site */
@font-face {
  font-family: "DB Heavent";
  src: url("../img/DB%20Heavent%20Original_webfont/DB%20Heavent%20v3.2.1.woff2") format("woff2"),
       url("../img/DB%20Heavent%20Original_webfont/DB%20Heavent%20v3.2.1.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DB Heavent";
  src: url("../img/DB%20Heavent%20Original_webfont/DB%20Heavent%20Med%20v3.2.1.woff2") format("woff2"),
       url("../img/DB%20Heavent%20Original_webfont/DB%20Heavent%20Med%20v3.2.1.woff") format("woff");
  font-weight: 500 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DB Heavent";
  src: url("../img/DB%20Heavent%20Original_webfont/DB%20Heavent%20Bd%20v3.2.1.woff2") format("woff2"),
       url("../img/DB%20Heavent%20Original_webfont/DB%20Heavent%20Bd%20v3.2.1.woff") format("woff");
  font-weight: 700 900; font-style: normal; font-display: swap;
}

:root {
  /* 2.1 Primary — READ VPN Cyan */
  --rv-primary-50: #E8FAFC;
  --rv-primary-100: #C9F3F7;
  --rv-primary-200: #9BE8EF;
  --rv-primary-300: #61DCE7;
  --rv-primary-400: #27CFDE;
  --rv-primary-500: #00C2D6;
  --rv-primary-600: #009CAD;
  --rv-primary-700: #007F8C;
  --rv-primary-800: #006B77;
  --rv-primary-900: #00535E;
  --rv-on-primary: #103238;

  /* 2.2 Neutral */
  --rv-neutral-0: #FFFFFF;
  --rv-neutral-50: #F9FAFB;
  --rv-neutral-100: #F3F4F6;
  --rv-neutral-200: #E5E7EB;
  --rv-neutral-300: #D1D5DB;
  --rv-neutral-400: #9CA3AF;
  --rv-neutral-500: #6B7280;
  --rv-neutral-600: #4B5563;
  --rv-neutral-700: #374151;
  --rv-neutral-800: #1F2937;
  --rv-neutral-900: #111827;

  /* 2.3 Semantic */
  --rv-success: #087F5B;  --rv-success-bg: #EAF8F1;  --rv-success-border: #9DD6BE;
  --rv-warning: #925700;  --rv-warning-bg: #FFF5DC;  --rv-warning-border: #E6CA83;
  --rv-danger: #B42318;   --rv-danger-bg: #FFF0EE;   --rv-danger-border: #E8AAA3;
  --rv-info: #075E94;     --rv-info-bg: #ECF6FF;     --rv-info-border: #A7CEE8;
  --rv-neutral: #4B5563;  --rv-neutral-bg: #F3F4F6;  --rv-neutral-border: #D1D5DB;
  --rv-violet: #5B3CC4;   --rv-violet-bg: #F1EDFD;   --rv-violet-border: #C7B8F2;

  /* 2.4 Surface aliases */
  --rv-page-bg: var(--rv-neutral-0);
  --rv-surface: var(--rv-neutral-0);
  --rv-surface-subtle: var(--rv-neutral-50);
  --rv-surface-secondary: var(--rv-neutral-100);
  --rv-text-primary: var(--rv-neutral-800);
  --rv-text-secondary: var(--rv-neutral-600);
  --rv-text-muted: var(--rv-neutral-500);
  --rv-link: var(--rv-primary-700);
  --rv-link-hover: var(--rv-primary-800);
  --rv-border: var(--rv-neutral-300);
  --rv-divider: var(--rv-neutral-200);
  --rv-card-border: var(--rv-neutral-400);
  --rv-control-border: var(--rv-neutral-500);
  --rv-row-hover: rgba(102, 126, 234, .08);
  --rv-selected-bg: var(--rv-primary-50);
  --rv-focus: var(--rv-primary-700);

  /* 2.5 Typography */
  --rv-font-family: "Noto Sans Thai", "Sukhumvit Set", "Thonburi", "Leelawadee UI", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rv-font-cert: "DB Heavent", "Noto Sans Thai", "Sukhumvit Set", "Thonburi", sans-serif;
  --rv-fs-page-title: 20px;   --rv-lh-page-title: 28px;
  --rv-fs-section: 18px;      --rv-lh-section: 28px;
  --rv-fs-card-title: 16px;   --rv-lh-card-title: 24px;
  --rv-fs-body: 14px;         --rv-lh-body: 22px;
  --rv-fs-small: 12px;        --rv-lh-small: 20px;
  --rv-fs-stat: 24px;         --rv-lh-stat: 32px;
  --rv-fs-stat-sm: 18px;      --rv-lh-stat-sm: 28px;

  /* 2.6 Spacing */
  --rv-space-1: 4px;
  --rv-space-2: 8px;
  --rv-space-3: 12px;
  --rv-space-4: 16px;
  --rv-space-5: 20px;
  --rv-space-6: 24px;
  --rv-space-8: 32px;

  /* 2.7 Radius / Shadow / Motion / Layers */
  --rv-radius-control: 3.2px;
  --rv-radius-card: 3.2px;
  --rv-radius-menu: 8px;
  --rv-radius-overlay: 8px;
  --rv-radius-pill: 9999px;
  --rv-shadow-card: none;
  --rv-shadow-popover: 0 4px 12px rgba(17, 24, 39, .12);
  --rv-shadow-modal: 0 16px 40px rgba(17, 24, 39, .18);
  --rv-motion-fast: 120ms;
  --rv-motion-base: 200ms;
  --rv-motion-easing: cubic-bezier(.4, 0, .2, 1);
  --rv-z-sticky: 10;
  --rv-z-navigation: 20;
  --rv-z-popover: 40;
  --rv-z-backdrop: 50;
  --rv-z-modal: 60;
  --rv-z-toast: 70;
  --rv-z-tooltip: 80;

  /* 3.1 Layout */
  --rv-sidebar-width: 220px;
  --rv-sidebar-collapsed: 48px;
  --rv-secondary-sidebar-width: 282.4px;
  --rv-header-height: 56px;
  --rv-mobile-nav-height: 56px;
  --rv-content-padding-x: 32px;
  --rv-content-padding-y: 16px;
  --rv-content-padding-mobile: 12px;
  --rv-sidebar-tint-cyan: rgba(0, 194, 214, .06);
  --rv-sidebar-tint-pink: rgba(224, 130, 130, .09);

  /* 5.x Controls */
  --rv-control-h: 32px;
  --rv-control-h-md: 40px;
  --rv-touch: 44px;

  /* 6.1 Charts */
  --rv-chart-1: #007F8C;
  --rv-chart-2: #4C78A8;
  --rv-chart-3: #7B61A8;
  --rv-chart-4: #A65F18;
  --rv-chart-5: #B34F70;
  --rv-chart-6: #687782;
  --rv-chart-grid: #E5E7EB;
  --rv-chart-label: #4B5563;
  --rv-chart-prev: #9CA3AF;
}

@media (min-width: 768px) and (max-width: 1199px) {
  :root { --rv-content-padding-x: 24px; }
}
@media (max-width: 767px) {
  :root { --rv-content-padding-x: var(--rv-content-padding-mobile); --rv-content-padding-y: var(--rv-content-padding-mobile); }
}