/* =============================================================================
   Oda Solutions — Design Tokens & Semantic Styles  (v2 — rebrand 2026-04)
   Source of truth for colors, type, spacing, radii, shadows, motion.
   Brand source: ODA BRAND pack (ODA solutions - colors.pdf + SVG logo set).

   Identity shift: old indigo→cyan gradient system replaced with a disciplined
   ODA Blue + Deep Navy + Bone monochrome. Gradients retired. Glass retired.
   Product accents kept as slim chromatic highlights only.
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Brand palette (from ODA solutions - colors.pdf) ------------- */
  --oda-blue:          #293f99;   /* primary — "ODA Blue", CMYK 98/91/0/0 */
  --oda-blue-rgb:      41, 63, 153;
  --oda-blue-press:    #1f3180;   /* pressed / hover darker (hand-tuned -10L) */
  --oda-blue-soft:     #e5e9f5;   /* 10% tint on bone */

  --oda-navy:          #0f122f;   /* deep — CMYK 94/88/48/64. Inks, bg-dark */
  --oda-navy-rgb:      15, 18, 47;
  --oda-navy-soft:     #1a1e42;   /* lifted navy for inner surfaces */

  --oda-white:         #ffffff;
  --oda-bone:          #f5f3ee;   /* warm off-white — the new "light" canvas */
  --oda-bone-2:        #ecebe4;   /* stepped surface on bone */
  --oda-paper:         #faf9f6;   /* lightest tint, card surface on bone */

  /* Ink scale — neutral warm grays that sit on bone */
  --oda-ink-1:         #0f122f;   /* = navy, body headlines */
  --oda-ink-2:         #2a2d44;   /* body text */
  --oda-ink-3:         #55586d;   /* muted */
  --oda-ink-4:         #8a8c9b;   /* hint / placeholder */
  --oda-rule:          #d9d7cf;   /* hairline on bone */
  --oda-rule-strong:   #b6b3a8;

  /* ---------- Semantic (supporting, used sparingly) ---------------------- */
  --oda-success:       #2f7d5b;   /* forest — not emerald */
  --oda-warning:       #b07400;   /* amber — not yellow */
  --oda-danger:        #a83239;   /* deep red — not vermilion */
  --oda-info:          var(--oda-blue);

  /* ---------- Product accents (chromatic highlights, muted) -------------- */
  --oda-accent-aurapos:  var(--oda-blue);       /* main product = brand blue */
  --oda-accent-xchange:  #2b6f9b;               /* steel — currency/fx */
  --oda-accent-nuvia:    #5c4a8a;               /* muted purple — AI docs */
  --oda-accent-fature:   #2f7d5b;               /* forest — e-invoicing */

  /* ---------- Type ------------------------------------------------------- */
  --oda-font-display:  "Space Grotesk", "Inter", system-ui, sans-serif;
  --oda-font-sans:     "Inter", system-ui, -apple-system, sans-serif;
  --oda-font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* Display scale — narrower than before (more editorial, less SaaS) */
  --oda-size-display-1: 4.5rem;   /* 72 — hero */
  --oda-size-display-2: 3.25rem;  /* 52 — page opener */
  --oda-size-display-3: 2.25rem;  /* 36 — section title */
  --oda-size-h1:        1.875rem; /* 30 */
  --oda-size-h2:        1.5rem;   /* 24 */
  --oda-size-h3:        1.25rem;  /* 20 */
  --oda-size-h4:        1.125rem; /* 18 */
  --oda-size-lead:      1.1875rem;/* 19 — lead paragraph */
  --oda-size-body:      1rem;     /* 16 */
  --oda-size-small:     0.875rem; /* 14 */
  --oda-size-micro:     0.75rem;  /* 12 */

  --oda-leading-tight:  0.98;
  --oda-leading-heading:1.12;
  --oda-leading-body:   1.55;

  --oda-tracking-tight:   -0.035em;  /* hero — Space Grotesk wants tight */
  --oda-tracking-heading: -0.02em;
  --oda-tracking-body:    -0.005em;
  --oda-tracking-eyebrow:  0.14em;   /* wide, editorial eyebrows */

  --oda-weight-body:    400;
  --oda-weight-medium:  500;
  --oda-weight-semi:    600;
  --oda-weight-bold:    700;

  /* ---------- Spacing (4px base) ----------------------------------------- */
  --oda-space-1:  0.25rem;
  --oda-space-2:  0.5rem;
  --oda-space-3:  1rem;
  --oda-space-4:  1.5rem;
  --oda-space-5:  2.5rem;
  --oda-space-6:  4rem;
  --oda-space-7:  6rem;
  --oda-space-8:  9rem;

  /* ---------- Radii — tightened (less SaaS bubble, more engineered) ----- */
  --oda-radius-0:    0;
  --oda-radius-sm:   2px;
  --oda-radius-md:   4px;      /* default card / button corner */
  --oda-radius-lg:   8px;      /* larger cards */
  --oda-radius-xl:   12px;     /* hero-ish panels */
  --oda-radius-pill: 9999px;   /* pills only where clearly a tag */

  /* ---------- Shadows — very restrained, mostly flat -------------------- */
  --oda-shadow-0:  none;
  --oda-shadow-1:  0 1px 0 0 var(--oda-rule);                   /* hairline baseline */
  --oda-shadow-2:  0 1px 2px 0 rgba(15, 18, 47, 0.06);          /* subtle card */
  --oda-shadow-3:  0 8px 24px -12px rgba(15, 18, 47, 0.20);     /* hover / floating */
  --oda-shadow-focus: 0 0 0 3px rgba(41, 63, 153, 0.25);        /* keyboard ring */

  /* ---------- Motion ---------------------------------------------------- */
  --oda-ease:             cubic-bezier(0.2, 0, 0, 1);
  --oda-duration-fast:    0.15s;
  --oda-duration-base:    0.25s;

  /* ---------- Layout ---------------------------------------------------- */
  --oda-container-max:  1280px;
  --oda-nav-height:     4.5rem;
}

/* =============================================================================
   Base / semantic defaults
   ============================================================================= */
html { scroll-behavior: smooth; }

body {
  font-family: var(--oda-font-sans);
  font-weight: var(--oda-weight-body);
  font-size: var(--oda-size-body);
  line-height: var(--oda-leading-body);
  letter-spacing: var(--oda-tracking-body);
  color: var(--oda-ink-2);
  background: var(--oda-bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--oda-font-display);
  color: var(--oda-ink-1);
  font-weight: var(--oda-weight-bold);
  letter-spacing: var(--oda-tracking-heading);
  line-height: var(--oda-leading-heading);
  margin: 0 0 0.5em;
}
h1 { font-size: var(--oda-size-h1); }
h2 { font-size: var(--oda-size-h2); }
h3 { font-size: var(--oda-size-h3); }
h4 { font-size: var(--oda-size-h4); }

p { margin: 0 0 1rem; }
small { font-size: var(--oda-size-small); color: var(--oda-ink-3); }

a { color: var(--oda-blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--oda-blue); color: var(--oda-white); }

/* Display scale utilities */
.oda-display-1 { font-family: var(--oda-font-display); font-size: var(--oda-size-display-1); font-weight: var(--oda-weight-bold); letter-spacing: var(--oda-tracking-tight); line-height: var(--oda-leading-tight); color: var(--oda-ink-1); }
.oda-display-2 { font-family: var(--oda-font-display); font-size: var(--oda-size-display-2); font-weight: var(--oda-weight-bold); letter-spacing: var(--oda-tracking-tight); line-height: 1.05; color: var(--oda-ink-1); }
.oda-display-3 { font-family: var(--oda-font-display); font-size: var(--oda-size-display-3); font-weight: var(--oda-weight-bold); letter-spacing: var(--oda-tracking-heading); line-height: 1.12; color: var(--oda-ink-1); }

.oda-lead   { font-size: var(--oda-size-lead); color: var(--oda-ink-3); line-height: 1.5; max-width: 60ch; }
.oda-muted  { color: var(--oda-ink-3); }

/* Eyebrow — editorial uppercase, wide tracking, monospace accent */
.oda-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--oda-font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--oda-tracking-eyebrow);
  color: var(--oda-blue);
}
.oda-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

/* Badge — on-bone chromatic tag */
.oda-badge {
  display: inline-block;
  padding: 0.35em 0.75em;
  border-radius: var(--oda-radius-sm);
  font-family: var(--oda-font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--oda-blue-soft);
  color: var(--oda-blue);
}
.oda-badge--outline { background: transparent; border: 1px solid var(--oda-rule-strong); color: var(--oda-ink-2); }
.oda-badge--navy    { background: var(--oda-navy); color: var(--oda-white); }
.oda-badge--fature  { background: rgba(47, 125, 91, 0.12); color: var(--oda-accent-fature); }
.oda-badge--xchange { background: rgba(43, 111, 155, 0.12); color: var(--oda-accent-xchange); }
.oda-badge--nuvia   { background: rgba(92, 74, 138, 0.12); color: var(--oda-accent-nuvia); }

/* =============================================================================
   Components — button, card, field, icon-box
   ============================================================================= */

/* Button — sharp, rectangular, confident */
.oda-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--oda-font-sans);
  font-weight: var(--oda-weight-semi);
  font-size: 0.9375rem;
  line-height: 1;
  padding: 0.875rem 1.5rem;
  border-radius: var(--oda-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--oda-duration-fast) var(--oda-ease),
              color var(--oda-duration-fast) var(--oda-ease),
              border-color var(--oda-duration-fast) var(--oda-ease);
}
.oda-btn:focus-visible { outline: none; box-shadow: var(--oda-shadow-focus); }

.oda-btn--primary {
  background: var(--oda-blue);
  color: var(--oda-white);
  border-color: var(--oda-blue);
}
.oda-btn--primary:hover { background: var(--oda-blue-press); border-color: var(--oda-blue-press); color: var(--oda-white); text-decoration: none; }

.oda-btn--navy {
  background: var(--oda-navy);
  color: var(--oda-white);
  border-color: var(--oda-navy);
}
.oda-btn--navy:hover { background: #05081f; color: var(--oda-white); text-decoration: none; }

.oda-btn--outline {
  background: transparent;
  color: var(--oda-ink-1);
  border-color: var(--oda-ink-1);
}
.oda-btn--outline:hover { background: var(--oda-ink-1); color: var(--oda-bone); text-decoration: none; }

.oda-btn--ghost {
  background: transparent;
  color: var(--oda-ink-1);
  border-color: transparent;
  padding-left: 0.75rem; padding-right: 0.75rem;
}
.oda-btn--ghost:hover { background: rgba(15, 18, 47, 0.06); text-decoration: none; }

.oda-btn--bone-on-navy {
  background: var(--oda-bone);
  color: var(--oda-navy);
  border-color: var(--oda-bone);
}
.oda-btn--bone-on-navy:hover { background: var(--oda-white); color: var(--oda-navy); text-decoration: none; }

.oda-btn--sm { padding: 0.5rem 1rem; font-size: 0.8125rem; }
.oda-btn--lg { padding: 1.125rem 2rem; font-size: 1rem; }

/* Card — paper on bone, 1px rule, no rounding bubble, no glass */
.oda-card {
  background: var(--oda-paper);
  border: 1px solid var(--oda-rule);
  border-radius: var(--oda-radius-lg);
  padding: 2rem;
  transition: border-color var(--oda-duration-base) var(--oda-ease),
              transform var(--oda-duration-base) var(--oda-ease);
}
.oda-card:hover { border-color: var(--oda-ink-4); }

.oda-card--flat       { background: transparent; box-shadow: none; }
.oda-card--navy       { background: var(--oda-navy); border-color: var(--oda-navy); color: var(--oda-bone); }
.oda-card--navy h1, .oda-card--navy h2, .oda-card--navy h3, .oda-card--navy h4 { color: var(--oda-white); }
.oda-card--blue       { background: var(--oda-blue); border-color: var(--oda-blue); color: var(--oda-white); }
.oda-card--blue h1, .oda-card--blue h2, .oda-card--blue h3, .oda-card--blue h4 { color: var(--oda-white); }

/* Icon-box — flat filled tile, square by default */
.oda-icon-box {
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--oda-radius-md);
  background: var(--oda-navy);
  color: var(--oda-bone);
}
.oda-icon-box--blue    { background: var(--oda-blue);        color: var(--oda-white); }
.oda-icon-box--outline { background: transparent; color: var(--oda-ink-1); border: 1px solid var(--oda-ink-1); }
.oda-icon-box--bone    { background: var(--oda-bone-2);      color: var(--oda-navy); }
.oda-icon-box--lg      { width: 3.5rem; height: 3.5rem; }

/* Field / input */
.oda-label { display: block; font-family: var(--oda-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--oda-ink-3); margin-bottom: 0.5rem; }
.oda-field {
  display: block; width: 100%;
  font-family: var(--oda-font-sans); font-size: 1rem;
  padding: 0.75rem 0.875rem;
  background: var(--oda-white);
  color: var(--oda-ink-1);
  border: 1px solid var(--oda-rule-strong);
  border-radius: var(--oda-radius-md);
  transition: border-color var(--oda-duration-fast) var(--oda-ease), box-shadow var(--oda-duration-fast) var(--oda-ease);
}
.oda-field:focus { outline: none; border-color: var(--oda-blue); box-shadow: var(--oda-shadow-focus); }

/* =============================================================================
   Section backgrounds
   ============================================================================= */
.oda-bg-bone    { background: var(--oda-bone);      color: var(--oda-ink-2); }
.oda-bg-paper   { background: var(--oda-paper);     color: var(--oda-ink-2); }
.oda-bg-navy    { background: var(--oda-navy);      color: var(--oda-bone); }
.oda-bg-blue    { background: var(--oda-blue);      color: var(--oda-white); }
.oda-bg-white   { background: var(--oda-white);     color: var(--oda-ink-2); }
.oda-bg-navy h1, .oda-bg-navy h2, .oda-bg-navy h3, .oda-bg-navy h4 { color: var(--oda-white); }
.oda-bg-blue h1, .oda-bg-blue h2, .oda-bg-blue h3, .oda-bg-blue h4 { color: var(--oda-white); }

/* Subtle grid / rule on bone — editorial feel */
.oda-rule-top    { border-top:    1px solid var(--oda-rule); }
.oda-rule-bottom { border-bottom: 1px solid var(--oda-rule); }
.oda-rule-strong { border-color:  var(--oda-rule-strong); }

/* Mono code */
.oda-code { font-family: var(--oda-font-mono); font-size: 0.875rem; color: var(--oda-ink-1); background: var(--oda-bone-2); padding: 0.15em 0.4em; border-radius: var(--oda-radius-sm); }

/* =============================================================================
   Motion
   ============================================================================= */
@keyframes oda-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.oda-rise { animation: oda-rise var(--oda-duration-base) var(--oda-ease) both; }