/* Nishana Suppliers — shared foundation (tokens-DESIGN.md)
   Tokens are copied as CSS variables; never hot-link static mocks.
   Public: loads app.css + storefront.css. Admin: loads app.css + admin.css. */
:root{
  /* core brand — from tokens-DESIGN.md */
  --canvas:#ffffff; --surface:#e8ffef; --surface-dim:#b8e4ca; --surface-bright:#e8ffef;
  --surface-lowest:#ffffff; --surface-low:#d2fee3; --surface-container:#ccf8de; --surface-high:#c6f2d8; --surface-highest:#c1edd3;
  --on-surface:#002113; --on-surface-variant:#404942;
  --primary:#00341d; --primary-strong:#0b4c2f; --primary-deep:#073d26; --primary-darkest:#031f15;
  --primary-container:#0b4c2f; --on-primary:#ffffff; --on-primary-container:#7fbc96;
  --secondary:#bb0022; --secondary-container:#e41d33; --on-secondary:#ffffff;
  --crimson:#d80f2c; --crimson-active:#bd0b25;
  --tertiary:#003417; --tertiary-container:#004d25;
  --error:#ba1a1a; --on-error:#ffffff; --error-container:#ffdad6; --on-error-container:#93000a;
  --ink:#173f2d; --body:#5d6a62; --muted:#67736b;
  --hairline:#dce6de; --input-border:#d5dfd7; --outline:#707972; --outline-variant:#c0c9c0;
  --soft:#f4f8f3; --trust:#f3faef; --card:#eef7ec; --surface-soft:#f4f8f3; --surface-card:#eef7ec; --surface-trust:#f3faef;
  --success:#267027; --success-surface:#e9f6e5;
  --accent-forest:#2f7d32; --accent-gold:#c98a00;
  --whatsapp:#128c4a;
  /* typography */
  --serif:Georgia, Cambria, "Times New Roman", serif;
  --sans:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* radius — from tokens rounded */
  --radius-sm:.25rem; --radius:.5rem; --radius-md:.75rem; --radius-lg:1rem; --radius-xl:1.5rem; --radius-pill:9999px;
  --radius-btn:14px; --radius-card:26px; --radius-band:32px;
  /* spacing */
  --space-xs:.25rem; --space-sm:.5rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2rem;
  --gutter:1rem; --gutter-desktop:2rem;
  /* layout */
  --page-width:80rem; /* 1280px */
  --header-h:74px; --admin-top-h:56px; --bottom-nav-h:76px;
  /* shadow */
  --shadow-card:0 6px 18px rgba(11,76,47,.08);
  --shadow-lift:0 12px 28px rgba(216,15,44,.19);
  --shadow-float:0 20px 50px rgba(20,72,43,.09);
  /* z-index */
  --z-header:40; --z-bottom-nav:40; --z-float:30; --z-modal:60;
}

/* reset */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--canvas); color:var(--ink); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased}
img,svg{display:block; max-width:100%}
a{color:inherit}
button{cursor:pointer; font-family:inherit}
button:disabled{opacity:.6; cursor:not-allowed}
input,select,textarea{font:inherit}

/* focus */
:focus-visible{outline:3px solid #0d5c3647; outline-offset:3px}
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{outline:3px solid #0d5c3647; outline-offset:3px}

/* sr-only */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* layout primitives */
.wrap{max-width:var(--page-width); margin:0 auto; padding:0 var(--gutter)}
.container{max-width:var(--page-width); margin:0 auto; padding:0 var(--gutter)}
@media(min-width:1024px){.wrap,.container{padding:0 var(--gutter-desktop)}}
.stack{display:grid; gap:var(--space-md)}
.cluster{display:flex; flex-wrap:wrap; gap:var(--space-sm); align-items:center}
.grid-auto{display:grid; gap:var(--space-md)}

/* type scale */
h1,h2,h3{font-family:var(--serif); letter-spacing:-.035em; margin:0}
h1{font-size:clamp(2rem,6vw,3.75rem); line-height:1.02}
h2{font-size:clamp(1.5rem,4vw,2rem); line-height:1.08}
.eyebrow{font-size:.75rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--crimson)}
@media(max-width:767px){.eyebrow{font-size:.6875rem; letter-spacing:.16em}}
.muted{color:var(--body)} .small{font-size:.85rem} .center{text-align:center}
.lede{font-size:1.05rem; line-height:2; color:var(--body); max-width:38rem}

/* shared card */
.card{background:#fff; border:1px solid var(--hairline); border-radius:var(--radius-card); overflow:hidden}
.card--soft{background:var(--surface-card); border-color:var(--hairline)}
.pad{padding:1.1rem 1.2rem; margin-bottom:.9rem}
.card .pad:last-child{margin-bottom:0}

/* shared buttons — .button is canonical; .btn-* aliases for compat */
.button,.btn-primary,.btn-secondary,.btn-small{display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:var(--radius-btn); padding:.8rem 1.35rem; font-size:.9375rem; font-weight:800; text-decoration:none; border:1px solid transparent; transition:transform .18s, box-shadow .18s, background .18s, border-color .18s; line-height:1}
.button--primary,.btn-primary{background:var(--crimson); color:#fff; border-color:var(--crimson); box-shadow:0 12px 28px rgba(216,15,44,.15)}
.button--primary:hover,.btn-primary:hover{background:var(--crimson-active); transform:translateY(-2px); box-shadow:var(--shadow-lift)}
.button--quiet,.btn-secondary{background:#fff; color:var(--primary-strong); border-color:var(--hairline)}
.button--quiet:hover,.btn-secondary:hover{border-color:var(--primary-strong); transform:translateY(-2px)}
.btn-small{min-height:0; padding:.55rem 1.1rem; font-size:.85rem; border-radius:var(--radius-pill); background:var(--primary-strong); color:#fff}
.button:disabled{transform:none; box-shadow:none}
.button--ghost{background:transparent; color:var(--primary-strong); border-color:var(--primary-strong)}
.button--ghost:hover{background:var(--soft)}

/* form controls — .input/.select/.textarea canonical; .form aliases */
.input,.select,.textarea,.form input,.form select,.form textarea{width:100%; min-height:44px; border:1px solid var(--input-border); border-radius:var(--radius-btn); padding:.7rem .9rem; background:#fff; color:var(--ink)}
.textarea{min-height:88px; resize:vertical}
.field{display:grid; gap:.35rem}
.field label{font-size:.85rem; font-weight:700; color:var(--ink)}
.field-hint{font-size:.78rem; color:var(--muted)}
.field-error{font-size:.82rem; font-weight:600; color:var(--error); background:var(--error-container); border:1px solid #f3b8c0; border-radius:.7rem; padding:.45rem .7rem}
.input--error,.select--error,.textarea--error{border-color:var(--error); box-shadow:0 0 0 2px #ba1a1a1a}
.form{padding:1.2rem; display:grid; gap:.9rem}
.form label{display:grid; gap:.35rem; font-size:.85rem; font-weight:700}
.form-row{display:grid; gap:.9rem} @media(min-width:640px){.form-row{grid-template-columns:1fr 1fr}}
.checks{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font-size:.9rem}
.checks input{width:auto; min-height:0}

/* flash */
.flash{border-radius:.85rem; padding:.8rem 1rem; font-size:.9rem; font-weight:600}
.flash.ok{background:var(--success-surface); color:var(--success); border:1px solid #bfe0b8}
.flash.error{background:#fdeceb; color:#bd0b25; border:1px solid #f3b8c0}

/* status chip — .status-chip canonical; .chip alias */
.status-chip,.chip{display:inline-flex; align-items:center; min-height:26px; font-size:.72rem; font-weight:800; padding:.28rem .7rem; border-radius:var(--radius-pill); background:var(--soft); color:var(--ink); white-space:nowrap}
.status-chip--ok,.chip.ok{background:#e9f6e5; color:var(--success)}
.status-chip--warn,.chip.warn{background:#fdf3e3; color:#9a6200}
.status-chip--info,.chip.info{background:#e8f0fe; color:#1a56db}
.status-chip--bad,.chip.bad{background:#fdeceb; color:#bd0b25}
.status-chip--mute,.chip.mute{background:#eef1ee; color:var(--muted)}
.chip.link{text-decoration:none} .chip.link.on{background:var(--primary-strong); color:#fff}
.chips{display:flex; gap:.4rem; overflow-x:auto; padding:.2rem 0 .6rem; scrollbar-width:thin}

/* empty state */
.empty-state{text-align:center; padding:2.2rem 1.2rem; border:1px dashed var(--hairline); border-radius:var(--radius-card); background:var(--soft)}
.empty-state h3{font-family:var(--serif); font-size:1.35rem; margin:.4rem 0}
.empty-state p{color:var(--muted); max-width:34rem; margin:.35rem auto 0; line-height:1.7}
.empty-state .button{margin-top:1rem}

/* pagination */
.pagination{display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; margin:1rem 0 0}
.pagination a,.pagination span{display:inline-flex; min-width:44px; min-height:44px; align-items:center; justify-content:center; padding:.55rem .9rem; border-radius:.7rem; border:1px solid var(--hairline); background:#fff; font-weight:700; text-decoration:none}
.pagination a:hover{border-color:var(--primary-strong)}
.pagination .on{background:var(--primary-strong); color:#fff; border-color:var(--primary-strong)}

/* table -> stacked cards below 768px */
.table-wrap{overflow:auto; border:1px solid var(--hairline); border-radius:var(--radius-card); background:#fff}
.table{width:100%; border-collapse:collapse; font-size:.9rem}
.table th{ text-align:left; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--soft); padding:.75rem .9rem; white-space:nowrap; border-bottom:1px solid var(--hairline)}
.table td{padding:.8rem .9rem; border-bottom:1px solid var(--hairline); vertical-align:top}
.table tr:last-child td{border-bottom:0}
@media(max-width:767px){
  .table-wrap{border:0; background:transparent}
  .table thead{display:none}
  .table, .table tbody, .table tr, .table td{display:block; width:100%}
  .table tr{background:#fff; border:1px solid var(--hairline); border-radius:1rem; margin-bottom:.7rem; padding:.6rem 0; overflow:hidden}
  .table td{border:0; padding:.55rem 1rem; display:flex; justify-content:space-between; gap:1rem}
  .table td::before{content:attr(data-label); font-weight:700; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; flex-shrink:0}
}

/* lines/totals shared */
.line{display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; font-size:.92rem}
.line.total{border-top:1px solid var(--hairline); margin-top:.4rem; padding-top:.7rem; font-weight:800}
.btn-row{display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap}

/* no horizontal overflow guard */
html,body{max-width:100%; overflow-x:clip}