/* wp-content/plugins/notts-osteo-elements/assets/css/tokens.css
 *
 * The only file in this plugin allowed to contain a raw colour. Everything else — CSS,
 * and the WebGL shader uniforms, which read these back through getComputedStyle — resolves
 * against these custom properties. Elementor controls override them per widget instance;
 * a control left empty falls through to the value defined here.
 *
 * Author: Sean Burn
 */

:root {
  /* Ground. The live site is light, so the scene is a pale radiograph surface. */
  --nosteo-ground:      #edf0f1;
  --nosteo-ground-deep: #d8dfe3;
  --nosteo-ground-pool: #ffffff;

  /* Audited from nottsosteopathy.co.uk, 2026-07-28. These are the live site's own values,
     not approximations — see docs/audit-design-tokens.md for where each one is used. */
  --nosteo-ink:         #323e48;   /* dark slate, the live site's text and UI colour */
  --nosteo-tint:        #ecf4df;   /* pale green surface — by far its most used fill */
  --nosteo-tint-deep:   #ddebc4;   /* one step down, for hover on a tinted plate. Stays light
                                      enough that the dark line-art icons keep their contrast. */
  /* Neutral pale surface. The counterpart to the tint for a block that sits beside a tinted
     one: two greens side by side read as a mistake. */
  --nosteo-surface:     #f0f1ee;
  --nosteo-accent:      #fc7e00;   /* orange, used on nav and calls to action */
  --nosteo-grey:        #939aa6;
  --nosteo-grey-light:  #f3f4f6;
  --nosteo-muted:       #69737d;
  --nosteo-hair:        rgba(50, 62, 72, 0.16);
  --nosteo-hair-soft:   rgba(50, 62, 72, 0.08);

  /* Bone as rendered: a cool grey that darkens the ground rather than glowing on it. */
  --nosteo-bone:        #8fa3b2;
  --nosteo-bone-rim:    #ffffff;

  /* An area under assessment. */
  --nosteo-signal:      #dc5138;

  /* Brand green. Correct as ink on white. */
  --nosteo-resolve:     #78a333;
  /* Darkened variant — the brand green is borderline for small text on light. This is the
     text colour on the tint, which is where most small green type on the site sits. */
  --nosteo-resolve-ink: #4f6d22;
  /* Same hue lifted in value, for the glow only: seen through translucent bone the brand
     value goes muddy no matter how much opacity it is given. */
  --nosteo-resolve-scene: #93c93f;

  --nosteo-leader:      #dc5138;
  /* Text on the brand green — the button, and anything else sitting on a solid fill. */
  --nosteo-on-resolve:  #ffffff;
  /* Plain white as a token so no stylesheet outside this file needs a literal colour. */
  --nosteo-white:       #ffffff;

  /* Text box. The fill is deliberately translucent so the figure still reads behind it. */
  --nosteo-box-bg:            #d1d1d157;
  --nosteo-box-padding:       15px;
  --nosteo-box-border-width:  2px;
  --nosteo-box-border-colour: var(--nosteo-resolve);

  /* Rajdhani is the live site's face — audited from its stylesheets, which self-host
     rajdhani-light/regular/medium/semibold/bold as woff2. The weights below map onto those
     files. Self-host the same woff2s here before launch rather than calling Google Fonts:
     a clinic page should not wait on a third party to render its own navigation. */
  --nosteo-font: "Rajdhani", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nosteo-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --nosteo-weight-body:    400;
  --nosteo-weight-medium:  500;
  --nosteo-weight-strong:  600;

  --nosteo-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* A right arrow as a data URI, used as a mask so it inherits whatever colour it sits on.
     Single quotes inside, because the value itself is wrapped in double quotes. */
  --nosteo-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15m0 0l-6-6m6 6l-6 6'/%3E%3C/svg%3E");

  /* ---- layout -----------------------------------------------------------
     THE SITE GRID. Content is 1440px wide with 72px gutters on desktop.
     Every widget lays its content out inside these two values rather than
     inventing its own width — that is what keeps a page built from separate
     widgets reading as one column rather than a stack of near-misses.
     Full-bleed elements (bar backgrounds, the anatomy stage) span the viewport;
     it is their CONTENT that is constrained. */
  /* The vertical rhythm between full-width sections. ONE value, because every block having its own
     was the bug: hero 40px, intro 88px, service-double 0, home blocks 84px, footer 72px — so the
     gap between two sections depended on which two they happened to be, and the double block sat
     flush against the hero with no gap at all. The hero keeps its own smaller padding on purpose;
     its illustration bleeds through it. */
  /* Vertical breathing room inside a section, top and bottom.
     Two sections meeting therefore show TWICE this as a gap — which is the point of the second
     value below. Halved from the original clamp(40px, 5.5vw, 84px) so that a seam between two
     sections comes out at roughly what the original single value was. */
  --nosteo-section-pad-y: clamp(22px, 2.9vw, 42px);

  /* The bottom of the last block on a page, and the top of the footer. These are gaps rather than
     seams — nothing follows to add its own padding — so they keep the original, larger value. */
  --nosteo-section-gap-end: clamp(40px, 5.5vw, 84px);

  --nosteo-site-max: 1440px;
  --nosteo-site-pad: 20px;   /* mobile; the desktop value is set below */
}

@media (min-width: 1024px) {
  :root { --nosteo-site-pad: 72px; }
}

/* Editor only. An empty widget renders nothing on the live page, so it needs a visible, clickable
   body in the builder or it cannot be selected to fill in. */
.nosteo-empty {
  padding: 22px 24px;
  border: 1px dashed var(--nosteo-hair);
  background: var(--nosteo-grey-light);
  font-family: var(--nosteo-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--nosteo-muted);
}