/* © 2026 Olive Root Tech. All rights reserved. Unauthorized reproduction prohibited. */
/* ort_design.css — Rooted OS DESIGN SYSTEM · single source of truth.
   Tokens + base components. ort_os.css is the live OS implementation and uses the
   identical values; new/canonical pages should link THIS file for tokens + components.
   Spec & rationale: DESIGN_SYSTEM.md */

:root{
  /* ---- COLOR (ORT earth tones · NO BLUES) ---- */
  --ort-forest:#1C2B1A;       /* app background */
  --ort-forest-2:#162414;     /* panels / cards on forest */
  --ort-olive:#3B6A3B;        /* primary action */
  --ort-leaf:#639922;         /* accent / positive / links */
  --ort-amber:#EF9F27;        /* highlight / focus / CTA */
  --ort-bark:#2A5130;         /* borders / strokes */
  --ort-coyote:#8B7355;       /* metadata / muted labels */
  --ort-cream:#F5F0E4;        /* text on dark */
  --ort-danger:#7a3530;       /* destructive only */
  --ort-ink:rgba(245,240,228,.92);
  --ort-muted:rgba(245,240,228,.55);
  --ort-line:rgba(255,255,255,.08);     /* hairline border */
  --ort-line-in:rgba(255,255,255,.06);  /* inner card border */

  /* ---- SPACING (8px grid · use these, not magic numbers) ---- */
  --ort-s1:8px; --ort-s2:16px; --ort-s3:24px; --ort-s4:32px; --ort-s5:40px; --ort-s6:64px;

  /* ---- RADIUS ---- */
  --ort-r-pill:999px; --ort-r-sm:8px; --ort-r-md:11px; --ort-r-lg:15px; --ort-r-badge:4px;

  /* ---- TYPE SCALE ---- */
  --ort-font:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ort-t-display:48px; --ort-t-h:32px; --ort-t-sub:20px; --ort-t-body:16px;
  --ort-t-label:12px; --ort-t-micro:10px;
  --ort-w-reg:400; --ort-w-med:600; --ort-w-bold:700; --ort-w-black:900;

  /* ---- ELEVATION (flat → raised → floating) ---- */
  --ort-el-flat:none;
  --ort-el-raised:0 2px 8px rgba(0,0,0,.28);
  --ort-el-float:0 18px 50px rgba(0,0,0,.50), 0 2px 8px rgba(0,0,0,.35);

  /* ---- MOTION ---- */
  --ort-ease:cubic-bezier(.25,.1,.25,1);   /* the Gladiator curve — use everywhere */
  --ort-fast:.14s; --ort-med:.3s; --ort-slow:.6s;
}

/* ============ TYPOGRAPHY ============ */
.ort-display{font:var(--ort-w-black) var(--ort-t-display)/1.05 var(--ort-font);letter-spacing:-1px;}
.ort-h{font:var(--ort-w-bold) var(--ort-t-h)/1.15 var(--ort-font);letter-spacing:-.5px;}
.ort-sub{font:var(--ort-w-bold) var(--ort-t-sub)/1.3 var(--ort-font);}
.ort-body{font:var(--ort-w-reg) var(--ort-t-body)/1.5 var(--ort-font);}
.ort-label{font:var(--ort-w-med) var(--ort-t-label)/1.3 var(--ort-font);}
.ort-eyebrow{font:var(--ort-w-bold) var(--ort-t-micro)/1.3 var(--ort-font);
  letter-spacing:3px;text-transform:uppercase;color:var(--ort-coyote);}

/* ============ BUTTONS ============ */
.ort-btn{display:inline-flex;align-items:center;gap:7px;font:var(--ort-w-bold) 13px var(--ort-font);
  padding:10px 16px;border:none;border-radius:var(--ort-r-sm);cursor:pointer;
  background:var(--ort-olive);color:var(--ort-cream);
  transition:transform var(--ort-fast) var(--ort-ease),background var(--ort-fast),box-shadow var(--ort-fast);}
.ort-btn:hover{background:#46803f;transform:translateY(-1px);box-shadow:var(--ort-el-raised);}
.ort-btn:active{transform:translateY(0);}
.ort-btn--amber{background:var(--ort-amber);color:#2a1c05;}
.ort-btn--amber:hover{background:#f6ad3e;}
.ort-btn--ghost{background:transparent;border:1px solid var(--ort-line);color:var(--ort-ink);}
.ort-btn--ghost:hover{background:rgba(255,255,255,.05);}
.ort-btn--danger{background:var(--ort-danger);}
.ort-btn--danger:hover{background:#8d3c36;}

/* ============ CARDS (3 elevation levels) ============ */
.ort-card{background:var(--ort-forest-2);border:1px solid var(--ort-line);
  border-radius:var(--ort-r-lg);padding:18px;box-shadow:inset 0 0 0 1px var(--ort-line-in);}
.ort-card--raised{box-shadow:var(--ort-el-raised);}
.ort-card--float{box-shadow:var(--ort-el-float);}

/* ============ STATUS DOTS (square, 6px) ============ */
.ort-dot{width:6px;height:6px;border-radius:1px;display:inline-block;background:var(--ort-coyote);}
.ort-dot--active{background:var(--ort-amber);}
.ort-dot--ok{background:var(--ort-leaf);}

/* ============ NAVIGATION (marketing canonical) ============ */
/* Global order: Home · Platform · Grove Network · Pricing · Base Camp · Moving Out */
.ort-nav{display:flex;align-items:center;gap:20px;height:62px;
  border-bottom:1px solid var(--ort-line);font:var(--ort-w-med) 13.5px var(--ort-font);}
.ort-nav .ort-brand{display:flex;align-items:center;gap:9px;font-weight:var(--ort-w-black);}
.ort-nav a{color:var(--ort-muted);text-decoration:none;transition:color var(--ort-fast);}
.ort-nav a:hover{color:var(--ort-cream);}
.ort-nav .ort-nav-cta{margin-left:auto;background:var(--ort-amber);color:#2a1c05;
  padding:8px 14px;border-radius:var(--ort-r-sm);font-weight:var(--ort-w-bold);}

/* ============ FOCUS (keyboard) ============ */
.ort-btn:focus-visible,.ort-nav a:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ort-leaf);outline-offset:2px;}

/* ============ EMPTY / ERROR / SUCCESS STATES ============ */
.ort-empty{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:36px 16px;text-align:center;color:var(--ort-muted);}
/* copy: empty="Nothing in the field yet" · error="Off the trail — try again" · success="Mission complete" */

/* ============ AI PANEL + MODAL ============ */
/* Implementations live in ort_rooted_ai.css (#rai-panel) and per-page modals; both follow:
   - forest background, hairline border, --ort-el-float shadow, --ort-r-lg radius
   - enter/exit on --ort-ease; overlay rgba(10,16,8,.7) + blur(6px)
   - dismiss on ✕, Esc, and overlay click */
.ort-modal-overlay{position:fixed;inset:0;z-index:10800;display:none;align-items:center;justify-content:center;
  background:rgba(10,16,8,.7);backdrop-filter:blur(6px);}
.ort-modal-overlay.show{display:flex;}
.ort-modal{background:var(--ort-forest-2);border:1px solid var(--ort-line);border-radius:var(--ort-r-lg);
  padding:22px;box-shadow:var(--ort-el-float);max-width:92vw;animation:ort-modal-in var(--ort-med) var(--ort-ease);}
@keyframes ort-modal-in{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:none;}}