/* ============================================================
   ORNIX LMS — BRAND GUIDELINES (CODE)
   Financial Services / Loan Management System
   Based on Ornix Finance Brand Guidelines v2.0
   ============================================================ */

:root {
  /* ---------- PRIMARY PALETTE ---------- */
  --ornix-navy:   #01244A;   /* Primary background/text, headings, wordmark — carries the brand weight */
  --ornix-orange: #FA7017;   /* Accent only — top of diamond mark, rules, highlights, CTAs (never >~15% of a layout) */
  --ornix-grey:   #595959;   /* Body copy, taglines, supporting text */
  --ornix-white:  #FFFFFF;   /* Page background, wordmark/mark base on navy */

  /* ---------- SUPPORTING TINTS (derived) ---------- */
  /* --ornix-orange is a decorative/large-surface orange only — it fails WCAG contrast
     as text or a small mark on white (2.84:1). Any place orange must be a *foreground*
     color (text, icon, a bar chart fill) uses --ornix-orange-dark instead (5.3:1). */
  --ornix-orange-dark:  #B14D0D;   /* Accessible orange — foreground text/icon/marks, solid "attention" badges */
  --ornix-orange-tint:  #FDE7D8;   /* Light orange wash for badges/backgrounds — pair with navy text, never orange text */
  --ornix-navy-60:      rgba(1, 36, 74, 0.6);
  --ornix-grey-tint:    #E9E9E9;   /* Dividers, disabled states, input borders */
  --ornix-portal-bg:    #F4F6FA;   /* Client-portal page background — cool, soft, lets white cards read cleanly */
  --ornix-good:         #0B3D1F;   /* On-time / verified / positive text, paired with --ornix-good-tint */
  --ornix-good-tint:    #E3F4E8;

  /* ---------- TYPOGRAPHY ---------- */
  --ornix-font-wordmark: Arial, Helvetica, sans-serif;   /* Bold geometric sans substitute — logo wordmark */
  --ornix-font-body:     'Inter', Arial, Helvetica, sans-serif;
  --ornix-font-tagline-tracking: 0.2em;

  /* ---------- SPACING / RADIUS ---------- */
  --ornix-radius-mark: 10px;
  --ornix-radius-card: 12px;
  --ornix-radius-pill: 999px;
}

/* ============================================================
   USAGE RULES (see Ornix_Brand_Guidelines.pdf v2.0 for the full spec)
   ============================================================

   CONTRAST — why buttons/badges below don't just mirror the guideline's color list:
   Pure brand orange (#FA7017) measures 2.84:1 against white — below the 3:1 floor
   even for large marks, let alone 4.5:1 text. So:
     - Orange as a BACKGROUND (buttons, solid badges) always pairs with NAVY text (5.5:1).
     - Orange as a FOREGROUND (text, icon, chart bar) uses --ornix-orange-dark (5.3:1),
       never the base --ornix-orange.
     - Light tint backgrounds (orange-tint, grey-tint) always pair with navy text/icons.
   This keeps every orange usage on-brand and accessible without exceptions to track.

   LOGO
   - Diamond icon (ornix_icon*.svg): orange ring across the top, navy (white on dark) across the bottom-left — never recolored.
   - Wordmark "ORNIX FINANCE": navy on light backgrounds, white on navy/dark backgrounds.
   - Tagline "Borrow Smarter. Grow Faster.": grey on light backgrounds, light grey on navy.
   - Clear space on all sides equal to the diamond mark's height. Minimum width: 120px
     (full lockup), 32px (mark alone).

   DO NOT
   - Do not recolor the diamond mark outside orange/navy/white.
   - Do not stretch, skew, rotate, or add drop shadows/effects to the logo.
   - Do not let orange cover more than ~15% of a given layout — navy carries the weight.
   ============================================================ */

/* ---------- REUSABLE COMPONENTS ---------- */

.ornix-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ornix-orange);
  color: var(--ornix-navy);
  border: none;
  border-radius: var(--ornix-radius-pill);
  font-family: var(--ornix-font-body);
  font-weight: 700;
  padding: 0.85em 1.9em;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.15s ease;
}

.ornix-button-primary:hover,
.ornix-button-primary:focus-visible {
  filter: brightness(0.93);
}

.ornix-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ornix-navy);
  border: 1.5px solid var(--ornix-grey-tint);
  border-radius: var(--ornix-radius-pill);
  font-family: var(--ornix-font-body);
  font-weight: 700;
  padding: 0.85em 1.9em;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ornix-button-secondary:hover,
.ornix-button-secondary:focus-visible {
  border-color: var(--ornix-orange-dark);
  background: var(--ornix-orange-tint);
}

.ornix-card {
  background: var(--ornix-white);
  border: 1px solid var(--ornix-grey-tint);
  border-radius: var(--ornix-radius-card);
}

.ornix-tagline {
  color: var(--ornix-grey);
  text-transform: uppercase;
  letter-spacing: var(--ornix-font-tagline-tracking);
  font-size: 0.7em;
}