/* ==========================================================================
   URU - Master Style Sheet
   v1.0 · 2026-07-09
   The single source of truth for URU UI - app, web, dashboards.
   No colour, size, or spacing value may be used that is not defined here.
   Spec: style-guide.html (this folder)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS
   Transducer - wordmark, the one big number, H1/H2 titles, eyebrows.
   Archivo    - everything else.

   This sheet declares NO @font-face - it expects the host project to
   provide 'Transducer' and 'Archivo' and will never overwrite the repo's
   own font setup. If the project has no fonts yet, also include the
   optional uru-fonts.css (+ fonts/) that ships alongside this file.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Neutral ramp - every grey in the product is one of these four */
  --uru-bg:       #080A0C; /* app background - everything sits on this          */
  --uru-raise:    #191924; /* elevated surfaces only: sheets, modals, nav, inputs */
  --uru-frame:    #2A2A3C; /* all borders/frames + nested fills                 */
  --uru-frame-hi: #3B3B54; /* interactive step: hover/pressed - never resting   */

  /* Text - three tiers. #EAE8FF is the lightest value in the system;
     pure white is never used. */
  --uru-t1: #EAE8FF; /* primary - headlines, key values, active nav   */
  --uru-t2: #CECEE4; /* secondary - body, sub-headlines               */
  --uru-t3: #B7B7CD; /* tertiary - labels, captions, muted, inactive  */

  /* Accents - each has exactly one meaning */
  --uru-action: #FFF700; /* lead-forward action ONLY (START WORKOUT, READY).
                            Never labels, never decoration.            */
  --uru-entity: #6E6E9E; /* URU (the entity) - every URU element: frame,
                            label, dot. Quiet by design.               */

  /* Performance spectrum - data-viz only, never chrome, never text.
     Endpoints may appear standalone as semantic low/high markers.     */
  --uru-spec-1: #F4442E; /* very low  */
  --uru-spec-2: #FF7A1A;
  --uru-spec-3: #FFC23D;
  --uru-spec-4: #FFF700; /* average   */
  --uru-spec-5: #C6E84A;
  --uru-spec-6: #5BD17A;
  --uru-spec-7: #1BE7FF; /* very high */

  /* Type */
  --uru-font:    'Archivo', system-ui, sans-serif;
  --uru-display: 'Transducer', 'Archivo', sans-serif;

  /* Font sizes - the only text sizes in the product. Base 14, min 11. */
  --uru-fs-display: 44px; /* Transducer 500 - the one big number (gauge) */
  --uru-fs-h1:      28px; /* Transducer 500 - hero headline (one per screen) */
  --uru-fs-h2:      22px; /* Transducer 400 - card title + big metric     */
  --uru-fs-h3:      18px; /* Archivo 500 - subtitle + stat                */
  --uru-fs-body-l:  16px; /* Archivo 400 - lead / URU-insight body        */
  --uru-fs-body:    14px; /* Archivo 400/500 - body, rows, buttons · BASE */
  --uru-fs-caption: 12px; /* Archivo - frame captions, meta, pills        */
  --uru-fs-eyebrow: 11px; /* Transducer 500 UPPER - labels, tabs, READY   */

  /* Spacing - 4px grid, six steps, no in-between values */
  --uru-s1: 4px;  /* hairline: icon-to-label, dot-to-eyebrow      */
  --uru-s2: 8px;  /* related items: pill gaps, label-to-value     */
  --uru-s3: 12px; /* nested tile padding · grid gaps between cards */
  --uru-s4: 16px; /* card padding · blocks inside a card          */
  --uru-s6: 24px; /* between cards/sections on a screen           */
  --uru-s8: 32px; /* screen edges · major section breaks          */

  /* Radius */
  --uru-r-sm:   8px;   /* small controls, spectrum bars   */
  --uru-r-md:   12px;  /* nested tiles                    */
  --uru-r-lg:   20px;  /* cards                           */
  --uru-r-pill: 999px; /* pills                           */

  /* States */
  --uru-disabled-opacity: .4;
  --uru-focus: 2px solid var(--uru-t3); /* outline, offset 2 */
}

/* --------------------------------------------------------------------------
   3. SCOPE
   Add class "uru" to the root element of any URU surface (body, #app, …).
   -------------------------------------------------------------------------- */
.uru{
  background:var(--uru-bg);
  color:var(--uru-t1);
  font-family:var(--uru-font);
  font-size:var(--uru-fs-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.uru *,.uru *::before,.uru *::after{box-sizing:border-box}

/* --------------------------------------------------------------------------
   4. TYPE ROLES - the eight text styles. Use these, not ad-hoc sizes.
   -------------------------------------------------------------------------- */
.uru-display{font-family:var(--uru-display);font-size:var(--uru-fs-display);font-weight:500;font-variant-numeric:tabular-nums;line-height:1}
.uru-h1{font-family:var(--uru-display);font-size:var(--uru-fs-h1);font-weight:500;letter-spacing:-.01em;line-height:1.12;color:var(--uru-t1)}
.uru-h2{font-family:var(--uru-display);font-size:var(--uru-fs-h2);font-weight:400;line-height:1.15;color:var(--uru-t1)}
.uru-h3{font-size:var(--uru-fs-h3);font-weight:500;color:var(--uru-t1)}
.uru-body-l{font-size:var(--uru-fs-body-l);font-weight:400;color:var(--uru-t2)}
.uru-body{font-size:var(--uru-fs-body);font-weight:400;color:var(--uru-t2)}
.uru-caption{font-size:var(--uru-fs-caption);color:var(--uru-t3)}
.uru-eyebrow{font-family:var(--uru-display);font-size:var(--uru-fs-eyebrow);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--uru-t3)}
.uru-eyebrow--entity{color:var(--uru-entity);letter-spacing:.12em}
.uru-num{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   5. FRAMES & SURFACES
   Cards are OUTLINED: bg + 1px frame border. Depth = filling nested
   elements with steps of the neutral ramp - never a grey off the ramp.
   -------------------------------------------------------------------------- */
.uru-card{background:transparent;border:1px solid var(--uru-frame);border-radius:var(--uru-r-lg);padding:var(--uru-s4)}
.uru-card--entity{border-color:var(--uru-entity)} /* URU-the-entity surfaces */
.uru-tile{background:var(--uru-frame);border-radius:var(--uru-r-md);padding:var(--uru-s3)}
.uru-raise{background:var(--uru-raise)} /* sheets, modals, sticky nav, inputs */
.uru-divider{border:0;border-top:1px solid var(--uru-frame);margin:0}

/* --------------------------------------------------------------------------
   6. CONTROLS
   States move one step along the ramp - never a new colour.
   -------------------------------------------------------------------------- */
.uru-btn-action{
  background:var(--uru-action);color:var(--uru-bg);border:none;
  border-radius:14px;padding:13px 18px;
  font-family:var(--uru-font);font-size:var(--uru-fs-body);font-weight:700;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:var(--uru-s2);cursor:pointer;
}
.uru-btn-action:active{filter:brightness(.85)}

.uru-btn-secondary{
  background:var(--uru-frame);color:var(--uru-t1);border:none;
  border-radius:14px;padding:13px 18px;
  font-family:var(--uru-font);font-size:var(--uru-fs-body);font-weight:500;cursor:pointer;
}
.uru-btn-secondary:hover,.uru-btn-secondary:active{background:var(--uru-frame-hi)}

.uru-btn-action:disabled,.uru-btn-secondary:disabled{opacity:var(--uru-disabled-opacity);cursor:default}

.uru-pill{display:inline-block;background:var(--uru-frame);color:var(--uru-t1);font-size:var(--uru-fs-caption);padding:4px 12px;border-radius:var(--uru-r-pill)}
.uru-pill--ready{background:transparent;border:1px solid var(--uru-action);color:var(--uru-action)}

.uru-input{
  background:var(--uru-raise);color:var(--uru-t1);border:1px solid var(--uru-frame);
  border-radius:var(--uru-r-md);padding:12px var(--uru-s4);
  font-family:var(--uru-font);font-size:var(--uru-fs-body);
}
.uru-input::placeholder{color:var(--uru-t3)}
.uru-input:hover{border-color:var(--uru-frame-hi)}

/* Interactive cards/rows: border steps up on hover */
.uru-tappable{cursor:pointer}
.uru-tappable:hover{border-color:var(--uru-frame-hi)}

/* Focus - keyboard only */
.uru :focus-visible{outline:var(--uru-focus);outline-offset:2px}

/* Disabled - whole element */
.uru [disabled],.uru .is-disabled{opacity:var(--uru-disabled-opacity);pointer-events:none}