/* ============================================================================
   SOLASE :: BRAND TOKENS
   ----------------------------------------------------------------------------
   This is the ONLY file that should contain literal color, font, or size
   values. Everything else in the codebase references these custom properties.
   To rebrand the site, edit this file and nothing else.

   Three tiers, in dependency order:
     1. BASE      raw brand values (the palette, the typefaces)
     2. SEMANTIC  role-based aliases that map to base values
     3. UTILITY   layout, spacing, radius, motion

   Rule: pages and components use tiers 2 and 3. Never reference a tier 1
   token directly outside this file, and never hardcode a hex value anywhere.

   SOURCE: values captured from the Solase Claude Design build
   (Homepage, Sign In, Create Account), 2026-09-09. Where the design file and
   the rendered page disagreed, the rendered page won.
   ============================================================================ */

:root {
  /* ==========================================================================
     TIER 1 :: BASE BRAND
     ========================================================================== */

  /* --- The warm spectrum. Solase's signature, light to hot. --- */
  --base-color-brand--blush:      #ffebe6;  /* app canvas behind the product window */
  --base-color-brand--blush-deep: #ffe6de;  /* secondary warm surface */
  --base-color-brand--peach:      #fed7c7;
  --base-color-brand--apricot:    #f6ac96;
  --base-color-brand--tangerine:  #f69a78;  /* gradient stop, warm end */
  --base-color-brand--coral:      #ed8369;  /* primary warm accent */
  --base-color-brand--salmon:     #f58c88;
  --base-color-brand--ember:      #de5045;  /* link rest state, ambient glow */
  --base-color-brand--rose:       #f14c52;
  --base-color-brand--crimson:    #f54558;  /* gradient stop, hot end */
  --base-color-brand--magenta:    #f53b51;

  /* The field coral. This is the large-surface red the marketing hero actually
     renders, and it is NOT the same value as --coral above, which is the
     accent. Keep both. */
  --base-color-brand--field:      #ec5f5c;
  --base-color-brand--field-rgb:  236 95 92;

  /* Warmest black. Used for type and for the deep footer plate. */
  --base-color-brand--ink:        #200105;
  --base-color-brand--ink-rgb:    32 1 5;

  /* --- Cool counterpoint, for deep section plates --- */
  --base-color-brand--deep-blue:  #194b6b;

  /* --- Neutral ramp, as measured in the design --- */
  --base-color-neutral--000: #ffffff;  /* content surface */
  --base-color-neutral--000-rgb: 255 255 255;
  --base-color-neutral--025: #f7f7f7;  /* the workhorse tint */
  --base-color-neutral--050: #f2f2f2;
  --base-color-neutral--150: #d4d4d4;
  --base-color-neutral--200: #d3d3d3;  /* hairline strokes */
  --base-color-neutral--300: #c4c4c4;
  --base-color-neutral--400: #bdbdbd;  /* placeholder and meta text */
  --base-color-neutral--500: #737373;  /* index numerals */
  --base-color-neutral--600: #4f4f4f;  /* secondary text */
  --base-color-neutral--700: #4d4d4d;
  --base-color-neutral--900: #1a1a1a;  /* primary text on neutral surfaces */
  --base-color-neutral--999: #000000;
  --base-color-neutral--transparent: transparent;

  /* --- Status --- */
  --base-color-status--destructive:      #ff3b30;
  --base-color-status--destructive-deep: #ca2c2e;
  --base-color-status--success:          #059669;
  --base-color-status--info:             #2563eb;
  --base-color-status--warning:          #92400e;

  /* --- Typefaces ---
     Acumin Variable Concept carries the whole site. The display role is the
     same face at weight 200 (Acumin Pro Extra Light in the source design), so
     there is one webfont, not two. Ubuntu Mono is used only for index
     numerals and small technical labels. */
  --font--display: 'Acumin Variable Concept', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font--body:    'Acumin Variable Concept', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font--reading: 'DM Sans', 'Acumin Variable Concept', -apple-system, sans-serif;
  --font--mono:    'Ubuntu Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ==========================================================================
     TIER 2 :: SEMANTIC
     Role-based. This is what pages and components reference.

     Solase has THREE surfaces, not a light/dark pair:
       warm   the coral gradient field   (hero, closing CTA, auth screens)
       light  white                      (default content)
       ink    #200105                    (footer, deep plates)
     ========================================================================== */

  /* Surfaces */
  --background-color--background-primary:   var(--base-color-neutral--000);
  --background-color--background-sunken:    var(--base-color-neutral--025);
  --background-color--background-ink:       var(--base-color-brand--ink);
  --background-color--background-canvas:    var(--base-color-brand--blush);

  /* The two gradient fields. Captured stop-for-stop from the rendered pages.
     Marketing fades out to warm white so content can sit under it; auth runs
     the full spectrum because it fills the viewport. */
  --gradient--field-marketing: linear-gradient(180deg,
    #ec5f5c 0%, #ee6663 66%, #f0776d 80%, #f4a08c 92%, #fdf1eb 100%);
  --gradient--field-auth: linear-gradient(180deg,
    #f54558 0%, #f14c52 24%, #de5045 52%, #ed8369 84%, #f69a78 100%);
  /* The homepage hero carries more of the spectrum than the flat marketing
     ramp, which holds one coral for 66% of its height and then crams four
     stops into the last third. This one dips through ember before opening out,
     so it walks 33% more colour and also darkens the band the white h1 sits on.

     The stops are tied to where the content actually falls, so they must be
     rechecked if the hero's height or padding changes. With the hero at 957px
     the h1 spans 47-62% and the CTA pill 78-83%, giving 3.84:1 and 3.57:1 for
     white at the h1's top and baseline (floor 3:1) and 2.84:1 for the pill
     against the field (the closing band sits at 2.81:1).

     Keep the 0% stop equal to --base-color-brand--field: the pinned nav paints
     that colour and would otherwise seam against the hero. */
  --gradient--field-hero: linear-gradient(180deg,
    #ec5f5c 0%, #e4564d 26%, #de5045 55%, #e8705f 72%,
    #f0776d 84%, #f4a08c 93%, #fdf1eb 100%);
  --gradient--send: linear-gradient(180deg, #f54558 0%, #f69a78 100%);

  /* Text */
  --text-color--text-primary:   var(--base-color-brand--ink);
  --text-color--text-secondary: var(--base-color-neutral--600);
  --text-color--text-muted:     var(--base-color-neutral--400);
  --text-color--text-index:     var(--base-color-neutral--500);
  --text-color--text-on-warm:   var(--base-color-neutral--000);
  --text-color--text-on-warm-secondary: rgb(var(--base-color-neutral--000-rgb) / 0.72);
  --text-color--text-accent:    var(--base-color-brand--ember);
  --text-color--placeholder-on-warm: rgb(var(--base-color-neutral--000-rgb) / 0.65);

  /* Links. Ember at rest, crimson on hover, per the design. */
  --link-color--link-primary: var(--base-color-brand--ember);
  --link-color--link-hover:   var(--base-color-brand--crimson);

  /* Buttons. The primary button is surface-aware: coral on a light surface,
     white on a warm or ink one. site.css handles the switch. */
  --button-color--primary-fill:      var(--base-color-brand--coral);
  --button-color--primary-fill-hover:var(--base-color-brand--ember);
  --button-color--primary-text:      var(--base-color-neutral--000);
  --button-color--on-warm-fill:      var(--base-color-neutral--000);
  --button-color--on-warm-text:      var(--base-color-brand--ink);
  --button-color--ghost-warm-border: rgb(var(--base-color-neutral--000-rgb) / 0.5);

  /* Borders */
  --border-color--border-hairline:    var(--base-color-neutral--200);
  --border-color--border-subtle:      rgb(var(--base-color-brand--ink-rgb) / 0.08);
  --border-color--border-on-warm:     rgb(var(--base-color-neutral--000-rgb) / 0.35);
  --border-color--border-accent:      var(--base-color-brand--ember);
  --border-color--border-transparent: var(--base-color-neutral--transparent);

  /* Glass. The product demo card and the auth form fields sit on the warm
     field at these alphas. */
  --surface--glass-on-warm:        rgb(var(--base-color-neutral--000-rgb) / 0.16);
  --surface--glass-on-warm-strong: rgb(var(--base-color-neutral--000-rgb) / 0.2);
  --surface--glass-on-warm-hairline: rgb(var(--base-color-neutral--000-rgb) / 0.5);
  --surface--glass-on-warm-hover:    rgb(var(--base-color-neutral--000-rgb) / 0.3);

  /* KNOWN CONTRAST EXCEPTION, accepted 2026-10-26. The white wash lightens
     the coral it sits on, so the nav pill's white label measures 3.22:1 on
     the homepage auth ramp, 2.90:1 on the marketing ramp and 2.47:1 on the
     pinned bar, against the 4.5:1 floor for 14px text. Tinting the fill with
     ink instead clears 5:1 everywhere, and was tried and rejected: it reads
     as a dark chip, not as glass. The look was chosen over the number with
     that trade understood. Leave it alone, and do not re-derive the ink
     version; it has already been built and turned down. */
  /* Lighter than the panel glass. The nav bar needs to separate itself from
     the field without becoming a slab of white across the top. */
  /* A scrim, not a bar. It fades out downward so there is no edge and no
     visible width, which is what made a filled bar read as a band across the
     top. Ink rather than white: the nav type is white, so darkening behind it
     is what actually buys contrast. */
  /* The pinned nav wears the field's own coral rather than an ink scrim. The
     nav type, mark and sign-in pill are all built for a warm ground, so over
     the white sections a dark bar was the only way to keep them legible.
     Carrying the coral instead keeps the brand and drops the dark. */
  --surface--nav-pinned: rgb(var(--base-color-brand--field-rgb) / 0.94);

  --scrim--nav: linear-gradient(to bottom,
    rgb(var(--base-color-brand--ink-rgb) / 0.20) 0%,
    rgb(var(--base-color-brand--ink-rgb) / 0.10) 55%,
    rgb(var(--base-color-brand--ink-rgb) / 0) 100%);
  --surface--glass-light:          rgb(var(--base-color-neutral--000-rgb) / 0.7);
  --surface--glass-light-strong:   rgb(var(--base-color-neutral--000-rgb) / 0.9);
  --surface--scrim-ink:            rgb(var(--base-color-brand--ink-rgb) / 0.75);
  --surface--scrim-ink-strong:     rgb(var(--base-color-brand--ink-rgb) / 0.96);
  --surface--card-on-light:        var(--base-color-neutral--025);
  --blur--glass: blur(24px);

  /* Elevation, as measured */
  --shadow--xs:     0 1px 2px 0 rgb(0 0 0 / 0.05);
  /* Warm and diffuse, for lifting a coral control off a light ground. A black
     shadow offset 1px sits directly under the edge and reads as a hard rim
     against warm colour rather than as a lift. */
  --shadow--warm:   0 2px 10px 0 rgb(var(--base-color-brand--ink-rgb) / 0.13);
  --shadow--sm:     0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow--window: 0 4px 24px 0 rgb(0 0 0 / 0.08);

  /* ==========================================================================
     TIER 3 :: UTILITY
     ========================================================================== */

  /* Layout */
  --max-width:       70rem;   /* 1120px, the content card width in the design */
  --max-width-wide:  90rem;   /* 1440px, the outer shell */
  /* Capped, not raw 5vw. Uncapped, a wider screen produces a wider gutter and
     therefore a NARROWER content column inside any max-width container, which
     is backwards and made the proof titles wrap only on large displays. */
  --container-pad-x: clamp(20px, 5vw, 60px);

  /* Vertical rhythm */
  --section-pad-y:          100px;
  --section-pad-y-mobile:   64px;
  --hero-pad-top:           140px;
  --hero-pad-bottom:        80px;
  --hero-pad-top-mobile:    120px;
  --hero-pad-bottom-mobile: 60px;

  /* Spacing scale, matching the design's 4px base */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Type scale. clamp() based, so pages never need media queries for type.
     The h1 max (3.6rem = 57.6px) is the rendered hero size. */
  --type--h1:       clamp(2.5rem, 5.2vw, 3.6rem);
  --type--h1-short: clamp(2.1rem, 4vw, 3rem);
  --type--h2:       clamp(1.875rem, 3.4vw, 2.625rem);
  --type--h3:       1.125rem;
  --type--lead:     clamp(1rem, 1.6vw, 1.125rem);
  --type--body:     1rem;
  --type--small:    0.875rem;
  --type--xs:       0.75rem;

  /* Display type is set at weight 200 with tight leading and negative
     tracking. That combination is the brand's signature: do not set a
     heading at a heavier weight or default tracking. */
  --leading--display: 1.08;
  --leading--head:    1.2;
  --leading--body:    1.5;
  --leading--loose:   1.7;

  --tracking--display: -0.015em;
  --tracking--label:   -0.01em;
  --tracking--wordmark: 0.22em;

  --weight--display:  200;
  --weight--light:    300;
  --weight--normal:   400;
  --weight--medium:   500;
  --weight--semibold: 600;

  /* Radii, as named in the design */
  --radius-hair:    4px;
  --radius-control: 8px;
  --radius-panel:   14px;
  --radius-app:     32px;
  --radius-window:  40px;
  --radius-pill:    9999px;
  /* Chat bubbles in the product are rounder than a panel but not a full pill,
     so they hold their shape when the text wraps to a second line. */
  --radius-bubble:  22px;

  /* The supplied lockup master is 254x276 with the mark spanning 182px, so a
     lockup sized by its MARK width draws at width x 254/182. */
  --lockup-ratio: 1.3956;

  /* Controls */
  --control-height:    56px;   /* primary button */
  --control-height-sm: 44px;   /* nav pill */

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
  --transition:      var(--duration-base) var(--ease-standard);
  --transition-fast: var(--duration-fast) var(--ease-standard);

  /* Chrome */
  --nav-height: 88px;
  --z-nav:      50;
  --z-sticky:   100;
  --z-modal:    200;
  /* Above the modal: a consent decision should never be trapped behind
     another layer, and it is the one thing that must always be reachable. */
  --z-consent:  300;
}

/* ============================================================================
   FONT FACES
   Acumin Variable Concept is self-hosted and covers every weight in use
   (200 display, 300 body, 600 labels and buttons).
   ============================================================================ */

@font-face {
  font-family: 'Acumin Variable Concept';
  src: url('/fonts/AcuminVariableConcept.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Acumin Variable Concept carries three axes: wght 100-900, wdth 50-115, and
   slnt 0-12. Only wght is driven by a normal CSS property. An engine that
   resolves an unpinned axis to something other than its default renders the
   whole typeface slanted or condensed, which is exactly what iOS did with
   slnt: every piece of Acumin on the page came out italic while DM Sans
   stayed upright. Pinning the two axes CSS does not otherwise control removes
   the ambiguity. wght is deliberately absent so font-weight keeps working. */

/* DM Sans carries running body copy. Acumin (--font--body) stays on UI: nav,
   buttons, labels, eyebrows. Self-hosted rather than pulled from Google Fonts
   so the site keeps its zero third-party-request property. */
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/DMSans-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  src: url('/fonts/DMSans-latin-ext.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Ubuntu Mono is used only for index numerals ("01", "02") and small
   technical labels. It is not self-hosted yet: the stack falls back to the
   system monospace until the woff2 files are added to /fonts.
   TODO: self-host Ubuntu Mono 400/700 rather than adding a Google Fonts call,
   so the site keeps its zero third-party-request property. */

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}