/* ============================================================
   ONYX BIO LAB - Colors & Type Foundations
   Advanced Peptide Science · Clinical Luxury
   ============================================================
   Fonts (self-hosted, uploaded by brand):
     · Manrope            → UI / body / labels  (fonts/Manrope.ttf)
     · Panama             → serif display       (fonts/Panama-*.woff2)
   Montserrat is an optional local fallback for Manrope (NOT loaded from CDN).
   ============================================================ */

/* Montserrat не подгружается с CDN: только локальный fallback для Manrope, если установлен в системе. */

/* ---------- Self-hosted brand sans ---------- */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Self-hosted serif display: Panama (The Temporary State) ---------- */
@font-face {
  font-family: 'Panama';
  src: url('fonts/Panama-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Panama';
  src: url('fonts/Panama-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Panama';
  src: url('fonts/Panama-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* ---------- BRAND PALETTE (raw) ---------- */
  --ob-black:   #1A1A1A;   /* Onyx Black     - text, dark fields, primary */
  --ob-olive:   #7A826A;   /* Sage Olive     - brand accent, navigation   */
  --ob-olive-deep: #4E5A45;/* Deep Olive - primary button, dark cards     */
  --ob-gold:    #D2B06D;   /* Warm Gold      - premium accent, CTA        */
  --ob-ivory:   #F3EEE6;   /* Soft Ivory     - signature background        */
  --ob-sand:    #E5D7BF;   /* Champagne Sand - surfaces, cards, borders   */
  --ob-err:     #B93030;   /* Error / validation                          */
  --ob-ok:      #3B6D11;   /* Success / confirmed                         */

  /* Tints used across UI (derived, harmonious) */
  --ob-black-90: #2E2E2E;  /* primary hover */
  --ob-gold-hover: #C8A764;
  --ob-olive-tint: rgba(122,130,106,.14);
  --ob-gold-tint:  rgba(210,176,109,.18);
  --ob-gold-focus: rgba(210,176,109,.18);

  /* ---------- FIRM GRADIENT ---------- */
  --ob-gradient: linear-gradient(90deg, #1A1A1A 0%, #4A5540 35%, #7A826A 60%, #D2B06D 100%);
  --ob-gradient-mark: linear-gradient(135deg, #1A1A1A 0%, #7A826A 55%, #D2B06D 100%);

  /* ---------- SEMANTIC: TEXT ---------- */
  --color-text-primary:   #1A1A1A;
  --color-text-secondary: #5A5F52;   /* muted olive-gray */
  --color-text-tertiary:  #9A9686;   /* light sand-gray  */
  --color-text-inverse:   #F3EEE6;    /* on dark          */
  --color-text-gold:      #856800;    /* gold label on light */

  /* ---------- SEMANTIC: BACKGROUND ---------- */
  --color-background-primary:   #FBFAF6;  /* card / surface base (near-white ivory) */
  --color-background-secondary: #F3EEE6;  /* page / soft-ivory fill                 */
  --color-background-tertiary:  #E5D7BF;  /* sand panels                            */
  --color-background-inverse:   #1A1A1A;  /* dark sections                          */

  /* ---------- SEMANTIC: BORDER ---------- */
  --color-border-primary:   #7A826A;   /* emphasis / hover */
  --color-border-secondary: #D2B06D;   /* focus / gold     */
  --color-border-tertiary:  #E5D7BF;   /* hairlines, dividers (use at 0.5px) */
  --color-border-card:      #EAE2D4;   /* card outlines (lighter than hairline) */

  /* ---------- TYPE FAMILIES ---------- */
  --font-ui:      'Manrope', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Panama', Georgia, 'Times New Roman', serif;
  --font-mono:    'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
  /* aliases matching source doc */
  --ob-ui: var(--font-ui);
  --ob-sf: var(--font-serif);

  /* ---------- RADII ---------- */
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 10px;

  /* ---------- ELEVATION / FOCUS ---------- */
  --shadow-focus-gold: 0 0 0 3px rgba(210,176,109,.18);
  --shadow-focus-err:  0 0 0 3px rgba(185,48,48,.12);
  --shadow-card:       0 1px 2px rgba(26,26,26,.04);
  --shadow-raised:     0 6px 24px -8px rgba(26,26,26,.14);

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;

  /* ---------- MOTION ---------- */
  --ob-ease: cubic-bezier(.23, 1, .32, 1);   /* стандартный easing UI */
  --ob-duration-fast: 120ms;                 /* нажатия, scale          */
  --ob-duration: 160ms;                      /* hover, цвет, бордер     */
  --ob-duration-slow: 240ms;                 /* панели, модалки         */
}

/* ============================================================
   SEMANTIC TYPE ROLES
   Use these classes (or copy the rules) for consistent type.
   ============================================================ */

.ob-display {              /* Hero / brand wordmark */
  font-family: var(--font-serif);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--color-text-primary);
}

.ob-h1 {
  font-family: var(--font-serif);
  font-size: 34px; font-weight: 500; line-height: 1.1;
  color: var(--color-text-primary);
}

.ob-h2 {
  font-family: var(--font-serif);
  font-size: 24px; font-weight: 500; line-height: 1.15;
  color: var(--color-text-primary);
}

.ob-h3 {
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 500; line-height: 1.2;
  color: var(--color-text-primary);
}

.ob-body {
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 400; line-height: 1.65;
  letter-spacing: .01em;
  color: var(--color-text-primary);
}

.ob-body-sm {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 400; line-height: 1.55;
  color: var(--color-text-secondary);
}

.ob-caption {              /* подпись / meta */
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 300; line-height: 1.4;
  letter-spacing: .05em;
  color: var(--color-text-secondary);
}

.ob-overline {             /* section eyebrows - sentence case */
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600; line-height: 1.4;
  letter-spacing: 0;
  color: var(--color-text-secondary);
}

.ob-label {                /* form labels - sentence case */
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0;
  color: var(--color-text-secondary);
}

.ob-mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-text-secondary);
}

/* The brand wordmark gradient (apply to the ONYX text) */
.ob-mark-gradient {
  background: var(--ob-gradient-mark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}