/* ============================================================
   OC Labs — Brand Design Tokens
   Sampled from the OptiCraft Laboratories brand sheet.
   Clinical / precision-tech identity. Confirm exact fonts.
   ============================================================ */
:root {
  /* Core palette */
  --oc-navy:        #071F3F;  /* primary dark / headers */
  --oc-navy-2:      #0B2959;  /* secondary navy */
  --oc-blue:        #1751CC;  /* optical blue — primary action */
  --oc-blue-deep:   #103FA0;  /* hover/active for blue */
  --oc-sky:         #7CB3FB;  /* light accent / highlights */
  --oc-sky-soft:    #E8F1FF;  /* tints, hover backgrounds */
  --oc-steel:       #9DA7B4;  /* borders / icons (decorative) */
  --oc-steel-text:  #647082;  /* muted TEXT — WCAG AA on white (5.0:1) */
  --oc-bg:          #F3F4F6;  /* page background */
  --oc-surface:     #FFFFFF;  /* cards / panels */
  --oc-ink:         #0D1B2A;  /* body text */
  --oc-ink-soft:    #46566B;  /* secondary text */
  --oc-line:        #DFE3E8;  /* hairline borders */

  /* Status */
  --oc-success:     #2E9E4F;
  --oc-warning:     #E0A800;
  --oc-error:       #D64545;

  /* Typography (confirm against brand sheet fonts) */
  --oc-font-head: "Montserrat", "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
  --oc-font-body: "Inter", "Segoe UI", system-ui, Helvetica, Arial, sans-serif;
  --oc-h1: clamp(2rem, 4vw, 3rem);
  --oc-h2: clamp(1.5rem, 3vw, 2.1rem);
  --oc-h3: 1.25rem;

  /* Spacing scale */
  --oc-sp-1: 4px;  --oc-sp-2: 8px;  --oc-sp-3: 12px;
  --oc-sp-4: 16px; --oc-sp-5: 24px; --oc-sp-6: 32px;
  --oc-sp-7: 48px; --oc-sp-8: 64px;

  /* Radius & shadow */
  --oc-radius: 12px;
  --oc-radius-sm: 8px;
  --oc-shadow: 0 2px 10px rgba(7,31,63,.08);
  --oc-shadow-lg: 0 8px 30px rgba(7,31,63,.14);

  /* Layout */
  --oc-maxw: 1200px;
}

/* Shared primitives used across OC Labs sections */
.oc-container { max-width: var(--oc-maxw); margin: 0 auto; padding: 0 var(--oc-sp-5); }
.oc-btn {
  display: inline-flex; align-items: center; gap: var(--oc-sp-2);
  background: var(--oc-blue); color: #fff; border: none;
  padding: 12px 22px; border-radius: var(--oc-radius-sm);
  font: 600 1rem/1 var(--oc-font-head); cursor: pointer;
  text-decoration: none; transition: background .15s ease, transform .05s ease;
}
.oc-btn:hover { background: var(--oc-blue-deep); }
.oc-btn:active { transform: translateY(1px); }
.oc-btn--ghost { background: transparent; color: var(--oc-blue); border: 1.5px solid var(--oc-blue); }
.oc-btn--ghost:hover { background: var(--oc-sky-soft); }
.oc-eyebrow { text-transform: uppercase; letter-spacing: 3px; font-size: .75rem; color: var(--oc-blue); font-weight: 700; }

/* Accessible focus states for OC interactive elements */
.oc-btn:focus-visible,
.oc-ic:focus-visible,
.oc-cfg__opt:focus-visible,
.oc-device:focus-visible,
.oc-guide:focus-visible,
.oc-header__nav a:focus-visible,
.oc-footer a:focus-visible,
.oc-form input:focus-visible,
.oc-form select:focus-visible,
.oc-form textarea:focus-visible,
.oc-cfg__rxtable input:focus-visible,
.oc-mnav summary:focus-visible { outline: 3px solid var(--oc-sky); outline-offset: 2px; border-radius: 4px; }