/* ═══════════════════════════════════════════════════════════════════════
   OFM DESIGN SYSTEM — shared shell tokens & components
   Used by: lo-toolkit-hub, BuyMax, FirstRate, QuotePilot
   Look: Apple-sophisticated, glassy/glossy Vista-era surfaces, restrained.
   Source of truth: lo-toolkit-hub/ofm-design-system.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root{
  /* Brand */
  --navy:          oklch(0.43 0.055 249);
  --navy-deep:     oklch(0.28 0.050 249);
  --navy-hairline: oklch(0.38 0.050 249);
  --accent:        oklch(0.72 0.16 55);     /* Gold #D48B2C area */
  --accent-ink:    oklch(0.50 0.16 55);
  --accent-soft:   oklch(0.93 0.06 55);
  --accent-glow:   oklch(0.72 0.16 55 / .38);
  --sky:           oklch(0.74 0.12 235);
  --sky-soft:      oklch(0.93 0.05 235);

  /* Type */
  --ink:      oklch(0.24 0.030 249);
  --ink-mute: oklch(0.48 0.018 249);
  --ink-soft: oklch(0.62 0.012 249);

  /* Surfaces */
  --surface:   oklch(0.985 0.004 85);
  --surface-2: oklch(0.96  0.006 85);
  --surface-3: oklch(0.93  0.008 85);
  --rule:      oklch(0.90  0.010 249);
  --rule-soft: oklch(0.94  0.008 249);

  /* Status */
  --ok:   oklch(0.48 0.14 155);
  --warn: oklch(0.70 0.16 75);
  --err:  oklch(0.52 0.18 25);

  /* Radii */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Type stacks */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Mono", "Consolas", monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Glass primitives */
  --glass-stroke:        rgba(255,255,255,.18);
  --glass-stroke-strong: rgba(255,255,255,.32);
  --glass-tint:          linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035));
  --glass-tint-hover:    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  --glass-inset:         0 1px 0 rgba(255,255,255,.14) inset, 0 1px 2px rgba(0,0,0,.2);
  --shadow-card:         0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(31,45,66,.04), 0 10px 28px -14px rgba(31,45,66,.18);
  --shadow-card-hover:   0 1px 0 rgba(255,255,255,.95) inset, 0 4px 10px rgba(31,45,66,.06), 0 22px 42px -16px color-mix(in oklch, var(--accent) 40%, transparent);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.ofm{
  background:
    radial-gradient(1200px 700px at 85% -10%, var(--sky-soft), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, color-mix(in oklch, var(--accent) 12%, transparent), transparent 55%),
    var(--surface);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern","liga","calt","ss01";
}
.ofm a{color:inherit}
.ofm button{font:inherit;cursor:pointer}
.ofm ::selection{background:var(--accent);color:#fff}

/* ── Masthead (steel + dot grid + glass highlight) ───────────────────── */
.ofm-masthead{
  position:relative;
  color:#fff;
  background:
    radial-gradient(ellipse 55% 80% at 50% -10%, color-mix(in oklch, #fff 14%, transparent) 0%, transparent 62%),
    linear-gradient(180deg,
      oklch(0.46 0.058 249) 0%,
      oklch(0.42 0.056 249) 34%,
      oklch(0.35 0.050 249) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -1px 0 rgba(0,0,0,.28) inset,
    0 4px 10px -4px rgba(15,28,46,.38);
  overflow:hidden;
}
.ofm-masthead::before{
  content:"";position:absolute;left:0;right:0;top:0;height:55%;
  background:linear-gradient(180deg,
    rgba(255,255,255,.11) 0%,
    rgba(255,255,255,.035) 55%,
    transparent 100%);
  pointer-events:none;z-index:1;
}
.ofm-masthead::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:18px 18px;
  background-position:9px 9px;
  pointer-events:none;opacity:.55;z-index:0;
  mask-image:radial-gradient(ellipse 70% 100% at 50% 50%, black 0%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 100% at 50% 50%, black 0%, transparent 85%);
}
.ofm-masthead-inner{
  position:relative;z-index:2;
  max-width:1120px;margin:0 auto;
  padding:var(--s-5) var(--s-5) var(--s-4);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-4);
}
.ofm-lock{display:flex;align-items:center;gap:var(--s-4)}
.ofm-lock img{height:44px;width:auto;display:block}
.ofm-lock .ofm-eyebrow{
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(255,255,255,.62);font-weight:500;margin:0 0 2px;
}
.ofm-lock h1{margin:0;font-size:20px;font-weight:600;letter-spacing:-0.01em}
.ofm-mast-meta{
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:500;text-align:right;
}

/* Optional glowing logo puck */
.ofm-mast-puck{
  height:40px;width:40px;border-radius:50%;
  background:#fff;padding:3px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.25) inset,
    0 0 0 3px rgba(255,255,255,.08),
    0 0 14px 2px rgba(180,220,255,.28);
  animation:ofm-puck-pulse 4.2s ease-in-out infinite;
}
@keyframes ofm-puck-pulse{
  0%,100%{box-shadow:0 2px 6px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.25) inset,0 0 0 3px rgba(255,255,255,.08),0 0 12px 1px rgba(180,220,255,.24)}
  50%   {box-shadow:0 2px 6px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.25) inset,0 0 0 3px rgba(255,255,255,.10),0 0 22px 4px rgba(180,220,255,.48)}
}
@media (prefers-reduced-motion: reduce){.ofm-mast-puck{animation:none}}

/* Status bar (the dark strip under the masthead) */
.ofm-statusbar{
  position:relative;
  background:linear-gradient(180deg, oklch(0.28 0.050 249) 0%, oklch(0.22 0.045 249) 100%);
  color:rgba(255,255,255,.80);
  box-shadow:
    0 1px 0 rgba(255,255,255,.10) inset,
    0 -1px 0 rgba(0,0,0,.28) inset,
    0 2px 6px -2px rgba(0,0,0,.28);
}
.ofm-statusbar::before{
  content:"";position:absolute;left:0;right:0;top:0;height:55%;
  background:linear-gradient(180deg, rgba(255,255,255,.055), transparent);
  pointer-events:none;
}
.ofm-statusbar-inner{
  position:relative;z-index:1;
  max-width:1120px;margin:0 auto;padding:9px var(--s-5);
  display:flex;justify-content:space-between;gap:var(--s-4);
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;font-weight:500;
}
.ofm-statusbar .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ok);margin-right:14px;vertical-align:1px;
  box-shadow:0 0 0 3px color-mix(in oklch, var(--ok) 28%, transparent);
}

/* ── Layout container ─────────────────────────────────────────────────── */
.ofm-main{max-width:1120px;margin:0 auto;padding:var(--s-6) var(--s-5)}

/* ── Surfaces (glass cards) ───────────────────────────────────────────── */
.ofm-card{
  background:linear-gradient(180deg, #ffffff 0%, oklch(0.985 0.005 249) 100%);
  border:1px solid var(--rule);
  border-radius:var(--radius-xl);
  padding:var(--s-5);
  box-shadow:var(--shadow-card);
  position:relative;overflow:hidden;
  transition:border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.ofm-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--accent) 12%, transparent) 0%, transparent 48%);
  opacity:.7;transition:opacity .3s var(--ease-out);
}
.ofm-card.is-interactive{cursor:pointer;text-decoration:none;color:inherit}
.ofm-card.is-interactive:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:var(--shadow-card-hover);
}
.ofm-card.is-interactive:hover::before{opacity:1}

/* Plain panel (no corner glow) — for forms, tables */
.ofm-panel{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:var(--radius-lg);
  padding:var(--s-5);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(31,45,66,.04);
}

/* Subtle elevated tile */
.ofm-tile{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--radius-lg);
  padding:var(--s-4);
}

/* ── Section heads ────────────────────────────────────────────────────── */
.ofm-eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--navy);font-weight:600;
}
.ofm-h2{
  margin:0;color:var(--navy-deep);font-size:22px;letter-spacing:-0.015em;font-weight:600;
}
.ofm-h-display{
  margin:0;color:var(--navy-deep);font-weight:600;
  font-size:clamp(30px, 3.2vw, 44px);
  letter-spacing:-0.025em;line-height:1.05;
}
.ofm-rule{height:1px;background:var(--rule);border:0;margin:var(--s-4) 0}
.ofm-rule-soft{height:1px;background:var(--rule-soft);border:0;margin:var(--s-3) 0}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.ofm-btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 14px;border-radius:var(--radius);
  font:inherit;font-size:14px;font-weight:500;letter-spacing:-0.005em;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink);
  cursor:pointer;
  transition:background .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .15s var(--ease-out);
}
.ofm-btn:hover{border-color:var(--navy);background:#fff}
.ofm-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ofm-btn:active{transform:translateY(1px)}

/* Primary — navy glassy gradient */
.ofm-btn-primary{
  background:linear-gradient(180deg, oklch(0.48 0.060 249) 0%, var(--navy) 55%, oklch(0.38 0.050 249) 100%);
  color:#fff;border-color:var(--navy);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -1px 0 rgba(0,0,0,.15) inset,
    0 1px 2px rgba(31,45,66,.22),
    0 4px 12px -4px rgba(31,45,66,.35);
}
.ofm-btn-primary:hover{
  background:linear-gradient(180deg, oklch(0.52 0.065 249) 0%, oklch(0.40 0.055 249) 55%, oklch(0.32 0.050 249) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.20) inset,
    0 -1px 0 rgba(0,0,0,.18) inset,
    0 2px 6px rgba(31,45,66,.30),
    0 8px 22px -6px color-mix(in oklch, var(--accent) 35%, transparent);
}
.ofm-btn-primary:disabled{opacity:.6;cursor:not-allowed}

/* Accent (gold) */
.ofm-btn-accent{
  background:color-mix(in oklch, var(--accent) 10%, transparent);
  border-color:color-mix(in oklch, var(--accent) 30%, transparent);
  color:var(--accent-ink);
}
.ofm-btn-accent:hover{
  border-color:var(--accent);color:var(--accent-ink);
  background:color-mix(in oklch, var(--accent) 18%, transparent);
  box-shadow:0 2px 10px color-mix(in oklch, var(--accent) 25%, transparent);
}

/* Ghost — for secondary actions on dark backgrounds */
.ofm-btn-ghost-dark{
  background:var(--glass-tint);
  border:1px solid var(--glass-stroke);
  color:rgba(255,255,255,.92);
  box-shadow:var(--glass-inset);
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;font-weight:500;
  padding:7px 14px;border-radius:100px;
}
.ofm-btn-ghost-dark:hover{
  background:var(--glass-tint-hover);
  border-color:var(--glass-stroke-strong);
  color:#fff;
}

/* ── Inputs ──────────────────────────────────────────────────────────── */
.ofm-label{
  display:block;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:500;margin-bottom:8px;
}
.ofm-label .hint{color:var(--ink-soft);letter-spacing:0.16em;margin-left:6px;font-weight:400;text-transform:none}

.ofm-input,
.ofm-select,
.ofm-textarea{
  width:100%;padding:12px 14px;
  border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--surface);
  font:inherit;font-size:15px;color:var(--ink);
  outline:none;
  transition:border-color .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.ofm-input:focus,
.ofm-select:focus,
.ofm-textarea:focus{
  border-color:var(--navy);background:#fff;
  box-shadow:0 0 0 4px color-mix(in oklch, var(--navy) 12%, transparent);
}
.ofm-input[type="number"]{font-variant-numeric:tabular-nums}

/* ── Chips / pills ────────────────────────────────────────────────────── */
.ofm-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:100px;
  background:var(--surface-2);color:var(--ink-mute);
  border:1px solid var(--rule);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;
}
.ofm-chip-accent{
  background:var(--accent-soft);color:var(--accent-ink);
  border-color:color-mix(in oklch, var(--accent) 30%, transparent);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 2px 8px color-mix(in oklch, var(--accent) 22%, transparent);
}
.ofm-chip-navy{
  background:color-mix(in oklch, var(--navy) 8%, transparent);
  color:var(--navy);
  border-color:color-mix(in oklch, var(--navy) 22%, transparent);
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.ofm-footer{
  max-width:1120px;margin:0 auto;
  padding:var(--s-6) var(--s-5) var(--s-7);
  border-top:1px solid var(--rule-soft);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);flex-wrap:wrap;
  color:var(--ink-soft);
}
.ofm-footer .stamp{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;font-weight:500}
.ofm-footer .sig{font-family:var(--font-sans);font-size:11px;color:var(--ink-soft)}
.ofm-footer .mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:4px;background:var(--navy);color:#fff;
  font-size:11px;font-weight:700;margin-right:10px;vertical-align:-4px;
}

/* ── Focus ring (universal) ──────────────────────────────────────────── */
.ofm :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

/* ── kbd ──────────────────────────────────────────────────────────────── */
.ofm kbd{
  font-family:var(--font-mono);font-size:11px;
  background:var(--surface-2);color:var(--ink-mute);
  border:1px solid var(--rule);border-bottom-width:2px;
  border-radius:4px;padding:1px 6px;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;line-height:1.3;font-weight:500;
  font-variant-numeric:tabular-nums;
}

/* ── Utilities ───────────────────────────────────────────────────────── */
.ofm-mono{font-family:var(--font-mono)}
.ofm-tabular{font-variant-numeric:tabular-nums}
.ofm-muted{color:var(--ink-mute)}
.ofm-soft{color:var(--ink-soft)}
.ofm-navy{color:var(--navy)}
.ofm-accent{color:var(--accent-ink)}
.ofm-stack{display:flex;flex-direction:column;gap:var(--s-3)}
.ofm-row{display:flex;align-items:center;gap:var(--s-3)}
.ofm-row-between{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.ofm-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.ofm-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
@media (max-width:720px){
  .ofm-grid-2,.ofm-grid-3{grid-template-columns:1fr}
}