/* ==========================================================================
   Sufficiently Advanced Solutions — Design Tokens
   Derived from Brand Guide v2.1 (August 2026). Section refs in comments.
   This file is the single source of truth for color, type, and spacing.
   ========================================================================== */

:root {
  /* --- Core palette (§09) --------------------------------------------------
     Three colors do all the work.

     NOTE — deviation from Brand Guide v2.1: the guide prints the accent as
     #FF7A00. The production value is #E5A00D (owner decision, 2026-08-10),
     which is the true Plex brand color the guide was approximating. It is
     an amber/gold rather than a red-orange. The guide doc should be reissued
     as v2.2 with this value so the two don't drift. All reference PNGs in
     brand/reference/ still show the old #FF7A00 and are historical. */
  --sas-black:  #000000;
  --sas-orange: #E5A00D;  /* Plex gold — THE production accent */
  --sas-cream:  #F5F5F0;

  /* Alias — some contexts read better calling it gold than orange. Same value. */
  --sas-gold:   var(--sas-orange);

  /* --- Extended neutrals ---------------------------------------------------
     Not in the guide; derived tints/shades of the locked three so that UI
     needs (borders, muted text, hovers) never require a new hue. */
  --sas-ink:        #0A0A0A;  /* near-black for large surfaces, less harsh */
  --sas-ink-soft:   #1A1A1A;  /* raised surfaces on black */
  --sas-ink-line:   #2A2A2A;  /* hairlines on black */
  --sas-gray-700:   #4A4A48;  /* body copy on cream */
  --sas-gray-500:   #77776F;  /* muted / captions */
  --sas-gray-300:   #C9C9C0;  /* borders on cream */
  --sas-cream-warm: #EDEDE6;  /* alternating band on cream */
  --sas-white:      #FFFFFF;

  /* Accent states. Same hue family — the brand uses ONE production accent
     (§09: "Use one consistent production orange"); these are interaction
     states only, never a second brand color. */
  --sas-orange-hover: #CC8D0B;
  --sas-orange-press: #B37C0A;
  --sas-orange-tint:  rgba(229, 160, 13, 0.14);
  --sas-focus-ring:   rgba(229, 160, 13, 0.60);

  /* Darkened gold for SMALL TEXT on cream. #E5A00D on cream is 2.05:1 — fine
     for graphics and 24px+ display type, fails badly for body text. Use this
     instead when gold text has to be small. 4.9:1 on cream. */
  --sas-gold-ink: #8F6200;

  /* --- Semantic roles ------------------------------------------------------
     Components reference these, not the raw palette, so a surface can flip
     from cream to black without rewriting every rule.
     §09 color behavior: cream = approachable customer-facing surface;
     black = stronger branded moments; orange = identity + hierarchy, and it
     "should not flood every surface". */
  --surface:          var(--sas-cream);
  --surface-alt:      var(--sas-cream-warm);
  --surface-invert:   var(--sas-ink);
  --text:             var(--sas-black);
  --text-muted:       var(--sas-gray-700);
  --text-invert:      var(--sas-cream);
  --text-invert-muted:#A8A8A0;
  --line:             var(--sas-gray-300);
  --line-invert:      var(--sas-ink-line);
  --accent:           var(--sas-orange);
  --accent-contrast:  var(--sas-black); /* text ON gold — black (9.4:1), never
                                           white (2.2:1, fails AA) */
  --accent-text:      var(--sas-gold-ink); /* gold-family text ON cream, small sizes */

  /* --- Typography (§09) ----------------------------------------------------
     Reference family is Helvetica Neue. No webfont is loaded: the stack
     resolves to Helvetica Neue on macOS/iOS, Arial elsewhere, both of which
     are the same grotesque skeleton the guide asks for. Keeps the site
     dependency-free and fast behind the Cloudflare Tunnel.
     Swap --font-sans to a self-hosted Inter/Neue Haas here if licensed. */
  --font-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Weights — the guide names exactly three (§09) */
  --fw-regular: 400;  /* body copy */
  --fw-medium:  500;  /* supporting hierarchy */
  --fw-bold:    700;  /* headlines and lockups */

  /* Type scale — 1.25 major third, fluid between 380px and 1280px viewports */
  --step--1: clamp(0.83rem, 0.80rem + 0.12vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.19vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.32vw, 1.41rem);
  --step-2:  clamp(1.44rem, 1.33rem + 0.51vw, 1.76rem);
  --step-3:  clamp(1.73rem, 1.55rem + 0.78vw, 2.20rem);
  --step-4:  clamp(2.07rem, 1.80rem + 1.17vw, 2.75rem);
  --step-5:  clamp(2.49rem, 2.07rem + 1.75vw, 3.44rem);
  --step-6:  clamp(2.99rem, 2.37rem + 2.57vw, 4.30rem);

  --lh-tight:   1.05;  /* display headlines */
  --lh-heading: 1.15;
  --lh-body:    1.6;

  /* Tracking. The identity leans on wide-tracked uppercase for the descriptor
     and utility lines ("SMALL BUSINESS IT", "SASTX.NET") — §07/§10. */
  --ls-display: -0.02em;
  --ls-normal:   0em;
  --ls-wide:     0.08em;
  --ls-utility:  0.18em;

  /* --- Space scale (4px base) --------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* --- Geometry ------------------------------------------------------------
     Near-square corners. The marks are hard-edged utility geometry; rounded
     "friendly SaaS" corners fight the Bell-inspired weight (§07). */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  --border-hair: 1px;
  --border-rule: 2px;
  --border-heavy: 4px;

  /* --- Elevation -----------------------------------------------------------
     Restrained. No glows, no colored shadows (§09 typography behavior bans
     the generic-tech-company effects; same principle applies to depth). */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.14);

  /* --- Layout -------------------------------------------------------------- */
  --measure: 68ch;        /* max line length for body copy */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* --- Motion --------------------------------------------------------------
     Short and unshowy. */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* Inverted context: drop this class on any black section and the semantic
   roles flip. Components never need a ".on-dark" variant of their own. */
.sas-invert,
.sas-on-black {
  --surface:     var(--sas-ink);
  --surface-alt: var(--sas-ink-soft);
  --text:        var(--sas-cream);
  --text-muted:  var(--text-invert-muted);
  --line:        var(--sas-ink-line);
  background: var(--surface);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}