/* ==========================================================================
   ItemSpan — Design tokens
   --------------------------------------------------------------------------
   Every colour, size, and timing value used anywhere on the site is declared
   here and nowhere else. If you want to change how the site looks, this is
   almost always the only file you need to open.

   The palette is unchanged from the original ItemSpan site.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Brand colours -----------------------------------------------------
     Evergreen is the primary action colour. Gold is an accent used sparingly:
     the hairline under the header, focus of attention, selection highlight.
     Using gold for large areas breaks the identity — keep it to lines and
     small marks. */

  --evergreen: #0b6b57;         /* buttons, links, active states            */
  --evergreen-pressed: #075a49; /* hover / pressed state of the above       */
  --evergreen-tint: #e6f0ec;    /* very light evergreen wash for icon chips */
  --gold: #f2c14e;              /* accent rule, selection, highlights       */

  /* --- Neutrals ----------------------------------------------------------
     "Ink" is the near-black used for headings and body text. It carries a
     green cast so it sits with evergreen rather than fighting it. */

  --ink: #102a2a;               /* headings, primary text                   */
  --secondary: #536460;         /* body copy, captions, supporting text     */
  --canvas: #fcfdfb;            /* page background — warm off-white         */
  --surface: #ffffff;           /* cards and panels that sit on the canvas  */
  --mist: #eaf4f0;              /* pale green section backgrounds, footer   */
  --border: #cbd9d4;            /* hairlines and card borders               */
  --warning: #8a4b00;           /* expiration warnings only                 */

  /* Derived transparencies. Declared once so they stay consistent. */
  --border-soft: rgba(203, 217, 212, 0.7);
  --ink-a06: rgba(16, 42, 42, 0.06);
  --ink-a10: rgba(16, 42, 42, 0.10);

  /* --- Typography --------------------------------------------------------
     Manrope for display (headings, brand, numerals), Inter for everything
     else. Both are variable fonts, self-hosted in /fonts. */

  --font-display: "Manrope Variable", Manrope, "Inter Variable", system-ui, sans-serif;
  --font-body: "Inter Variable", Inter, system-ui, -apple-system, sans-serif;

  /* Fluid type scale. clamp(min, preferred, max) means these sizes grow with
     the viewport and stop growing at the max — no media queries needed. */
  --text-hero: clamp(2.35rem, 5vw, 4.65rem);
  --text-h2: clamp(1.55rem, 2.6vw, 2.2rem);
  --text-h3: 1.125rem;
  --text-lead: clamp(1.05rem, 1.5vw, 1.35rem);
  --text-body: 1rem;
  --text-small: 0.9rem;
  --text-tiny: 0.8rem;

  /* Manrope's weight axis runs 200–800; Inter's runs 100–900. These are the
     four weights the site actually uses. */
  --weight-normal: 400;
  --weight-medium: 560;
  --weight-semibold: 650;
  --weight-bold: 750;

  /* --- Spacing -----------------------------------------------------------
     A 4px-based scale. Sticking to these keeps vertical rhythm consistent. */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* --- Layout ------------------------------------------------------------ */

  --container-max: 1240px;      /* standard content width                   */
  --container-wide: 1416px;     /* header only, so the nav breathes         */
  --container-narrow: 960px;    /* legal pages, contact, download           */
  --gutter: 24px;               /* space between content and screen edge    */

  /* --- Radii ------------------------------------------------------------- */

  --radius-sm: 8px;
  --radius-md: 11px;            /* buttons                                  */
  --radius-lg: 16px;            /* cards                                    */
  --radius-xl: 24px;            /* large panels                             */
  --radius-phone: 52px;         /* the phone mockup shell                   */
  --radius-pill: 999px;

  /* --- Elevation ---------------------------------------------------------
     Two shadows only. Everything else uses borders. Restraint here is what
     makes the site feel calm rather than bubbly. */

  --shadow-card: 0 2px 8px rgba(16, 42, 42, 0.04),
                 0 12px 32px rgba(16, 42, 42, 0.06);
  --shadow-phone: 0 28px 70px rgba(16, 42, 42, 0.2),
                  0 8px 24px rgba(16, 42, 42, 0.12);

  /* --- Motion ------------------------------------------------------------
     Kept short and eased. Anything slower than 300ms starts to feel sluggish
     on a landing page. All motion respects prefers-reduced-motion — see
     base.css. */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 0.16s;
  --duration-base: 0.24s;
  --duration-slow: 0.5s;

  /* --- Focus ring --------------------------------------------------------
     Deliberately blue, not evergreen: it has to be visible against evergreen
     buttons, which it wouldn't be if it matched them. */

  --focus-ring: #2457a5;
}