/* OnsiteHub — Brand System v2.1 tokens
 * These are the in-code source of truth for the code components.
 * Names mirror what we'll register as Webflow Variables later, so the
 * components inherit the site's values when present and fall back to these.
 *
 * Fonts (Quicksand, Montserrat, JetBrains Mono) are loaded by the Webflow site
 * itself — we only reference the families here, never @import them. */

:host {
  /* Primary */
  --oh-cadmium: #ffec00; /* signature yellow — accent only, ~10% coverage */
  --oh-sun-soft: #fff7a8; /* tint: backgrounds, hover washes */

  /* Dark surface (replaces black) */
  --oh-adriatic: #0e5b7a;

  /* Neutrals — warm, replace pure black/white */
  --oh-paper: #faf6ec;
  --oh-cream: #f4eddf;
  --oh-stone: #dcd7cc;
  --oh-mist: #d7d4cc;
  --oh-slate: #6b6b72;
  --oh-charcoal: #2a2a2e;
  --oh-ink: #0e0e10; /* text only — never a surface */

  /* Supporting */
  --oh-olive: #6f8f3a;
  --oh-terracotta: #d96b3f;

  /* Type */
  --oh-font-display: "Quicksand", system-ui, sans-serif; /* headings */
  --oh-font-body: "Montserrat", system-ui, sans-serif; /* body */
  --oh-font-mono: "JetBrains Mono", ui-monospace, monospace; /* tags/labels */
}

:host, :host {
  /* Primary — signature highlighter */
  --oh-yellow:        #FFEC00;
  --oh-yellow-soft:   #FFFEEF;   /* Sunsoft — almost-white warm tint */
  --oh-stone:         #F4F4F4;   /* neutral light grey */

  /* Ink & paper (warm neutrals, for TEXT — not for surfaces) */
  --oh-ink:           #0E0E10;   /* text only */
  --oh-charcoal:      #2A2A2E;
  --oh-slate:         #6B6B72;
  --oh-mist:          #D7D4CC;
  --oh-paper:         #FAF6EC;   /* default page bg */
  --oh-cream:         #F4EDDF;   /* card bg */
  --oh-sand:          #E8D4A8;
  --oh-white:         #FFFFFF;

  /* Adriatic blue — the new DARK surface.
     Replaces black/ink for any tinted background. */
  --oh-adriatic:      #0E5B7A;
  --oh-adriatic-deep: #0A4359;
  --oh-adriatic-soft: #B9D4DE;

  /* Secondary support colours — no archetype mapping, just names */
  --oh-olive:         #6F8F3A;
  --oh-olive-soft:    #C9D6A8;
  --oh-terracotta:    #D96B3F;
  --oh-terracotta-soft:#F4C9B5;

  /* Semantic */
  --oh-success: var(--oh-olive);
  --oh-warning: #E8A33A;
  --oh-error:   #C9402E;
}
/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



    :host { scroll-behavior: smooth; }
    .oh-root { margin: 0; }
    ::selection { background: #FFEC00; color: #0E0E10; }
    input::placeholder, textarea::placeholder { color: #9A968C; }