/* Smartcode Design System tokens — copied from the smartcode-design-system project
   (tokens/fonts.css, colors.css, typography.css, spacing.css, marketing.css).
   Edit values here only if the design system changes. Page styling lives in site.css. */

/* ---------- Fonts: real TTFs from the Android app (app/src/main/res/font) ----------
   Ubuntu = display/headings/buttons · Ubuntu Sans = big tabular numerics ·
   Inter = body/UI · JetBrains Mono = codes, order numbers, eyebrows. */
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/inter_regular.ttf") format("truetype")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url("../assets/fonts/inter_medium.ttf") format("truetype")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url("../assets/fonts/inter_semibold.ttf") format("truetype")}
@font-face{font-family:"Inter";font-weight:700;font-style:normal;font-display:swap;src:url("../assets/fonts/inter_bold.ttf") format("truetype")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/jetbrains_mono_regular.ttf") format("truetype")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-style:normal;font-display:swap;src:url("../assets/fonts/jetbrains_mono_med.ttf") format("truetype")}
@font-face{font-family:"JetBrains Mono";font-weight:600;font-style:normal;font-display:swap;src:url("../assets/fonts/jetbrains_mono_semibold.ttf") format("truetype")}
@font-face{font-family:"Ubuntu";font-weight:700;font-style:normal;font-display:swap;src:url("../assets/fonts/ubuntu_bold.ttf") format("truetype")}
@font-face{font-family:"Ubuntu Sans";font-weight:700;font-style:normal;font-display:swap;src:url("../assets/fonts/ubuntu_sans_bold.ttf") format("truetype")}
@font-face{font-family:"Ubuntu Sans";font-weight:800;font-style:normal;font-display:swap;src:url("../assets/fonts/ubuntu_sans_extrabold.ttf") format("truetype")}

/* ---------- Colour ----------
   Brand = Material Indigo primary + Deep Orange accent; neutrals = Material greys. */
:root{
  --sc-indigo-50:#E8EAF6;
  --sc-indigo-100:#C5CAE9;
  --sc-indigo-500:#3F51B5;  /* brand_primary */
  --sc-indigo-600:#3949AB;  /* hover */
  --sc-indigo-700:#303F9F;  /* pressed */
  --sc-indigo-900:#1A237E;

  --sc-orange-500:#FF5722;  /* brand_accent — CTAs */
  --sc-orange-700:#E64A19;
  --sc-orange-900:#E65100;

  --sc-blue-500:#2196F3;    /* app mark blue */
  --sc-blue-600:#1E87DA;

  --sc-ink:#212121;
  --sc-ink-2:#1F1F1F;
  --sc-ink-3:#757575;
  --sc-ink-4:#B4B4B4;
  --sc-paper:#FFFFFF;
  --sc-paper-2:#F5F5F5;
  --sc-line:#E0E0E0;
  --sc-white:#FFFFFF;
  --sc-black:#000000;

  --sc-success:#388E3C;
  --sc-success-tint:#E8F5E9;
  --sc-scan-pulse:#4CAF50;
  --sc-warning:#F0A946;
  --sc-warning-tint:#FFF3E0;
  --sc-danger:#D32F2F;
  --sc-danger-tint:#FCEAE8;
  --sc-info:#1976D2;
  --sc-muted:#9E9E9E;

  /* Semantic aliases */
  --brand:var(--sc-indigo-500);
  --brand-dark:var(--sc-indigo-700);
  --brand-hover:var(--sc-indigo-600);
  --brand-tint:var(--sc-indigo-50);
  --accent:var(--sc-orange-500);
  --accent-dark:var(--sc-orange-700);
  --indicator:var(--sc-orange-900);

  --text-primary:var(--sc-ink);
  --text-secondary:var(--sc-ink-3);
  --text-muted:var(--sc-ink-4);
  --text-on-brand:var(--sc-white);
  --text-link:var(--sc-indigo-500);

  --surface:var(--sc-paper);
  --surface-sunken:var(--sc-paper-2);
  --surface-brand:var(--sc-indigo-500);
  --surface-brand-dark:var(--sc-indigo-700);

  --border:var(--sc-line);
  --border-strong:var(--sc-ink-4);
  --focus-ring:var(--sc-indigo-500);

  /* ---------- Typography ---------- */
  --font-display:"Ubuntu","Ubuntu Sans",system-ui,sans-serif;
  --font-numeric:"Ubuntu Sans","Ubuntu",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --font-headline:"Space Grotesk",var(--font-display); /* marketing headline face (Google Fonts) */

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;

  --text-display:64px;
  --text-headline:40px;
  --text-section:22px;
  --text-list-title:20px;
  --text-order-number:16px;
  --text-body:17px;
  --text-ui:14px;
  --text-tab:12px;
  --text-mono:13px;
  --text-button:11px;
  --text-eyebrow:10px;
  --text-quantity:38px;

  --tracking-tight:-0.03em;
  --tracking-snug:-0.01em;
  --tracking-wide:0.06em;
  --tracking-wider:0.08em;
  --tracking-widest:0.14em;

  /* ---------- Spacing, radius, elevation, motion (Material 4dp grid) ---------- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;

  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-pill:999px;
  --radius-round:50%;

  --elevation-1:0 1px 2px rgba(0,0,0,.14),0 1px 3px rgba(0,0,0,.08);
  --elevation-2:0 2px 4px rgba(0,0,0,.14),0 1px 5px rgba(0,0,0,.10);
  --elevation-4:0 4px 8px rgba(0,0,0,.16),0 2px 4px rgba(0,0,0,.12);
  --elevation-8:0 8px 16px rgba(0,0,0,.18),0 4px 8px rgba(0,0,0,.12);

  --touch-min:48px;

  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-decelerate:cubic-bezier(0,0,.2,1);
  --ease-accelerate:cubic-bezier(.4,0,1,1);
  --dur-fast:150ms;
  --dur-base:250ms;
  --dur-slow:400ms;
}

/* ---------- Type ladder utility classes ---------- */
.sc-display{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-display);line-height:.95;letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.sc-headline{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-headline);line-height:1.05;letter-spacing:-0.02em;color:var(--text-primary)}
.sc-section{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-section);line-height:1.2;letter-spacing:var(--tracking-snug);color:var(--text-primary)}
.sc-list-title{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-list-title);line-height:1.1;letter-spacing:var(--tracking-snug);color:var(--text-primary)}
.sc-body{font-family:var(--font-body);font-weight:var(--fw-regular);font-size:var(--text-body);line-height:1.55;color:var(--text-primary)}
.sc-ui{font-family:var(--font-body);font-weight:var(--fw-medium);font-size:var(--text-ui);line-height:1.4;color:var(--text-primary)}
.sc-mono{font-family:var(--font-mono);font-weight:var(--fw-medium);font-size:var(--text-mono);line-height:1.4;letter-spacing:0.02em;font-feature-settings:"tnum";color:var(--text-primary)}
.sc-tab{font-family:var(--font-body);font-weight:var(--fw-semibold);font-size:var(--text-tab);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-primary)}
.sc-button-label{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-button);text-transform:uppercase;letter-spacing:var(--tracking-wider)}
.sc-eyebrow{font-family:var(--font-mono);font-weight:var(--fw-medium);font-size:var(--text-eyebrow);text-transform:uppercase;letter-spacing:var(--tracking-widest);color:var(--text-secondary)}

/* ---------- Marketing layer ---------- */
.sc-hero-display{font-family:var(--font-headline);font-weight:700;font-size:clamp(46px,8.2vw,132px);line-height:1.04;letter-spacing:-.04em}
.sc-marketing-headline{font-family:var(--font-headline);font-weight:700;font-size:clamp(34px,5vw,60px);line-height:.98;letter-spacing:-.03em}

/* Barcode motif — set `color` to tint; use as a section overlay or divider strip. */
.sc-bars{background-image:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 7px,currentColor 7px 9px,transparent 9px 15px,currentColor 15px 18px,transparent 18px 20px,currentColor 20px 21px,transparent 21px 27px)}