/**
 * GateNoc Theme 2 — shared design tokens
 * Reusable by public, merchant, and admin Theme 2 surfaces.
 * Do not import into checkout / payment UI.
 */

/* Global layout baseline — prevents PC/mobile horizontal “zoom out / side swipe”. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
}

:root {
  /* Primary (brand green = success) */
  --gn-primary-50: #F0FDF4;
  --gn-primary-100: #DCFCE7;
  --gn-primary-200: #BBF7D0;
  --gn-primary-300: #86EFAC;
  --gn-primary-400: #4ADE80;
  --gn-primary-500: #22C55E;
  --gn-primary-600: #16A34A;
  --gn-primary-700: #15803D;
  --gn-primary-800: #166534;
  --gn-primary-900: #14532D;

  --gn-primary: #16A34A;
  --gn-primary-hover: #15803D;
  --gn-primary-active: #166534;

  /* Neutral slate */
  --gn-slate-25: #FCFCFD;
  --gn-slate-50: #F8FAFC;
  --gn-slate-100: #F1F5F9;
  --gn-slate-200: #E2E8F0;
  --gn-slate-300: #CBD5E1;
  --gn-slate-400: #94A3B8;
  --gn-slate-500: #64748B;
  --gn-slate-600: #475569;
  --gn-slate-700: #334155;
  --gn-slate-800: #1E293B;
  --gn-slate-900: #0F172A;
  --gn-slate-950: #020617;

  /* Semantic */
  --gn-success: #16A34A;
  --gn-warning: #F59E0B;
  --gn-danger: #DC2626;
  --gn-info: #2563EB;

  /* Surfaces */
  --gn-bg: #F8FAFC;
  --gn-surface: #FFFFFF;
  --gn-surface-alt: #FCFCFD;
  --gn-code-bg: #0F172A;
  --gn-input-bg: #FFFFFF;

  /* Borders */
  --gn-border: #E2E8F0;
  --gn-border-strong: #CBD5E1;
  --gn-border-focus: #16A34A;

  /* Text */
  --gn-text: #0F172A;
  --gn-text-secondary: #475569;
  --gn-text-muted: #64748B;
  --gn-text-placeholder: #94A3B8;

  /* Radius */
  --gn-radius-btn: 10px;
  --gn-radius-input: 10px;
  --gn-radius-sm: 10px;
  --gn-radius-md: 16px;
  --gn-radius-card: 16px;
  --gn-radius-dialog: 20px;
  --gn-radius-pill: 999px;

  --gn-focus-ring: rgba(22, 163, 74, 0.15);

  /* Shadows */
  --gn-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --gn-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --gn-shadow-lg: 0 24px 48px rgba(15, 23, 42, 0.10);

  /* Motion */
  --gn-ease: ease-out;
  --gn-duration-hover: 120ms;
  --gn-duration-state: 180ms;
  --gn-duration-page: 200ms;

  /* Layout */
  --gn-container: 1280px;
  --gn-max-width: 1440px;
  --gn-header-height: 72px;
  --gn-section-y: 96px;
  --gn-section-y-tablet: 64px;
  --gn-section-y-mobile: 48px;

  /* Typography scale (desktop) */
  --gn-text-hero: 56px;
  --gn-text-h1: 44px;
  --gn-text-h2: 36px;
  --gn-text-h3: 28px;
  --gn-text-h4: 22px;
  --gn-text-h5: 18px;
  --gn-text-body-lg: 18px;
  --gn-text-body: 16px;
  --gn-text-sm: 14px;
  --gn-text-caption: 12px;

  /* Public containers (Part 4) */
  --gn-container-xs: 440px;
  --gn-container-sm: 640px;
  --gn-container-md: 840px;
  --gn-container-lg: 1120px;
  --gn-container-xl: 1280px;
  --gn-public-header-height: 72px;

  /* —— Merchant application shell (Theme 2) —— */
  --gn-app-bg: var(--gn-slate-50);
  --gn-sidebar-bg: #ffffff;
  --gn-sidebar-border: var(--gn-slate-200);
  --gn-topbar-bg: rgba(255, 255, 255, 0.96);
  --gn-content-bg: var(--gn-slate-50);

  --gn-sidebar-width: 248px;
  --gn-sidebar-collapsed-width: 76px;
  --gn-topbar-height: 64px;
  --gn-mobile-topbar-height: 60px;
  --gn-content-max-width: 1600px;

  --gn-table-row-compact: 44px;
  --gn-table-row-default: 52px;
  --gn-table-row-comfortable: 60px;
  --gn-table-row-height: var(--gn-table-row-default);

  --gn-status-success: var(--gn-success);
  --gn-status-pending: var(--gn-warning);
  --gn-status-processing: var(--gn-info);
  --gn-status-warning: var(--gn-warning);
  --gn-status-danger: var(--gn-danger);
  --gn-status-neutral: var(--gn-slate-500);
  --gn-status-info: var(--gn-info);

  --gn-overlay: rgba(15, 23, 42, 0.48);

  /* Breakpoints (Part 8A-3) — documentation tokens for shared JS/CSS */
  --gn-bp-mobile: 767px;
  --gn-bp-tablet: 1023px;
  --gn-bp-desktop: 1199px;
  --gn-bp-large: 1440px;

  /* —— Admin application shell (Theme 2 Part 1A) ——
     Purpose aliases over shared Theme 2 values; denser than merchant. */
  --admin-sidebar-width: 256px;
  --admin-sidebar-collapsed-width: 68px;
  --admin-topbar-height: 56px;
  --admin-content-max-width: none;
  --admin-form-max-width: 840px;
  --admin-settings-max-width: 1200px;
  --admin-table-row-height: 42px;
  --admin-table-row-height-compact: 40px;
  --admin-table-row-height-comfortable: 50px;
  --admin-card-padding: 16px;
  --admin-content-padding-x: 24px;
  --admin-content-padding-y: 20px;
  --admin-surface-workspace: var(--gn-slate-50);
  --admin-queue-warning: var(--gn-warning);
  --admin-queue-critical: var(--gn-danger);
  --admin-audit-surface: var(--gn-slate-25);
  --admin-review-surface: var(--gn-primary-50);
  --admin-selection-surface: var(--gn-primary-100);
}

@media (max-width: 1279px) and (min-width: 768px) {
  :root {
    --gn-text-hero: 48px;
    --gn-text-h1: 36px;
    --gn-text-h2: 30px;
    --gn-section-y: 64px;
  }
}

@media (max-width: 767px) {
  :root {
    --gn-text-hero: 36px;
    --gn-text-h1: 30px;
    --gn-text-h2: 26px;
    --gn-section-y: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --gn-duration-hover: 0ms;
    --gn-duration-state: 0ms;
    --gn-duration-page: 0ms;
  }
}