/* ==========================================================================
   Beagel Verify · Design Tokens · v2 (Institutional)
   Banking-grade. Cooler bone, deep navy, hairline rules, tabular figures.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Paper · Surface · Ink ---------- */
  --c-paper:        #EFEAE0;       /* cool bone, like 90gsm Conqueror */
  --c-paper-2:      #E5DFD2;
  --c-paper-3:      #D6CFBE;
  --c-surface:      #FBFAF6;       /* off-white card */
  --c-surface-pure: #FFFFFF;
  --c-surface-sub:  #F4F0E6;

  --c-ink:          #0B0F16;
  --c-ink-2:        #1F2530;
  --c-ink-3:        #4B5462;
  --c-ink-4:        #7C8390;
  --c-ink-5:        #BFC4CD;
  --c-ink-6:        #DEE0E5;

  --c-line:         rgba(11,15,22,0.10);
  --c-line-2:       rgba(11,15,22,0.18);
  --c-line-strong:  rgba(11,15,22,0.32);
  --c-line-on-dark: rgba(247,242,231,0.16);

  /* ---------- Brand ---------- */
  --c-navy:         #0F2447;       /* primary action, institutional blue */
  --c-navy-deep:    #071328;
  --c-navy-soft:    #1B3A6E;
  --c-navy-tint:    #DDE3EF;

  --c-bordeaux:     #6B2230;       /* heraldic, rare — for stamps only */
  --c-bordeaux-deep:#4A1620;
  --c-bordeaux-tint:#F1DBDD;

  --c-stamp:        #8B6F3D;       /* notarial brown-gold */
  --c-stamp-tint:   #EFE6CF;

  /* Compatibility aliases for the running portal implementation. */
  --c-forest:       var(--c-verified);
  --c-forest-deep:  #122A22;
  --c-forest-tint:  var(--c-verified-bg);
  --c-gold:         var(--c-stamp);
  --c-gold-deep:    #6B5428;
  --c-gold-tint:    var(--c-stamp-tint);
  --c-success:      var(--c-verified);
  --c-success-bg:   var(--c-verified-bg);
  --c-warning:      var(--c-pending);
  --c-warning-bg:   var(--c-pending-bg);

  /* ---------- Status ---------- */
  --c-verified:     #1B3A2F;       /* British racing green, muted */
  --c-verified-bg:  #DCE5DE;
  --c-pending:      #7A5A12;
  --c-pending-bg:   #F1E8CE;
  --c-danger:       #6B2230;
  --c-danger-bg:    #F1DBDD;
  --c-info:         #0F2447;
  --c-info-bg:      #DDE3EF;

  /* ---------- Typography ---------- */
  --f-display: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --f-sans:    'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  --f-mono:    'Geist Mono', 'SF Mono', Menlo, monospace;

  /* Scale — smaller, more disciplined */
  --t-xs:    10.5px;
  --t-sm:    12.5px;
  --t-base:  14px;
  --t-md:    16px;
  --t-lg:    19px;
  --t-xl:    23px;
  --t-2xl:   28px;
  --t-3xl:   34px;
  --t-4xl:   42px;
  --t-5xl:   54px;
  --t-6xl:   72px;
  --t-7xl:   96px;

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --ls-tight:   -0.018em;
  --ls-snug:    -0.008em;
  --ls-normal:  0;
  --ls-wide:    0.06em;
  --ls-wider:   0.16em;

  /* ---------- Spacing (4px base) ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* ---------- Radius · tight, almost square ---------- */
  --r-xs:  2px;
  --r-sm:  3px;
  --r-md:  4px;
  --r-lg:  6px;
  --r-xl:  8px;
  --r-2xl: 12px;
  --r-full: 9999px;

  /* ---------- Shadows · barely there. Rules do the work. ---------- */
  --sh-xs: 0 0.5px 0 rgba(11,15,22,0.05);
  --sh-sm: 0 1px 0 rgba(11,15,22,0.04), 0 0 0 0.5px rgba(11,15,22,0.06);
  --sh-md: 0 1px 2px rgba(11,15,22,0.05), 0 0 0 0.5px rgba(11,15,22,0.07);
  --sh-lg: 0 4px 16px rgba(11,15,22,0.08), 0 0 0 0.5px rgba(11,15,22,0.08);
  --sh-xl: 0 24px 56px rgba(11,15,22,0.14), 0 0 0 0.5px rgba(11,15,22,0.10);
  --sh-focus: 0 0 0 3px rgba(15,36,71,0.16);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2,.7,.3,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* ==========================================================================
   Base
   ========================================================================== */
.crest {
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  color: var(--c-ink);
  background: var(--c-paper);
  font-feature-settings: 'cv11', 'ss01', 'ss03', 'tnum';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.crest *, .crest *::before, .crest *::after { box-sizing: border-box; }
.crest h1, .crest h2, .crest h3, .crest h4, .crest h5, .crest p { margin: 0; }
.crest button { font: inherit; color: inherit; }
.crest a { color: inherit; text-decoration: none; }

/* Tabular figures everywhere numbers appear */
.tab-num, .crest .input, .crest .badge, .crest .mark {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Primitives
   ========================================================================== */

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 0 16px; height: 36px;
  border-radius: var(--r-sm);
  font-family: var(--f-sans); font-size: var(--t-sm); font-weight: 500;
  letter-spacing: 0;
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn--primary { background: var(--c-ink); color: var(--c-surface); }
.btn--primary:hover { background: var(--c-ink-2); }
.btn--navy { background: var(--c-navy); color: #fff; }
.btn--navy:hover { background: var(--c-navy-deep); }
.btn--forest { background: var(--c-verified); color: #fff; }
.btn--forest:hover { background: #122A22; }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line-2); }
.btn--ghost:hover { background: rgba(11,15,22,0.04); border-color: var(--c-line-strong); }
.btn--subtle { background: var(--c-paper-2); color: var(--c-ink); }
.btn--subtle:hover { background: var(--c-paper-3); }
.btn--lg { height: 46px; padding: 0 22px; font-size: var(--t-base); }
.btn--sm { height: 28px; padding: 0 12px; font-size: var(--t-xs); }
.btn--icon { width: 30px; height: 30px; padding: 0; }

/* Inputs ---------------------------------------------------------------- */
.input {
  width: 100%; height: 38px;
  padding: 0 12px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-sm);
  background: var(--c-surface-pure);
  font-family: var(--f-sans); font-size: var(--t-sm);
  color: var(--c-ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--c-ink-4); }
.input:focus { outline: none; border-color: var(--c-navy); box-shadow: var(--sh-focus); }
.input--lg { height: 46px; font-size: var(--t-base); padding: 0 14px; }

.field-label {
  display: block; font-size: 10px; font-weight: 500;
  color: var(--c-ink-3); margin-bottom: 6px;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  font-family: var(--f-mono);
}

/* Card ------------------------------------------------------------------ */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

/* Badge · square, bordered. Banking, not playful. ---------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 20px; padding: 0 8px;
  border-radius: var(--r-xs);
  font-size: 10.5px; font-weight: 500;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  font-family: var(--f-mono);
  border: 1px solid currentColor;
}
.badge--success { color: var(--c-verified);  background: var(--c-verified-bg); border-color: transparent; }
.badge--warning { color: var(--c-pending);   background: var(--c-pending-bg);  border-color: transparent; }
.badge--danger  { color: var(--c-danger);    background: var(--c-danger-bg);   border-color: transparent; }
.badge--info    { color: var(--c-info);      background: var(--c-info-bg);     border-color: transparent; }
.badge--neutral { color: var(--c-ink-2);     background: var(--c-paper-2);     border-color: transparent; }

/* Mark · monospace metadata chip --------------------------------------- */
.mark {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 6px; height: 18px;
  border-radius: var(--r-xs);
  background: var(--c-paper-2); color: var(--c-ink-3);
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: var(--ls-wide);
  border: 1px solid var(--c-line);
}

/* Eyebrow ---------------------------------------------------------- */
.eyebrow {
  font-family: var(--f-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: var(--ls-wider);
  color: var(--c-ink-3);
}

/* Beagel Verify mark — shield + serif wordmark lockup */
.crestmark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--c-ink);
}
.crestmark__glyph { color: var(--c-ink); flex: 0 0 auto; }
.crestmark__type {
  display: inline-flex; flex-direction: column; line-height: 1;
}
.crestmark__name {
  font-family: var(--f-display); font-weight: 600;
  letter-spacing: var(--ls-tight); color: var(--c-ink);
}
.crestmark__by {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--c-ink-3); margin-top: 4px;
}

/* SVG placeholder fills */
.placeholder {
  background:
    repeating-linear-gradient(135deg,
      rgba(11,15,22,0.04) 0 8px,
      rgba(11,15,22,0.07) 8px 16px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: var(--t-xs);
  color: var(--c-ink-3);
  letter-spacing: var(--ls-wide);
}

/* Notarial stamp · used on certificates ------------------------------- */
.stamp {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  border: 1.5px solid var(--c-stamp);
  color: var(--c-stamp);
  font-family: var(--f-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: var(--ls-wider);
  border-radius: 1px;
  background: rgba(139,111,61,0.02);
}

/* Rule · explicit hairline divider ---------------------------- */
.rule { height: 1px; background: var(--c-line); }
.rule--strong { background: var(--c-line-strong); }