/* =============================================================================
   WipZen design system — TOKENS
   Atomic values only. No selectors other than :root. Nothing here should ever
   describe a component; if it needs a class name, it belongs in components.css.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     SURFACES
     A warm stone base. --page is the canvas, --band is the tinted strip used
     for the nav and alternating sections, --card is the raised white plane.
     --------------------------------------------------------------------- */
  --page:            #f7f7f5;
  --app-surface:     #f5f4f1;
  --band:            #eef1f2;
  --card:            #ffffff;
  --card-soft:       #fbfaf9;
  --control-fill:    #f5f4f1;

  /* ---------------------------------------------------------------------
     FOREGROUNDS
     --------------------------------------------------------------------- */
  --heading:         #1c1917;
  --body:            #57534e;
  --body-subtle:     #79716b;
  --fg-disabled:     #a8a29e;
  --white:           #ffffff;

  /* ---------------------------------------------------------------------
     BORDERS
     --------------------------------------------------------------------- */
  --border:          #e7e6e5;
  --border-subtle:   #ebebe7;
  --border-medium:   #d6d3d1;
  --border-strong:   #a8a29e;
  --border-on-band:  #dfe6e8;

  /* ---------------------------------------------------------------------
     BRAND — cyan
     --brand is the bright identity colour. It is safe on icons, rules, glows
     and large shapes (>=3:1 needs only apply to non-text), but NOT behind
     small white text — see the button ramp below.
     --------------------------------------------------------------------- */
  --brand:           #0891b2;
  --brand-light:     #14a5cc;
  --brand-medium:    #0a7d99;
  --brand-strong:    #0b6f8a;
  --brand-soft:      #cdeaf2;
  --brand-softer:    #e8f5f9;

  /* Brand used as TEXT. Two variants because the backdrop changes the ratio. */
  --fg-brand:        #0b7f9c;  /* on --card  4.64:1 */
  --fg-brand-strong: #0b6f8a;  /* on --page  5.36:1 */

  /* Primary button fill. Deliberately darker than --brand so that white label
     text clears WCAG AA at 14px. Top 4.77:1 / mid 5.75:1 / bottom 7.76:1. */
  --brand-btn-top:   #0a7d99;
  --brand-btn-mid:   #0b6f8a;
  --brand-btn-bot:   #095a70;

  /* ---------------------------------------------------------------------
     SEMANTIC
     --danger is reserved for real incident/attack states in the product
     mockups. Keeping the brand off red is what makes that legible.
     --------------------------------------------------------------------- */
  --success:         #1ebd66;
  --success-soft:    #eafbf1;
  --success-strong:  #179c53;

  --warning:         #ffa211;
  --warning-soft:    #fff6df;
  --warning-medium:  #ffe9c1;
  --fg-warning:      #b36a00;

  --danger:          #e5484d;
  --danger-soft:     #fbebeb;
  --danger-medium:   #f5dbdb;
  --danger-strong:   #c73737;

  /* Data / accent hues for charts and map dots. */
  --indigo:          #473dfe;
  --purple:          #8e40cc;
  --teal:            #0d9488;
  --orange:          #fc5f35;
  --sky:             #0099ff;

  /* ---------------------------------------------------------------------
     RADIUS
     --------------------------------------------------------------------- */
  --r-xs:            4px;
  --r-sm:            6px;
  --r-md:            8px;
  --r-lg:            12px;
  --r-xl:            24px;
  --r-full:          9999px;

  /* ---------------------------------------------------------------------
     ELEVATION
     -1 is the hairline lift on buttons and resting cards.
     -2 is the layered ambient shadow for raised/hovered surfaces.
     -3 is the brand glow, used only on the featured pricing card.
     --------------------------------------------------------------------- */
  --elevation-1: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --elevation-2:
    0 0 0 1px rgba(0, 0, 0, .04),
    0 1px 1px .5px rgba(0, 0, 0, .04),
    0 3px 3px 1.5px rgba(0, 0, 0, .04),
    0 6px 6px -3px rgba(0, 0, 0, .04),
    0 12px 12px -6px rgba(0, 0, 0, .04),
    0 24px 24px -12px rgba(0, 0, 0, .04);
  --elevation-3: 0 0 24px rgba(8, 145, 178, .25);

  /* A solid 1px brand edge under a soft halo. The halo alone is too faint
     against --page to serve as a focus indicator. */
  --focus-ring: 0 0 0 1px var(--brand), 0 0 0 4px var(--brand-soft);

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --container:       1280px;
  --gutter:          48px;
  --section-y:       112px;

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --t-fast:          120ms;
  --t-base:          200ms;
  --t-slow:          340ms;
  --ease:            cubic-bezier(.4, 0, .2, 1);
  /* Slight overshoot-free easing for disclosures: quick to start, soft to land. */
  --ease-disclosure: cubic-bezier(.32, .72, 0, 1);

  /* ---------------------------------------------------------------------
     TYPE
     --------------------------------------------------------------------- */
  --font-display: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 860px) {
  :root {
    --gutter:    24px;
    --section-y: 72px;
  }
}