/* ═══════════════════════════════════════════════════════════════
   ONIX DESIGN SYSTEM — single source of truth
   Visual language modelled on Upwork: green primary, near-black
   green-tinted text, soft green-tinted neutrals, small radii, flat
   surfaces, hairline borders. No gradients/glow/glass/blobs.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand — Upwork green ──────────────────────── */
  --onix-primary:        #14a800;   /* Upwork green */
  --onix-primary-dark:   #108a00;   /* hover / pressed */
  --onix-primary-darker: #0d6b00;   /* text on light green */
  --onix-primary-light:  #f2fbf2;   /* very light green tint */
  --onix-primary-soft:   rgba(20, 168, 0, 0.10);

  --onix-secondary:      #14a800;   /* one accent only */
  --onix-secondary-dark: #108a00;

  --onix-accent:         #f2b600;   /* Upwork gold (Top Rated) */
  --onix-accent-dark:    #8a6500;   /* text-safe on light */

  /* ── Semantic state (reserved for status only) ─── */
  --onix-success:        #108a00;
  --onix-success-dark:   #0d6b00;
  --onix-danger:         #c0392b;
  --onix-warning:        #f2b600;
  --onix-info:           #086add;   /* Upwork science blue */

  /* ── Neutrals (green-tinted) ───────────────────── */
  --onix-dark:           #001e00;   /* Upwork near-black */
  --onix-dark-2:         #0d2b0d;
  --onix-ink:            #001e00;
  --onix-text:           #5e6d55;   /* body text */
  --onix-text-strong:    #001e00;   /* headings  */
  --onix-muted:          #5e6d55;
  --onix-muted-light:    #8b9a86;
  --onix-surface:        #f7faf7;   /* page bg */
  --onix-card:           #ffffff;
  --onix-border:         #e4ebe4;
  --onix-border-strong:  #d5e0d5;

  /* ── Generic aliases (legacy markup compatibility) ─ */
  --primary:             var(--onix-primary);
  --secondary:           var(--onix-primary);
  --accent:              var(--onix-accent);
  --dark:                var(--onix-dark);
  --light:               var(--onix-surface);
  --text:                var(--onix-text);
  --text-strong:         var(--onix-text-strong);
  --muted:               var(--onix-muted);
  --muted-light:         var(--onix-muted-light);
  --surface:             var(--onix-surface);
  --border:              var(--onix-border);
  --border-strong:       var(--onix-border-strong);

  /* ── Typography ───────────────────────────────── */
  --onix-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --onix-font-script: 'Dancing Script', cursive;

  /* ── Radius (Upwork-like, small) ───────────────── */
  --onix-radius-sm: 6px;
  --onix-radius:    8px;
  --onix-radius-lg: 12px;
  --onix-radius-xl: 16px;
  --onix-radius-pill: 999px;

  /* ── Shadows (barely-there, Upwork style) ─────── */
  --onix-shadow-xs: 0 1px 2px rgba(0, 30, 0, 0.04);
  --onix-shadow-sm: 0 1px 4px rgba(0, 30, 0, 0.08);
  --onix-shadow:    0 4px 12px rgba(0, 30, 0, 0.08);
  --onix-shadow-lg: 0 8px 24px rgba(0, 30, 0, 0.10);

  /* ── Layout ───────────────────────────────────── */
  --onix-nav-h: 72px;
  --onix-section-y: clamp(56px, 7vw, 96px);
  --onix-container: 1200px;

  /* ── Bootstrap theme bridge ───────────────────── */
  /* Remap Bootstrap's primary to Upwork green so legacy utility
     classes (.bg-primary, .text-primary, .btn-outline-primary,
     .badge.bg-primary) inherit the brand palette. */
  --bs-primary: #14a800;
  --bs-primary-rgb: 20, 168, 0;
  --bs-link-color: #14a800;
  --bs-link-color-rgb: 20, 168, 0;
  --bs-link-hover-color: #108a00;
  --bs-link-hover-color-rgb: 16, 138, 0;
}

/* ── Base reset (non-aggressive) ───────────────── */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  -webkit-tap-highlight-color: transparent;
  font-family: var(--onix-font);
  color: var(--onix-text);
  background: var(--onix-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--onix-text-strong);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
a { text-decoration: none; color: var(--onix-primary); transition: color .15s; }
a:hover { color: var(--onix-primary-dark); }
img { max-width: 100%; }
::selection { background: var(--onix-primary-soft); color: var(--onix-primary-darker); }

/* ── Section rhythm ─────────────────────────────── */
.onix-section { padding-block: var(--onix-section-y); }
.onix-section-dark { background: var(--onix-dark); color: #fff; }

.section-title { font-size: clamp(1.6rem, 3.2vw, 2.25rem); font-weight: 700; margin-bottom: 12px; letter-spacing: -0.02em; }
.onix-section-dark .section-title { color: #fff; }
.section-sub { color: var(--onix-muted); font-size: clamp(0.95rem, 1.4vw, 1.05rem); max-width: 620px; margin-inline: auto; }
.onix-section-dark .section-sub { color: rgba(255,255,255,.66); }

/* Small section eyebrow/label (previously undefined) */
.section-label {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px; border-radius: var(--onix-radius-pill);
  background: var(--onix-primary-soft);
  color: var(--onix-primary-dark);
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.section-label i { font-size: 0.8rem; }
.onix-section-dark .section-label { background: rgba(255,255,255,.10); color: #c7d2fe; }

/* ── Buttons — one solid language ───────────────── */
.btn {
  font-weight: 600;
  border-radius: var(--onix-radius);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}

.btn-primary,
.btn-primary-glow,
.btn.onix-btn-primary {
  background: var(--onix-primary);
  color: #fff;
  border: 1px solid var(--onix-primary);
  padding: 11px 22px;
  border-radius: var(--onix-radius);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  box-shadow: var(--onix-shadow-xs);
}
.btn-primary:hover,
.btn-primary-glow:hover,
.btn.onix-btn-primary:hover {
  background: var(--onix-primary-dark);
  border-color: var(--onix-primary-dark);
  color: #fff;
  box-shadow: var(--onix-shadow-sm);
}
.btn-primary:focus-visible,
.btn-primary-glow:focus-visible { outline: 3px solid var(--onix-primary-soft); outline-offset: 2px; }

.btn-outline-primary {
  color: var(--onix-primary); border: 1px solid var(--onix-border-strong);
  border-radius: var(--onix-radius); background: #fff;
}
.btn-outline-primary:hover { background: var(--onix-primary); border-color: var(--onix-primary); color: #fff; }

  /* ── Semantic action buttons (status/destructive) ── */
  .btn-success { background: var(--onix-success); border: 1px solid var(--onix-success); color: #fff; }
  .btn-success:hover { background: var(--onix-success-dark); border-color: var(--onix-success-dark); color: #fff; }
  .btn-outline-success { color: var(--onix-success); border: 1px solid var(--onix-border-strong); background: #fff; }
  .btn-outline-success:hover { background: var(--onix-success); border-color: var(--onix-success); color: #fff; }

  .btn-danger { background: var(--onix-danger); border: 1px solid var(--onix-danger); color: #fff; }
  .btn-danger:hover { background: #a53125; border-color: #a53125; color: #fff; }
  .btn-outline-danger { color: var(--onix-danger); border: 1px solid var(--onix-border-strong); background: #fff; }
  .btn-outline-danger:hover { background: var(--onix-danger); border-color: var(--onix-danger); color: #fff; }

  .btn-dark { background: var(--onix-text-strong); border: 1px solid var(--onix-text-strong); color: #fff; }
  .btn-dark:hover { background: var(--onix-dark-2); border-color: var(--onix-dark-2); color: #fff; }
  .btn-outline-dark { color: var(--onix-text-strong); border: 1px solid var(--onix-border-strong); background: #fff; }
  .btn-outline-dark:hover { background: var(--onix-text-strong); border-color: var(--onix-text-strong); color: #fff; }

  .btn-warning { background: var(--onix-warning); border: 1px solid var(--onix-warning); color: var(--onix-text-strong); }
  .btn-warning:hover { background: #d9a300; border-color: #d9a300; color: var(--onix-text-strong); }
  .btn-outline-warning { color: var(--onix-accent-dark); border: 1px solid var(--onix-border-strong); background: #fff; }
  .btn-outline-warning:hover { background: var(--onix-warning); border-color: var(--onix-warning); color: var(--onix-text-strong); }

  .btn-outline-secondary { color: var(--onix-muted); border: 1px solid var(--onix-border-strong); background: #fff; }
  .btn-outline-secondary:hover { background: var(--onix-surface); color: var(--onix-text-strong); border-color: var(--onix-border-strong); }

  .btn:disabled, .btn.disabled { opacity: .5; box-shadow: none; }

/* On dark surfaces */
.btn-outline-glass,
.btn-outline-light {
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  padding: 11px 22px;
  border-radius: var(--onix-radius);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-outline-glass:hover,
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); color: #fff; }

/* Secondary/ghost for light surfaces */
.btn-secondary {
  background: #fff; color: var(--onix-text-strong);
  border: 1px solid var(--onix-border-strong); border-radius: var(--onix-radius);
  font-weight: 600;
}
.btn-secondary:hover { background: var(--onix-surface); color: var(--onix-text-strong); border-color: var(--onix-border-strong); }

/* ── Cards ──────────────────────────────────────── */
.onix-card,
.glass-card {
  background: var(--onix-card);
  border: 1px solid var(--onix-border);
  border-radius: var(--onix-radius-xl);
  box-shadow: var(--onix-shadow-xs);
  transition: border-color .15s, box-shadow .15s;
}
.onix-card:hover,
.glass-card:hover { border-color: var(--onix-border-strong); box-shadow: var(--onix-shadow-sm); }

/* ── Forms ──────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--onix-radius);
  border: 1px solid var(--onix-border-strong);
  padding: 11px 13px;
  font-size: .95rem;
  color: var(--onix-text-strong);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--onix-primary);
  box-shadow: 0 0 0 3px var(--onix-primary-soft);
}
.form-label { font-weight: 600; color: var(--onix-text-strong); margin-bottom: 6px; font-size: .875rem; }

/* ── Badges & pills ─────────────────────────────── */
.onix-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 4px 10px; border-radius: var(--onix-radius-pill);
  background: var(--onix-primary-soft); color: var(--onix-primary-dark);
}
.onix-badge-primary { background: var(--onix-primary-soft); color: var(--onix-primary-dark); }
.onix-badge-accent  { background: rgba(180,83,9,.12); color: var(--onix-accent-dark); }
.onix-badge-success { background: rgba(4,120,87,.12); color: var(--onix-success-dark); }

/* ── Avatars ────────────────────────────────────── */
.onix-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; flex-shrink: 0;
  background: var(--onix-primary);
}

/* ── Decorative elements: neutralised ──────────── */
/* Blobs / gradient text / glow were removed as part of the design
   audit. The class names remain as no-ops so legacy markup that still
   references them renders nothing rather than broken decoration. */
.blob, .blob-1, .blob-2 { display: none !important; }
.text-gradient, .text-gradient-warm { color: var(--onix-primary); background: none; -webkit-text-fill-color: currentColor; }

/* ── Tables ─────────────────────────────────────── */
.table { color: var(--onix-text); border-color: var(--onix-border); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .7rem .75rem; border-bottom-color: var(--onix-border); }
.table > thead { background: var(--onix-surface); }
.table > thead th {
  color: var(--onix-muted); font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em; border-bottom-color: var(--onix-border);
  white-space: nowrap;
}
.table > tbody tr:hover { background: var(--onix-surface); }
.table td { font-size: .875rem; vertical-align: middle; }

/* ── Mobile bottom safe area ────────────────────── */
@media (max-width: 767.98px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  /* iOS Safari zooms the viewport on focus for inputs under 16px. */
  .form-control, .form-select, input, select, textarea { font-size: 16px; }
}

/* ── Anchor offset for the fixed nav ────────────── */
/* Nav height differs per breakpoint; keep section headings clear of it
   instead of relying on a hard-coded JS offset. */
section[id] { scroll-margin-top: 84px; }
@media (max-width: 991px) { section[id] { scroll-margin-top: 72px; } }

/* ── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}