/* ============================================================
   UA PROGRAM — Design System Foundations v2
   Athletic Neomorphism Edition
   Colors + Typography + Neomorphic Surface tokens
   Import this file at the top of any deliverable:
   @import url("colors_and_type.css");
   ============================================================ */

/* ---- Webfonts (Google Fonts) --------------------------------
   Anton    : ultra-bold condensed — hero impact headlines, big numerals
   Oswald   : condensed athletic caps — kickers, labels, table heads
   Archivo  : clean grotesque — body copy, UI, captions
   Plus Jakarta Sans: friendly rounded — neomorphic UI panels, stats
   NOTE: loaded from Google Fonts CDN. Swap for local /fonts if
   an offline build is needed. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;600;700&family=Archivo:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ============ BRAND CORE ============ */
  --ua-navy:        #0d1d61;  /* primary — sampled from logo "U" */
  --ua-navy-bright: #1b2f8f;  /* lifted navy for gradients / hovers */
  --ua-navy-deep:   #081136;  /* deep navy — backgrounds */
  --ua-navy-muted:  #2d4080;  /* softened navy for neomorphic accents */
  --ua-crimson:     #8a1010;  /* primary accent — logo "A" */
  --ua-crimson-bright:#b71c1c; /* energetic red — CTAs, intensity */
  --ua-crimson-deep:#5e0707;  /* deep maroon */
  --ua-crimson-soft:#f5c6c6;  /* tinted surface for crimson zone */

  /* ============ NEOMORPHIC BASE ============ */
  --nm-base:        #e8ebf0;  /* main neomorphic background — cool athletic clay */
  --nm-base-deep:   #dde0e8;  /* slightly darker neomorphic surface */
  --nm-base-raised: #f0f2f6;  /* raised surface (extruded highlight) */
  --nm-shadow-light: rgba(255, 255, 255, 0.85);  /* top-left light shadow */
  --nm-shadow-dark:  rgba(163, 177, 198, 0.65);  /* bottom-right dark shadow */

  /* Neomorphic shadow systems */
  --nm-extruded:    -6px -6px 16px rgba(255,255,255,0.85), 6px 6px 16px rgba(163,177,198,0.65);
  --nm-extruded-sm: -3px -3px 8px rgba(255,255,255,0.85), 3px 3px 8px rgba(163,177,198,0.65);
  --nm-extruded-lg: -10px -10px 28px rgba(255,255,255,0.9), 10px 10px 28px rgba(163,177,198,0.7);
  --nm-inset:       inset 3px 3px 8px rgba(163,177,198,0.65), inset -3px -3px 8px rgba(255,255,255,0.85);
  --nm-inset-deep:  inset 5px 5px 14px rgba(163,177,198,0.75), inset -5px -5px 14px rgba(255,255,255,0.9);

  /* Colorful neomorphic accents */
  --nm-accent-crimson: -4px -4px 12px rgba(255,255,255,0.75), 4px 4px 12px rgba(183,28,28,0.28);
  --nm-accent-navy:    -4px -4px 12px rgba(255,255,255,0.75), 4px 4px 12px rgba(13,29,97,0.28);
  --nm-accent-green:   -4px -4px 12px rgba(255,255,255,0.75), 4px 4px 12px rgba(27,138,91,0.28);
  --nm-accent-gold:    -4px -4px 12px rgba(255,255,255,0.75), 4px 4px 12px rgba(201,162,39,0.28);

  /* ============ INK & SURFACE ============ */
  --ink:        #0a0a0b;  /* near-black — primary text, blocks */
  --ink-2:      #1c1d22;  /* off-black surfaces */
  --paper:      #ffffff;  /* page / card background */
  --paper-2:    #f4f5f7;  /* subtle panel fill */
  --paper-3:    #e7e9ee;  /* hairline fill / track */

  /* ============ NEUTRAL SCALE (cool gray) ============ */
  --n-900: #16181d;
  --n-800: #292c33;
  --n-700: #3d414a;
  --n-600: #565b66;
  --n-500: #757b87;
  --n-400: #9aa0ab;
  --n-300: #c3c8d0;
  --n-200: #dde0e6;
  --n-100: #eef0f3;
  --n-050: #f7f8fa;

  /* ============ SEMANTIC FOREGROUNDS ============ */
  --fg-1: #1a1f2e;        /* primary text on neomorphic base */
  --fg-2: #4a5568;        /* secondary text */
  --fg-3: #718096;        /* muted / captions */
  --fg-inv: #ffffff;      /* text on dark */
  --fg-inv-2: #aab0bd;    /* secondary on dark */

  /* ============ FUNCTIONAL ACCENTS ============ */
  --accent:       var(--ua-crimson-bright);  /* primary interactive accent */
  --accent-cool:  var(--ua-navy);            /* secondary accent */
  --accent-glow:  rgba(183,28,28,0.15);      /* soft crimson glow for neomorphic rings */
  --accent-cool-glow: rgba(13,29,97,0.12);   /* soft navy glow */

  /* ============ INTENSITY SCALE ============ */
  --intensity-1:     #1b8a5b;  /* low / recovery (green) */
  --intensity-1-soft:#d4f0e4;  /* green tint surface */
  --intensity-2:     #c9a227;  /* moderate (gold) */
  --intensity-2-soft:#fdf3d0;  /* gold tint surface */
  --intensity-3:     var(--ua-crimson-bright); /* high / max effort (red) */
  --intensity-3-soft:#fde8e8;  /* red tint surface */

  /* ============ STAT COLORS (for charts/rings) ============ */
  --stat-blue:   #2563eb;  /* volume / frequency */
  --stat-purple: #7c3aed;  /* power */
  --stat-teal:   #0891b2;  /* endurance */
  --stat-orange: #ea580c;  /* speed */

  /* ============ HAIRLINES & DIVIDERS ============ */
  --line:       rgba(163,177,198,0.4);  /* default rule on neomorphic surface */
  --line-strong:#0a0a0b;               /* bold athletic rule */
  --line-inv:   rgba(255,255,255,.16);  /* rule on dark */

  /* ============ TYPE FAMILIES ============ */
  --font-impact: 'Anton', 'Arial Narrow', sans-serif;                 /* hero */
  --font-display:'Oswald', 'Arial Narrow', sans-serif;                /* labels/heads */
  --font-body:   'Archivo', system-ui, -apple-system, sans-serif;     /* body/UI */
  --font-ui:     'Plus Jakarta Sans', system-ui, sans-serif;          /* friendly UI panels */
  --font-mono:   'SFMono-Regular', ui-monospace, Menlo, monospace;

  /* ============ TYPE SCALE (px) ============ */
  --t-hero:   96px;  /* cover impact */
  --t-d1:     64px;  /* page title */
  --t-d2:     44px;  /* section title */
  --t-d3:     30px;  /* sub-section */
  --t-h:      20px;  /* card / block heading */
  --t-body:   16px;  /* paragraph */
  --t-sm:     14px;  /* secondary */
  --t-xs:     12px;  /* caption / micro-label */
  --t-kicker: 12px;  /* tracked eyebrow label */

  /* ============ SPACING (4px base grid) ============ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10:128px;

  /* ============ RADII ============ */
  --r-0:    0px;     /* hard athletic edge */
  --r-1:    4px;     /* subtle rounding */
  --r-2:    8px;     /* small elements */
  --r-3:    16px;    /* neomorphic cards (primary) */
  --r-4:    24px;    /* neomorphic panels */
  --r-5:    32px;    /* large neomorphic widgets */
  --r-pill: 999px;   /* tags / chips / rings */

  /* ============ NEOMORPHIC RADII (named) ============ */
  --nm-r-btn:    16px;  /* buttons */
  --nm-r-card:   24px;  /* cards */
  --nm-r-panel:  32px;  /* large panels */
  --nm-r-input:  16px;  /* inputs */
  --nm-r-icon:   14px;  /* icon containers */

  /* ============ CLASSIC SHADOWS / ELEVATION ============ */
  --sh-1: 0 1px 2px rgba(10,10,11,.06), 0 1px 1px rgba(10,10,11,.04);
  --sh-2: 0 4px 14px rgba(10,10,11,.10);
  --sh-3: 0 18px 48px rgba(10,10,11,.18);
  --sh-ink:0 14px 30px rgba(10,10,11,.45);

  /* ============ MOTION ============ */
  --motion-ease-out:    cubic-bezier(.22,1,.36,1); /* @kind other */
  --motion-ease-in-out:  cubic-bezier(.65,0,.35,1); /* @kind other */
  --motion-ease-spring:  cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --motion-ease-bounce:  cubic-bezier(.68,-.55,.27,1.55); /* @kind other */
  --motion-dur-fast:     120ms; /* @kind other */
  --motion-dur:          220ms; /* @kind other */
  --motion-dur-medium:   320ms; /* @kind other */
  --motion-dur-slow:     420ms; /* @kind other */
  --motion-dur-spring:   400ms; /* @kind other */


  /* ============ Z-INDEX SCALE ============ */
  --z-base:   1; /* @kind other */
  --z-card:   10; /* @kind other */
  --z-overlay:20; /* @kind other */
  --z-modal:  30; /* @kind other */
  --z-toast:  50; /* @kind other */
}

/* ============================================================
   SEMANTIC TYPE PRIMITIVES
   ============================================================ */

.ua-kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-kicker);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}

.ua-hero {
  font-family: var(--font-impact);
  font-size: var(--t-hero);
  line-height: .88;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ua-d1 {
  font-family: var(--font-impact);
  font-size: var(--t-d1);
  line-height: .92;
  text-transform: uppercase;
  color: var(--fg-1);
}

.ua-d2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-d2);
  line-height: .98;
  text-transform: uppercase;
  letter-spacing: .01em;
  color: var(--fg-1);
}

.ua-d3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-d3);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: .015em;
  color: var(--fg-1);
}

.ua-h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--fg-1);
}

.ua-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}

.ua-ui {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--fg-1);
}

.ua-sm  { font-family: var(--font-body); font-weight: 400; font-size: var(--t-sm); line-height: 1.5; color: var(--fg-2); }
.ua-xs  { font-family: var(--font-body); font-weight: 500; font-size: var(--t-xs); line-height: 1.4; color: var(--fg-3); }

/* Tabular numerals for stats, sets/reps, timers */
.ua-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ============================================================
   NEOMORPHIC SURFACE UTILITIES
   ============================================================ */

/* Base neomorphic background */
.nm-surface {
  background: var(--nm-base);
}

/* Extruded card / button */
.nm-extruded {
  background: var(--nm-base);
  border-radius: var(--nm-r-card);
  box-shadow: var(--nm-extruded);
}

.nm-extruded-sm {
  background: var(--nm-base);
  border-radius: var(--nm-r-btn);
  box-shadow: var(--nm-extruded-sm);
}

/* Inset input / pressed state */
.nm-inset {
  background: var(--nm-base);
  border-radius: var(--nm-r-input);
  box-shadow: var(--nm-inset);
}

/* Press animation */
.nm-btn {
  background: linear-gradient(145deg, var(--nm-base-raised), var(--nm-base-deep));
  border-radius: var(--nm-r-btn);
  box-shadow: var(--nm-extruded);
  border: none;
  cursor: pointer;
  transition: box-shadow var(--motion-dur-fast) var(--motion-ease-out),
              transform var(--motion-dur-fast) var(--motion-ease-out);
}

.nm-btn:active {
  box-shadow: var(--nm-inset);
  transform: scale(.97);
}

/* ============================================================
   MOTION UTILITIES
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .ua-fade-in {
    animation: ua-fade-up var(--motion-dur-medium) var(--motion-ease-out) both;
  }

  .ua-scale-in {
    animation: ua-scale-in var(--motion-dur-spring) var(--motion-ease-spring) both;
  }

  @keyframes ua-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes ua-scale-in {
    from { opacity: 0; transform: scale(.88); }
    to   { opacity: 1; transform: scale(1); }
  }
}