/* Prosofpay — design tokens.
   Colors + type adopted from the Tony Robbins design study (monochrome-first,
   high contrast). Only change: accent #e0951a → Prosofpay ember #FD7014.
   Color is punctuation, never wallpaper. Accent = fills and rules; never
   body text on a light surface. */
:root {
  /* Surfaces */
  --surface-base: #ffffff;
  --surface-raised: #f6f6f7;
  --surface-sunken: #ececee;
  --surface-inverse: #000000;
  --inverse-raised: #141414;   /* cards on black bands */
  --inverse-sunken: #1f1f1f;   /* hover on black bands */

  /* Ink & borders */
  --ink: #1a1a1a;
  --ink-muted: #55555a;
  --ink-subtle: #6e6e74;
  --ink-inverse: #ffffff;
  --ink-inverse-muted: #a8a8ae;
  --border: #e2e2e5;
  --border-strong: #1a1a1a;
  --border-inverse: #2c2c2e;

  /* Brand & accent */
  --brand: #000000;
  --brand-contrast: #ffffff;
  --accent: #FD7014;
  --accent-press: #E25E06;
  --accent-contrast: #1a1a1a;

  /* Signals */
  --success: #16794a;
  --warning: #985c12;
  --danger: #cf3434;
  --info: #2f6df0;
  --focus-ring: #2f6df0;

  /* Type */
  --f-display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-hero: clamp(3rem, 9vw, 6rem);        /* display · Archivo 800 */
  --t-h2: clamp(2rem, 4.2vw, 3.25rem);     /* Archivo 700 */
  --t-h3: 1.5rem;                          /* Archivo 700 · 24/30 */
  --t-lead: 1.25rem;                       /* body-lg · 20/30 */
  --t-body: 1.0625rem;                     /* body · 17/26 */
  --t-small: .875rem;
  --t-caption: .8125rem;                   /* 13/18 */
  --t-overline: .75rem;                    /* 12 · +0.14em · uppercase */

  /* Space (8px grid, 4px half-step) */
  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem; --s-4: 2rem;
  --s-5: 2.5rem; --s-6: 3rem;   --s-8: 4rem;   --s-10: 5rem;
  --s-12: 6rem;  --s-16: 8rem;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  /* Shape */
  --r-sm: 8px;
  --r-tile: 16px;
  --r-photo: 24px;
  --r-pill: 999px;

  /* Elevation: borders over shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .10);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, .16);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 200ms;
}