/* dev.nfc.center — design tokens (from ePerso Figma). Fonts are LARGE by mandate. */
/* Spec: Research/Design-System/Dev-Portal-Design-System.md */
:root {
  --violet:#6D28D9; --violet-bright:#7C3AED; --violet-glow:#8B5CF6; --orange:#EC6608;
  --ink:#1A1A1A; --muted:#5A5A63; --bg:#F4F4F7; --surface:#FFFFFF;
  --topbar:#1F1F1F; --sidebar:#2E2E2E; --line:#E2E2E8;
  --status-experiment:#F59E0B; --status-review:#2563EB; --status-approved:#16A34A;
  --status-deprecated:#9AA0A6; --danger:#E5352B;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-meta:16px; --fs-sm:18px; --fs-base:20px; --fs-lg:24px; --fs-xl:30px;
  --fs-2xl:38px; --fs-3xl:48px; --fs-hero:64px; --lh-body:1.6; --lh-head:1.2;
  --radius-card:14px; --radius-input:12px; --radius-pill:999px;
  --space-1:8px; --space-2:12px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; --space-7:64px;
  --tap-min:48px; --shadow-card:0 2px 10px rgba(20,20,40,.08); --focus-ring:0 0 0 3px rgba(109,40,217,.45);
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin:0; font-family:var(--font); font-size:var(--fs-base); line-height:var(--lh-body);
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; }
h1{font-size:var(--fs-3xl)} h2{font-size:var(--fs-2xl)} h3{font-size:var(--fs-xl)} h4{font-size:var(--fs-lg)}
h1,h2,h3,h4{line-height:var(--lh-head); font-weight:700; margin:0 0 var(--space-3)}
p,li{max-width:70ch}
a{color:var(--violet); text-decoration:none} a:hover{text-decoration:underline}
small,.meta{font-size:var(--fs-meta)}   /* 16px — the floor, never smaller */

/* shell */
.app{display:grid; grid-template-columns:280px 1fr; grid-template-rows:64px 1fr; min-height:100vh}
.topbar{grid-column:1/3; background:var(--topbar); color:#fff; display:flex; align-items:center;
  gap:var(--space-4); padding:0 var(--space-4); font-size:var(--fs-sm)}
.sidebar{background:var(--sidebar); color:#fff; padding:var(--space-4)}
.brand{background:var(--violet); color:#fff; font-weight:700; font-size:var(--fs-lg);
  padding:var(--space-3) var(--space-4); border-radius:var(--radius-card); margin-bottom:var(--space-4)}
.content{padding:var(--space-6); overflow:auto}

/* card / chip / button / input */
.card{background:var(--surface); border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:var(--space-4)}
.chip{display:inline-flex; align-items:center; min-height:44px; padding:0 var(--space-4);
  border-radius:var(--radius-pill); font-size:var(--fs-sm); border:2px solid var(--line); background:#fff; cursor:pointer}
.chip.active{background:var(--violet); color:#fff; border-color:var(--violet)}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:var(--tap-min);
  padding:14px 24px; border-radius:var(--radius-input); font-size:var(--fs-sm); font-weight:700;
  border:2px solid transparent; cursor:pointer}
.btn-primary{background:var(--violet); color:#fff}
.btn-accent{background:var(--orange); color:#fff}
.btn-secondary{background:#fff; color:var(--violet); border-color:var(--violet)}
.btn:focus-visible,.input:focus-visible,.chip:focus-visible{outline:none; box-shadow:var(--focus-ring)}
label{display:block; font-size:var(--fs-sm); font-weight:500; margin-bottom:var(--space-1)}
.input{width:100%; min-height:52px; font-size:var(--fs-base); padding:14px 16px;
  border:2px solid var(--line); border-radius:var(--radius-input); background:#fff; color:var(--ink)}
.input:focus{border-color:var(--violet)}
.help{font-size:var(--fs-meta); color:var(--muted); margin-top:var(--space-1)}

/* maturity badges */
.badge{display:inline-flex; align-items:center; min-height:28px; padding:2px 12px; border-radius:var(--radius-pill);
  font-size:var(--fs-meta); font-weight:700; color:#fff}
.badge.experiment{background:var(--status-experiment)}
.badge.review{background:var(--status-review)}
.badge.approved{background:var(--status-approved)}
.badge.deprecated{background:var(--status-deprecated)}

/* tables + docs */
table{border-collapse:collapse; width:100%; font-size:var(--fs-sm)}
th,td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); min-height:48px}
thead th{background:#26262b; color:#fff}
tbody tr:nth-child(even){background:var(--bg)}
pre,code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--fs-sm)}
.doc{max-width:80ch}
.mermaid-wrap{overflow-x:auto; background:#fff; border-radius:var(--radius-card); padding:var(--space-4)}

@media (max-width:820px){ .app{grid-template-columns:1fr} .sidebar{display:none} .content{padding:var(--space-4)} }