/* GuardPrivacy design tokens — v1.0
   Every value below is taken from the approved prototype. */

:root {
  /* ---- Brand: the protected / relay path ---- */
  --gp-teal-900: #0E3B3E;  /* primary. Buttons, links, all relay UI */
  --gp-teal-800: #17595C;  /* link hover */
  --gp-teal-700: #1D2E2A;  /* deep panel background (dark sections, CTA band) */
  --gp-teal-400: #7FB8A8;  /* accent on dark backgrounds */
  --gp-teal-300: #5FA88F;  /* status dot, "OK" on dark */
  --gp-teal-200: #D3E0DB;  /* border of tinted surfaces */
  --gp-teal-100: #E6EDEB;  /* tinted surface: redaction chips, info panels */
  --gp-teal-050: #F4F8F6;  /* lightest tint: success/verified panel */

  /* ---- Brand: the abuse / legal path ---- */
  --gp-ox-900:  #1A1213;   /* abuse header bar */
  --gp-ox-800:  #2E1517;   /* abuse confirmation panel */
  --gp-ox-700:  #5E1A22;   /* primary abuse colour: buttons, labels */
  --gp-ox-400:  #C98D8D;   /* accent on dark */
  --gp-ox-300:  #D9A9A4;   /* accent on dark, higher contrast */
  --gp-ox-200:  #E4CDCB;   /* border of tinted surfaces */
  --gp-ox-150:  #D8BDBB;   /* outline-button border on light */
  --gp-ox-100:  #F9EFEE;   /* tinted surface */

  /* ---- Neutrals: ink (dark UI) ---- */
  --gp-ink-900: #101614;   /* text, dark headers, admin sidebar */
  --gp-ink-800: #161D1B;   /* dark card */
  --gp-ink-700: #1F2724;   /* dark divider */
  --gp-ink-600: #2A322F;   /* dark border */
  --gp-ink-500: #3A413E;   /* secondary text on light */

  /* ---- Neutrals: paper (light UI) ---- */
  --gp-paper-500: #DEDAD1; /* canvas behind frames, hairline border */
  --gp-paper-400: #E3DFD6; /* subtle border */
  --gp-paper-300: #EFEDE7; /* page background */
  --gp-paper-200: #F7F5F0; /* raised strip inside cards */
  --gp-paper-100: #FCFBF8; /* input background, table header */
  --gp-white:     #FFFFFF; /* card surface */

  /* Warm neutral variants used only on the abuse route */
  --gp-ox-paper-300: #F3EFEE;
  --gp-ox-paper-100: #FDFAF9;
  --gp-ox-border:    #E4DCDA;
  --gp-ox-border-strong: #D6C9C7;

  /* ---- Text ---- */
  --gp-text-primary:   #101614;
  --gp-text-secondary: #3A413E;
  --gp-text-body:      #4A514D;
  --gp-text-muted:     #6B716D;
  --gp-text-faint:     #8A8F8B;
  --gp-text-disabled:  #B4B8B4;
  --gp-text-on-dark:   #EFEDE7;
  --gp-text-on-dark-muted: #9BA39F;

  /* ---- Semantic ---- */
  --gp-success:    #0E3B3E;  --gp-success-bg: #E6EDEB;  --gp-success-border: #D3E0DB;
  --gp-warning:    #8A5A12;  --gp-warning-bg: #F8F0DE;  --gp-warning-border: #EADFC4;
  --gp-danger:     #5E1A22;  --gp-danger-bg:  #F9EFEE;  --gp-danger-border:  #E4CDCB;
  --gp-neutral:    #6B716D;  --gp-neutral-bg: #F2F0EA;  --gp-neutral-border: #E3DFD6;

  /* ---- Type ---- */
  --gp-font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gp-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gp-display:    700 58px/1.06 var(--gp-font-sans);  /* hero, desktop. letter-spacing -.035em */
  --gp-display-sm: 700 33px/1.10 var(--gp-font-sans);  /* hero, mobile.  letter-spacing -.032em */
  --gp-h1:         700 32px/1.15 var(--gp-font-sans);  /* letter-spacing -.030em */
  --gp-h2:         700 36px/1.18 var(--gp-font-sans);  /* letter-spacing -.028em */
  --gp-h2-sm:      700 26px/1.20 var(--gp-font-sans);
  --gp-h3:         700 25px/1.20 var(--gp-font-sans);  /* letter-spacing -.020em */
  --gp-h4:         600 17px/1.30 var(--gp-font-sans);
  --gp-body-lg:    400 17px/1.65 var(--gp-font-sans);
  --gp-body:       400 14.5px/1.70 var(--gp-font-sans);
  --gp-body-sm:    400 13px/1.60 var(--gp-font-sans);
  --gp-label:      600 12px/1 var(--gp-font-sans);
  --gp-button:     600 14px/1 var(--gp-font-sans);

  --gp-mono-value: 500 12.5px/1.4 var(--gp-font-mono);
  --gp-mono-meta:  400 11.5px/1.4 var(--gp-font-mono);
  --gp-mono-label: 600 10.5px/1 var(--gp-font-mono);   /* letter-spacing .09em, UPPERCASE */
  --gp-mono-micro: 600 9.5px/1 var(--gp-font-mono);    /* letter-spacing .11em, UPPERCASE */

  /* ---- Spacing (4px base) ---- */
  --gp-space-1: 4px;   --gp-space-2: 8px;   --gp-space-3: 12px;  --gp-space-4: 16px;
  --gp-space-5: 20px;  --gp-space-6: 24px;  --gp-space-7: 32px;  --gp-space-8: 44px;
  --gp-space-9: 64px;  --gp-space-10: 72px;

  --gp-container: 1180px;       /* marketing content max width */
  --gp-container-form: 1120px;  /* flow screens */
  --gp-container-text: 820px;   /* FAQ, long prose */
  --gp-gutter-desktop: 40px;
  --gp-gutter-mobile: 18px;

  /* ---- Radius ---- */
  --gp-radius-xs: 4px;   /* mono pills, badges */
  --gp-radius-sm: 6px;   /* small chips */
  --gp-radius-md: 8px;   /* buttons, inputs */
  --gp-radius-lg: 9px;   /* mobile buttons, tinted panels */
  --gp-radius-xl: 11px;  /* cards */
  --gp-radius-2xl: 12px; /* primary cards, dark bands */
  --gp-radius-pill: 100px;

  /* ---- Elevation (used sparingly; hairlines do most of the work) ---- */
  --gp-shadow-card: 0 1px 2px rgba(16,22,20,.05), 0 14px 34px -18px rgba(16,22,20,.28);
  --gp-shadow-form: 0 1px 2px rgba(16,22,20,.05), 0 16px 36px -22px rgba(16,22,20,.25);
  --gp-focus-teal: 0 0 0 3px rgba(14,59,62,.12);
  --gp-focus-ox:   0 0 0 3px rgba(94,26,34,.12);

  /* ---- Controls ---- */
  --gp-control-h: 50px;        /* desktop input */
  --gp-control-h-touch: 52px;  /* mobile button / input */
  --gp-tap-min: 44px;
}