/* ─────────────────────────────────────────────────────────────
   AllScale Design System — colors & type
   Extracted from source/p3-prototype.html and phone/swidge demos
   ───────────────────────────────────────────────────────────── */

/* DM Mono from Google Fonts (no brand mono provided) */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

/* ── Archivo (brand sans) — local variable TTF in /fonts ── */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 125%;
  font-display: swap;
  src: url('fonts/Archivo-VariableFont.ttf') format('truetype-variations'),
       url('fonts/Archivo-VariableFont.ttf') format('truetype');
}

:root {
  /* ── Surfaces / neutrals ── */
  --bg:           #FDFFFE;   /* page background — faint green-white */
  --bg-white:     #FFFFFF;
  --surface:      #FAFBFA;   /* base card */
  --surface2:     #F2F8F5;   /* hover + tinted card */
  --surface3:     #E5EEEA;   /* border-ish surface, rails */

  /* ── Borders ── */
  --border:       #E5EEEA;
  --border-gray:  #E4E4E4;
  --border2:      #C5DDD4;

  /* ── Text ── */
  --text:         #0C3124;   /* primary — deep forest green */
  --text2:        #83968F;   /* secondary — muted sage */
  --text3:        #B0C4BB;   /* tertiary — pale sage */
  --text-dark:    #0D0D0D;   /* near-black used in checkout phone */

  /* ── Brand accent (AllScale green) ── */
  --accent:       #009859;
  --accent-hover: #0CAA67;
  --accent2:      #087E4C;   /* pressed */
  --accent-glow:  #F2F8F5;
  --accent-light: #E5FAF1;
  --brand-light:  #12D16B;   /* bright brand green (logos/welcome) */

  /* ── Semantic colors ── */
  --orange:       #F59E0B;
  --orange-soft:  rgba(245,158,11,0.12);
  --red:          #E53E3E;
  --red-soft:     rgba(229,62,62,0.08);
  --green:        #009859;
  --green-soft:   rgba(0,152,89,0.10);
  --blue:         #2563EB;
  --blue-soft:    rgba(59,130,246,0.10);
  --purple:       #7C3AED;
  --purple-soft:  rgba(139,92,246,0.10);

  /* ── Shadow / elevation ── */
  --shadow:       0 8px 40px rgba(0,0,0,0.10);
  --shadow-md:    0 4px 24px rgba(0,0,0,0.08);
  --shadow-sm:    0 2px 10px rgba(0,152,89,0.10);
  --shadow-phone: 0 32px 80px rgba(0,0,0,0.5);

  /* ── Radius ── */
  --radius-card:  18px;
  --radius-row:   12px;
  --radius-modal: 27px;   /* desktop modal */
  --radius-modal-sm: 24px;/* mobile / compact modal */
  --radius-btn:   999px;  /* capsule */

  /* ── Control heights ── */
  --btn-h:        50px;
  --btn-compact-h:39px;
  --input-h:      48px;
  --topbar-h:     64px;

  /* ── Layout ── */
  --sbar-w:       256px;    /* sidebar when expanded */
  --sbar-w-sm:    106px;    /* sidebar when collapsed */
  --app-max:      1205px;   /* desktop app shell width */
  --app-center-w: 530px;    /* center content width */
  --right-panel-w:419px;

  /* ── Type families ── */
  --font-sans:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ─────────────────────────────────────────────────────────────
   BASE TYPE
   Archivo is the workhorse. Weights: 400 body / 500 UI / 600–700 strong.
   Body size is 14px default; numerics and page titles drop to 500 weight
   with negative letter-spacing (-0.02em) for an editorial feel.
   ───────────────────────────────────────────────────────────── */

html, body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Semantic text tokens — matches prototype's .t-* + .dash-* styles */

.t-display {  /* large numerics on checkout phone */
  font-size: 58px; font-weight: 700; letter-spacing: -0.04em;
  color: var(--text-dark); line-height: 1;
}
.t-title {    /* page title on phone */
  font-size: 32px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--text); line-height: 1.1;
}
.t-h1 {       /* dashboard section titles (store name, modal titles) */
  font-size: 28px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--text);
}
.t-h2 {       /* card titles, "Recent Orders" */
  font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--text);
}
.t-h3 {       /* stat-card values */
  font-size: 28px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--text); line-height: 1;
}
.t-h4 {       /* subsection titles */
  font-size: 20px; font-weight: 500; letter-spacing: -0.025em;
  color: var(--text);
}
.t-body-lg {  /* primary list-row label */
  font-size: 18px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--text);
}
.t-body {     /* button labels, main form input text */
  font-size: 16px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--text);
}
.t-sm {       /* secondary body */
  font-size: 14px; font-weight: 400;
  color: var(--text2);
}
.t-caption {  /* metadata, timestamps */
  font-size: 12px; font-weight: 400;
  color: var(--text3);
}
.t-label {    /* form field labels */
  font-size: 13px; font-weight: 500; color: var(--text2);
}
.t-eyebrow {  /* all-caps section eyebrow (rare) */
  font-size: 10.5px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* Monospace */
code, .mono, .t-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
}

/* Semantic HTML defaults */
h1 { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
h2 { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.025em; color: var(--text); }
h4 { font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); }
p  { font-size: 14px; font-weight: 400; color: var(--text); }
small { font-size: 12px; color: var(--text2); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* Useful helpers */
.text-mute  { color: var(--text2); }
.text-faint { color: var(--text3); }
.text-brand { color: var(--accent); }
.text-danger{ color: var(--red); }
.text-warn  { color: var(--orange); }