/* ==========================================================================
   Aspendora Technologies — brand tokens (CSS custom properties)
   v1.0.0 · extracted 2026-08-14 from www.aspendora.com
   Drop this in first, then build on top of the variables. Do not hard-code
   hex values in new work — reference the tokens so a palette change lands
   everywhere at once.
   ========================================================================== */

/* Font loading — self-host in production; this is the quick path.
   @import must be the first rule in the file, so it lives here. */
/* Font is loaded from the document head instead, so it does not block this stylesheet. */

:root {
  /* ---- Identity (logo artwork only — never as a UI color) ---- */
  --asp-crimson:   #b71a28;
  --asp-mark-dark: #1d0308;

  /* ---- Editorial ground (interior page heroes, documents, collateral).
         Not the logo red; not an action color. See docs/decisions.md. ---- */
  --asp-maroon:    #660000;

  /* ---- Brand ---- */
  --asp-navy:       #0c1a36;
  --asp-navy-deep:  #142850;
  --asp-navy-hero:  #0f172a;
  --asp-blue:       #2563eb;
  --asp-blue-hover: #1d4ed8;
  --asp-blue-light: #60a5fa;
  --asp-blue-pale:  #93c5fd;

  /* ---- Neutrals ---- */
  --asp-white:     #ffffff;
  --asp-slate-50:  #f8fafc;
  --asp-slate-100: #f1f5f9;
  --asp-slate-200: #e2e8f0;
  --asp-slate-300: #cbd5e1;
  --asp-slate-400: #94a3b8;
  --asp-slate-500: #64748b;
  --asp-slate-600: #475569;
  --asp-slate-700: #334155;
  --asp-ink:       #0f1729;

  /* ---- Status ---- */
  --asp-success:       #16a34a;
  --asp-success-light: #4ade80;
  --asp-danger:        #dc2626;
  --asp-danger-light:  #f87171;
  --asp-warning:       #d97706;
  --asp-alert:         #ea580c;

  /* ---- Semantic aliases (prefer these in components) ---- */
  --asp-bg:            var(--asp-white);
  --asp-bg-alt:        var(--asp-slate-50);
  --asp-bg-dark:       var(--asp-navy-hero);
  --asp-bg-editorial:  var(--asp-maroon);
  --asp-text:          var(--asp-ink);
  --asp-text-muted:    var(--asp-slate-600);
  --asp-text-on-dark:  var(--asp-slate-300);
  --asp-border:        var(--asp-slate-200);
  --asp-action:        var(--asp-blue);
  --asp-action-hover:  var(--asp-blue-hover);

  /* ---- Gradients ---- */
  --asp-grad-logo:  linear-gradient(90deg, #b71a28 0%, #b71a28 46%, #971621 55%, #76101a 63%,
                                    #5c0d15 71%, #42080e 76%, #2b0609 82%, #1d0308 100%);
  --asp-grad-hero-text: linear-gradient(90deg, #60a5fa, #2563eb, #93c5fd);
  --asp-grad-cta:   linear-gradient(90deg, #2563eb 0%, #1d4ed8 50%, #2563eb 100%);
  --asp-grad-page-hero: linear-gradient(180deg, #0f172a 0%, #142850 100%);
  --asp-grad-slate: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

  /* ---- Type ---- */
  --asp-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --asp-font-quote: Georgia, serif;

  --asp-fs-hero-h1: clamp(40px, 6vw, 80px);
  --asp-fs-page-h1: clamp(36px, 5vw, 60px);
  --asp-fs-h2:      clamp(32px, 4vw, 52px);
  --asp-fs-band-h2: clamp(28px, 4vw, 48px);
  --asp-fs-h3:      20px;
  --asp-fs-hero-lead: clamp(18px, 2vw, 22px);
  --asp-fs-lead:    clamp(17px, 1.6vw, 21px);
  --asp-fs-body:    18px;
  --asp-fs-sm:      14px;
  --asp-fs-eyebrow: 11px;

  /* ---- Radius ---- */
  --asp-r-sm:  8px;
  --asp-r-md:  12px;
  --asp-r-lg:  16px;
  --asp-r-xl:  24px;
  --asp-r-pill: 9999px;

  /* ---- Shadow ---- */
  --asp-sh-card:        0 1px 3px rgba(0,0,0,.05);
  --asp-sh-card-hover:  0 20px 40px -10px rgba(0,0,0,.1);
  --asp-sh-elevated:    0 25px 50px -12px rgba(0,0,0,.25);
  --asp-sh-btn:         0 10px 30px rgba(37,99,235,.3);
  --asp-sh-btn-hover:   0 14px 40px rgba(37,99,235,.5);
  --asp-sh-header:      0 4px 12px rgba(15,23,41,.08);

  /* ---- Layout ---- */
  --asp-container:        1180px;
  --asp-container-prose:  880px;
  --asp-container-pad:    24px;

  /* ---- Motion ---- */
  --asp-t-fast: .2s;
  --asp-t-base: .3s;
}