/* sonr-theme.css — SONR brand skin for the device-update pages.
   Derived from https://www.sonr.pro/ (Webflow): Inter typeface, deep-sky-blue #00bcff accent,
   fully rounded pill CTAs, white surfaces, #070a0e ink.

   Accessibility note: the marketing site puts WHITE text on #00bcff (contrast 2.2:1, fails
   WCAG AA). The update flow must meet AA, so we keep the exact brand fill and use near-black
   ink on it instead (9.6:1), and a darkened brand blue for text links on white (4.9:1).

   Loaded AFTER each page's inline <style>, so it only needs to re-point the design tokens. */

:root{
  /* raw brand palette */
  --sonr-blue:#00bcff;      /* --deep-sky-blue */
  --sonr-green:#05ce78;     /* --kickstarter   */
  --sonr-crimson:#ff194e;   /* --crimson       */
  --sonr-ink:#070a0e;       /* --dark-blue     */
  --sonr-dim:#616a6d;       /* --dim-grey      */
  --sonr-gainsboro:#e7e7e7;

  /* mapped to the page tokens */
  --bg:#f4f7f9;
  --card:#ffffff;
  --text:#22282b;
  --muted:#616a6d;
  --border:#e7e7e7;
  --primary:#00bcff;
  --primary-hover:#33cbff;
  --primary-ink:#06222c;          /* near-black on the bright accent → 9.6:1 */
  --link:#0079a8;                 /* accessible brand blue for text/links → 4.9:1 */
  --ok:#0b7d4b;                   /* accessible companion to #05ce78     → 5.2:1 */
  --err:#c8003c;                  /* accessible companion to #ff194e     → 6.0:1 */
  --info-bg:#e9f9ff;
  --info-bd:#b6ecff;
  --focus:#0079a8;
  --shadow:0 12px 34px rgba(7,10,14,.10);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#070a0e;                 /* brand --dark-blue */
    --card:#111820;
    --text:#e9eef2;
    --muted:#a7b2b8;
    --border:#233039;
    --primary:#00bcff;
    --primary-hover:#5bd6ff;
    --primary-ink:#06222c;
    --link:#5fd4ff;
    --ok:#05ce78;
    --err:#ff5c7f;
    --info-bg:#0d2430;
    --info-bd:#1c4d63;
    --focus:#5fd4ff;
    --shadow:0 12px 34px rgba(0,0,0,.5);
  }
}

/* Typeface: Inter, as on sonr.pro (system stack as fallback if the webfont is blocked). */
body{
  font-family:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
              "Helvetica Neue",Arial,"Noto Sans","Noto Sans Arabic",sans-serif;
}

/* Headings: tight, heavy, near-black — the site's h1 is Inter 700 with negative tracking. */
.card-title{ font-weight:800; letter-spacing:-.5px; }
.logo{ font-weight:800; letter-spacing:-.6px; }

/* Surfaces: generous rounding like the marketing cards. */
.update-card{ border-radius:24px; }

/* CTAs: brand pill. */
.btn-primary{
  border-radius:999px;
  font-weight:700;
  letter-spacing:-.3px;
}
.btn-secondary{
  border-radius:999px;
  color:var(--link);
  border-color:var(--link);
}
.link-btn{ color:var(--link); }

/* Loading spinner inside the primary button sits on a bright fill → use the dark ink. */
.btn-primary .btn-spinner{
  border-color:rgba(6,34,44,.35);
  border-top-color:var(--primary-ink);
}

/* Progress + success keep the brand hues. */
.progress{ border-radius:999px; }
.progress-fill{ background:var(--primary); }
.success-mark{ background:var(--ok); }

/* Language select picks up the card surface. */
select#lang{ border-radius:999px; padding-inline:16px; }

/* Unsupported-browser screen: the address must be readable and one-click selectable, because the
   operator has to carry it to another browser by hand if the copy button is unavailable. */
.url-box{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:16px; line-height:1.4;
  background:var(--bg); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; margin:16px auto 4px; max-width:44ch;
  word-break:break-all; user-select:all; -webkit-user-select:all;
}
.note-soft{ font-size:15px; color:var(--muted); margin:8px auto 0; max-width:56ch; }