/*
 * Temple Payments design tokens — TEMPLE-RUN-006 Gate 0 candidate.
 * Source of intent: docs/40_frontend/08_brand_identity.md (core palette, Manrope, 8px grid, radii).
 * Shared by the public site (www) and the authenticated shell (app). Metronic variables are
 * mapped onto these in the shell slice; components must reference tokens, never raw hex.
 */
:root {
  /* Brand */
  --tp-brand-900: #1C1433;
  --tp-brand-800: #2A1F4A;   /* core: brand primary */
  --tp-brand-600: #4A3A7E;
  --tp-brand-400: #8C78CC;
  --tp-brand-100: #EEEBF7;
  --tp-brand-50:  #F7F5FB;

  --tp-accent-800: #043A53;
  --tp-accent-700: #064E6F;  /* core: interactive accent */
  --tp-accent-500: #0B6A93;
  --tp-accent-100: #E3F0F6;

  /* Neutrals */
  --tp-neutral-900: #1D1C22;
  --tp-neutral-700: #45444C;
  --tp-neutral-600: #66656E; /* core: supporting neutral */
  --tp-neutral-400: #A3A2AA;
  --tp-neutral-200: #E5E5E8; /* core: surface/border */
  --tp-neutral-100: #F2F2F4;
  --tp-white: #FFFFFF;

  /* Semantic (used only where product meaning requires it) */
  --tp-success-700: #1E6B47;  --tp-success-100: #E4F3EB;
  --tp-warning-700: #8A5A00;  --tp-warning-100: #FBF0D9;
  --tp-danger-700:  #A3262E;  --tp-danger-100:  #FBE6E7;
  --tp-info-700:    var(--tp-accent-700); --tp-info-100: var(--tp-accent-100);

  /* Roles — light (default) */
  --tp-bg: var(--tp-white);
  --tp-bg-subtle: var(--tp-brand-50);
  --tp-surface: var(--tp-white);
  --tp-surface-raised: var(--tp-white);
  --tp-border: var(--tp-neutral-200);          /* decorative dividers only */
  --tp-border-control: #85848D;                /* inputs/controls, 3.7:1 on white */
  --tp-text: var(--tp-neutral-900);
  --tp-text-strong: var(--tp-brand-800);
  --tp-text-muted: var(--tp-neutral-600);
  --tp-action: var(--tp-accent-700);
  --tp-action-hover: var(--tp-accent-800);
  --tp-action-text: var(--tp-white);
  --tp-focus-ring: 0 0 0 3px var(--tp-white), 0 0 0 5px var(--tp-accent-500);

  /* Dark brand surfaces (hero bands, footer, sidebar) */
  --tp-inverse-bg: var(--tp-brand-800);
  --tp-inverse-bg-deep: var(--tp-brand-900);
  --tp-inverse-text: var(--tp-white);
  --tp-inverse-text-muted: #C9C3DE;
  --tp-inverse-border: rgba(255, 255, 255, 0.14);

  /* Typography — Manrope self-hosted (OFL), system fallback */
  --tp-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tp-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --tp-weight-regular: 400;
  --tp-weight-medium: 500;
  --tp-weight-semibold: 600;
  --tp-weight-bold: 700;
  --tp-text-display: clamp(2.5rem, 1.6rem + 3.2vw, 3.5rem); /* 40–56 */
  --tp-text-h1: clamp(2rem, 1.5rem + 1.8vw, 3rem);          /* 32–48 */
  --tp-text-h2: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);  /* 26–36 */
  --tp-text-h3: 1.5rem;     /* 24 */
  --tp-text-lead: 1.125rem; /* 18 */
  --tp-text-body: 1rem;     /* 16 */
  --tp-text-small: 0.875rem;/* 14 */
  --tp-text-label: 0.75rem; /* 12, uppercase eyebrow, tracking 0.08em */
  --tp-leading-tight: 1.15;
  --tp-leading-body: 1.6;
  --tp-tabular: tabular-nums; /* all amounts and balances */

  /* Spacing — 8px grid (4 for fine adjustments) */
  --tp-space-1: 4px;  --tp-space-2: 8px;   --tp-space-3: 12px; --tp-space-4: 16px;
  --tp-space-5: 24px; --tp-space-6: 32px;  --tp-space-7: 48px; --tp-space-8: 64px;
  --tp-space-9: 96px; --tp-space-10: 128px;
  --tp-gutter: 16px;          /* mobile side gutter */
  --tp-container: 1200px;
  --tp-container-text: 720px;

  /* Shape */
  --tp-radius-sm: 8px;        /* inputs, small chips */
  --tp-radius-button: 10px;
  --tp-radius-card: 16px;
  --tp-radius-card-lg: 20px;
  --tp-radius-pill: 999px;

  /* Elevation — quiet; borders do most separation */
  --tp-shadow-1: 0 1px 2px rgba(42, 31, 74, 0.06);
  --tp-shadow-2: 0 4px 16px rgba(42, 31, 74, 0.08);
  --tp-shadow-3: 0 16px 40px rgba(42, 31, 74, 0.12);

  /* Motion */
  --tp-ease: cubic-bezier(0.2, 0, 0, 1);
  --tp-duration-fast: 150ms;
  --tp-duration: 200ms;
  --tp-duration-slow: 250ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --tp-duration-fast: 0ms; --tp-duration: 0ms; --tp-duration-slow: 0ms; }
}