/*
 * DPP24 Design System — load before page-specific styles.
 * New screens must use these tokens and shared component classes. Do not hard-code
 * substitute colors, fonts, radii, input heights, or button treatments.
 */

:root{
  /* Brand color */
  --ink:#182536; --ink-soft:#344358; --paper:#f8f7f3; --white:#fff;
  --line:#d6dce1; --muted:#637085; --orange:#eb6536; --orange-soft:#f6ad91;
  --blue:#dce9f1; --mint:#dceee5; --dark:#142231; --green:#13795b;
  --danger:#a33b24; --danger-soft:#f0e5e1;
  /* Typography */
  --font-sans:Manrope,Arial,sans-serif; --font-mono:'DM Mono',monospace;
  --font-serif:'Source Serif 4',Georgia,serif;
  --text-xs:11px; --text-sm:13px; --text-base:16px; --text-lg:18px;
  --text-h3:25px; --text-h2:32px; --text-h1:46px;
  /* Layout and shape */
  --max:1180px; --radius-sm:9px; --radius-md:13px; --radius-lg:18px;
  --field-height:48px; --button-height:44px;
  --space-1:6px; --space-2:10px; --space-3:14px; --space-4:18px;
  --space-5:22px; --space-6:28px; --space-7:36px;
  --focus-ring:0 0 0 3px var(--orange-soft);
}

*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--text-base)/1.58 var(--font-sans)}
h1,h2,h3,p{margin-top:0} h1,h2,h3{letter-spacing:-.055em;line-height:1.08} h1{font-size:var(--text-h1)} h2{font-size:var(--text-h2)} h3{font-size:var(--text-h3)}
a{color:inherit} code,.mono{font-family:var(--font-mono)}
.eyebrow{font:500 var(--text-xs)/1.3 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
.muted{color:var(--muted);font-size:14px}

/* Cards and form fields */
.card,.table-card,.service-card,.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg)}
.field,.big-field{display:grid;gap:8px;font-size:var(--text-sm);font-weight:800;color:var(--ink)}
.field input,.field select,.field textarea,.big-field input,.big-field select,.big-field textarea,
input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  width:100%;min-height:var(--field-height);padding:12px 14px;border:1px solid #aeb9c5;
  border-radius:12px;background:var(--white);color:var(--ink);font:500 var(--text-base)/1.4 var(--font-sans);
}
textarea{min-height:120px;resize:vertical} select{cursor:pointer}
input::placeholder,textarea::placeholder{color:#8591a1}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed;background:#f0f3f5}

/* Actions */
.button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--button-height);padding:0 18px;border:1px solid transparent;border-radius:var(--radius-sm);font:800 var(--text-sm)/1 var(--font-sans);text-decoration:none;cursor:pointer;transition:transform .18s,background .18s,border-color .18s}
.button.primary,.primary{background:var(--ink);color:var(--white)}
.button.primary:hover,.primary:hover{background:var(--ink-soft);transform:translateY(-1px)}
.button.ghost{border-color:var(--line);background:var(--white);color:var(--ink)}
.button.ghost:hover{border-color:#aeb9c5;background:#f8fafb}
.text-button{border:0;background:transparent;padding:0;color:var(--ink);font:800 var(--text-sm)/1.4 var(--font-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.text-button:hover{color:var(--orange)}

/* Status and focus */
.status{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;background:#edf0f2;font-size:12px;font-weight:800}
.status.active{background:#dff4e9;color:var(--green)} .status.inactive,.status.archived{background:var(--danger-soft);color:#894532}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus-ring)}

@media(max-width:760px){:root{--text-h1:40px;--text-h2:28px}.button{width:100%}}

/* Disabled buttons look unavailable (v0.59) */
.button:disabled,.button[aria-disabled="true"],button:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none}
.button.ghost:disabled{background:#f0f3f5;border-color:var(--line);color:var(--muted)}
.button.primary:disabled{background:#8d97a4}

/* Plan cards: public pricing page and Plan & usage in the app */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:12px 0 8px}
.plan-card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;display:grid;gap:10px;align-content:start}
.plan-card h3{font-size:21px;margin:0}
.plan-card.hot{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.plan-card.current{background:#f7faf8;border-color:var(--green)}
.plan-flag{position:absolute;top:-11px;left:18px;background:var(--ink);color:var(--white);font:500 10.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:99px}
.plan-flag.mine{background:var(--green);left:auto;right:18px}
.price{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1}
.price small{font-size:14px;font-weight:700;color:var(--muted);letter-spacing:0}
.price-year{font-size:13px;color:var(--muted);margin-top:-4px}
.plan-card .ticks{list-style:none;padding:0;margin:4px 0 6px;display:grid;gap:6px;font-size:14px;color:var(--ink-soft)}
.plan-card .ticks li{padding-left:22px;position:relative}
.plan-card .ticks li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.plan-card .button{justify-self:stretch}
.plan-family{font-size:22px;margin:30px 0 0;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.plan-family .muted{font-size:14px;letter-spacing:0;font-weight:500}
mark.todo{background:#fff1c2;color:#7a5200;border-radius:4px;padding:0 4px;font-family:var(--font-mono);font-size:.9em}
@media(max-width:900px){.plan-grid{grid-template-columns:minmax(0,1fr)}}

/* v0.68 QR colour controls */
.qr-style{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 16px;display:grid;gap:10px;background:var(--white)}
.qr-style legend{font-weight:800;font-size:14px;padding:0 4px}
.qr-style-row{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.qr-cmyk{display:flex;align-items:center;gap:5px;font:700 13px var(--font-mono, monospace)}
.qr-cmyk input{width:4.4em;min-height:36px;padding:4px 6px;font:inherit;text-align:right;border:1px solid var(--line);border-radius:8px}
.qr-unit{color:var(--muted);font-size:13px}
.qr-swatch{--qr-ink:#000;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:linear-gradient(var(--qr-ink),var(--qr-ink)) center/18px 18px no-repeat,#fff}
.qr-swatch[data-bg=transparent]{background:linear-gradient(var(--qr-ink),var(--qr-ink)) center/18px 18px no-repeat,repeating-conic-gradient(#e6e9ec 0 25%,#fff 0 50%) 0 0/10px 10px}
.qr-bg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;font-weight:600}
.qr-bg label{display:flex;align-items:center;gap:6px;cursor:pointer}
.qr-bg input{width:16px;height:16px;margin:0}
.qr-style .hint{margin:0}
.qr-preview svg,.qr-thumb svg,.qr-box svg,.thumb svg{background:repeating-conic-gradient(#eef0f2 0 25%,#fff 0 50%) 0 0/12px 12px}
.qr-warn{margin:0;color:#8a5a00;background:#f8ecd2;border-radius:8px;padding:6px 10px;font-size:13px}
.qr-style .qr-cmyk input{width:4.2em;min-width:0;min-height:36px;height:36px;padding:4px 6px;font-size:14px}