/**
 * Attic Fanatics design system — vendored tokens.
 *
 * Concatenated from the design handoff's _ds/tokens/*.css in the order
 * styles.css imports them. Flattened into one file on purpose: the original
 * chains six @import requests, and this app is a PWA used in an attic on one
 * bar of signal, where six extra round trips before first paint is the wrong
 * trade. The component bundle (_ds_bundle.js, 139KB) is deliberately not
 * shipped — the redesign is recreated in the app's own markup.
 *
 * Source of truth: the design system, not this copy. Regenerate rather than
 * hand-edit. The @import of Google Fonts is dropped: Inter is only used by the
 * dashboard apps, while the field stack resolves to SF Pro on the phones this
 * runs on and needs no webfont.
 */

/* ── typography ── */
:root{
/* Families — exactly the stacks shipped in the apps */
--font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
/* Apple field/display stacks: -apple-system + BlinkMacSystemFont already resolve to SF Pro Text /
   SF Pro Display on Apple hardware (which is all the field/phone apps run on). The families are NOT
   named explicitly because SF Pro has no distributable webfont — naming it only creates a dead
   reference. Non-Apple devices fall through to Segoe UI, exactly as the source apps do. */
--font-field:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--font-display:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,'SF Mono','Roboto Mono',Consolas,monospace;
--font-num:var(--font-body);

/* Weights actually used */
--fw-regular:400; /* @kind other */
--fw-medium:500; /* @kind other */
--fw-semibold:600; /* @kind other */
--fw-bold:700; /* @kind other */
--fw-heavy:800; /* @kind other */
--fw-black:900; /* @kind other */

/* Dashboard/web scale (Inter, payroll + office) */
--text-eyebrow:11px;--text-micro:10px;--text-caption:11px;--text-small:12px;--text-body-sm:13px;
--text-body:14px;--text-body-lg:15px;--text-title:18px;--text-h2:23px;--text-h1:32px;
--text-kpi:30px;--text-kpi-hero:clamp(40px,5.5vw,60px);

/* Field/iPad scale (SF Pro, warehouse + quote builder — never below 16px for inputs) */
--text-field-label:12px;--text-field-input:20px;--text-field-button:22px;--text-field-h1:34px;
--text-field-metric:28px;--text-field-big:48px;

/* Line heights + tracking */
--lh-tight:1.05; /* @kind other */
--lh-heading:1.18; /* @kind other */
--lh-body:1.35; /* @kind other */
--lh-relaxed:1.5; /* @kind other */
--tracking-h1:-0.02em; /* @kind other */
--tracking-kpi:-0.03em; /* @kind other */
--tracking-label:0.06em; /* @kind other */
--tracking-eyebrow:0.08em; /* @kind other */
--tracking-caps:0.12em; /* @kind other */

/* Aliases */
--text-mono:var(--font-mono);
}

/* ── colors ── */
:root{
/* ── BRAND CORE — read straight out of the vector logo delivery (assets/logo-full.svg,
   assets/logo-mark.svg, assets/mascot.svg). This is the only source of truth. ── */
--af-black:#030504;          /* logo keyline + drop shadow */
--af-paper:#f3f5fa;          /* ATTIC FANATICS letterforms — cool off-white, not cream */
--af-sand-300:#f7be75;       /* house siding + sun disc */
--af-teal-800:#024354;       /* roof frame + INSULATION & DUCTWORK */
/* Teal ramp — tints and shades of the roof teal */
--af-teal-950:#011f28;--af-teal-900:#012f3c;--af-teal-700:#0a5d72;--af-teal-600:#147d95;
--af-teal-500:#2c9bb3;--af-teal-200:#a9d6e0;--af-teal-100:#dcedf2;--af-teal-50:#eef7fa;
/* Sand ramp — tints and shades of the sun and siding sand */
--af-sand-600:#c4823a;--af-sand-500:#e0a257;--af-sand-200:#fbdcb2;--af-sand-100:#fdeed9;--af-sand-50:#fef7ee;
/* Mascot support colors (from assets/mascot.svg — he reuses sand + teal) */
--af-duct:#7b7d71;--af-duct-dark:#4f514a;--af-foam:#d4dfe6;--af-leather:#bf6636;--af-leather-dark:#a33d23;
/* Brand semantic aliases — use these when placing the mark or brand chrome */
--brand-ink:var(--af-black);--brand-paper:var(--af-paper);
--brand-sun:var(--af-sand-300);--brand-frame:var(--af-teal-800);
--brand-mark-bg:var(--af-paper);   /* preferred field behind the full-color mark */

/* ── Neutral ramp — teal-tinted greys, so neutrals sit under the brand rather than beside it ── */
--slate-50:#f7fafb;--slate-100:#f1f6f7;--slate-150:#e8eff1;--slate-200:#dde7ea;--slate-250:#d2dee2;
--slate-300:#c2d1d6;--slate-400:#93a7ae;--slate-500:#66808a;--slate-600:#4a636c;--slate-700:#33505a;
--slate-800:#1d3a45;--slate-900:#0b2027;--slate-950:#04141a;

/* ── State colors — the only hues outside teal and sand, and only ever for meaning ── */
--green-600:#0f7a55;--green-700:#0a6244;--green-500:#2fae86;--green-400:#5fcda9;
--amber-600:#c4823a;--amber-700:#a86a29;
--red-600:#b42318;--red-700:#912019;--red-400:#f08a80;

/* ── Semantic base (light default) ── */
--surface:#ffffff;--surface-2:var(--slate-50);--surface-page:#f2f6f8;
--border:var(--slate-150);--border-strong:var(--slate-250);
--text:var(--slate-900);--text-dim:var(--slate-600);--text-mute:var(--slate-400);--text-invert:#ffffff;
--accent:var(--af-teal-800);--accent-ink:var(--af-teal-900);--accent-fg:#ffffff;
--accent-soft:rgba(2,67,84,.07);--accent-line:rgba(2,67,84,.20);
--pos:var(--green-600);--pos-ink:var(--green-700);--pos-soft:rgba(15,122,85,.10);--pos-line:rgba(15,122,85,.22);
--warn:var(--amber-600);--warn-ink:var(--amber-700);--warn-soft:rgba(196,130,58,.12);--warn-line:rgba(196,130,58,.26);
--alarm:var(--red-600);--alarm-soft:rgba(180,35,24,.08);--alarm-line:rgba(180,35,24,.22);

/* Status message surfaces */
--ok-bg:#ecf7f2;--ok-line:#b6e2d2;--ok-text:#0a6244;
--bad-bg:#fdf2f1;--bad-line:#f6cdc9;--bad-text:#912019;
}

/* ── spacing ── */
:root{
/* Spacing steps present in the shipped CSS (not snapped to a 4px grid) */
--space-1:2px;--space-2:4px;--space-3:6px;--space-4:8px;--space-5:10px;--space-6:12px;
--space-7:14px;--space-8:16px;--space-9:18px;--space-10:20px;--space-11:22px;--space-12:24px;
--space-14:28px;--space-16:32px;--space-18:36px;--space-20:40px;--space-24:48px;--space-28:60px;

/* Gaps by density */
--gap-tight:8px;--gap-grid:12px;--gap-panel:14px;--gap-section:18px;

/* Padding recipes lifted from source */
--pad-card:18px;                 /* field .panel, quote .card */
--pad-panel:20px 22px 18px;      /* payroll .panel */
--pad-kpi:18px 20px 20px;
--pad-input-web:13px 16px;
--pad-input-field:14px 16px;
--pad-button-web:11px 16px;
--pad-button-field:18px 20px;
--pad-pill:7px 11px;

/* Layout frames */
--shell-web:1560px;--workspace-web:1320px;--shell-field:1120px;--shell-mobile:480px;
--sidebar-payroll:232px;--sidebar-office:278px;
--tap-min:44px;--tap-field:58px;
}

/* ── shape ── */
:root{
/* Radii, per surface family */
--radius-xs:6px;--radius-sm:8px;--radius:12px;--radius-md:14px;--radius-lg:16px;
--radius-xl:18px;--radius-2xl:22px;--radius-card-hero:24px;--radius-sheet:20px 20px 0 0;--radius-pill:999px;

/* Borders */
--border-width:1px;--border-width-field:1.5px;--border-width-tile:2px; /* @kind spacing */

/* Shadows */
--shadow-sm:0 1px 2px rgba(15,23,42,.05);
--shadow:0 1px 3px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.06);
--shadow-panel-field:0 14px 32px rgba(2,67,84,.08),0 2px 4px rgba(2,67,84,.05);
--shadow-logo:drop-shadow(0 8px 14px rgba(2,67,84,.16));
--shadow-modal:0 24px 60px rgba(15,23,42,.24);
--shadow-keypad:0 24px 52px rgba(2,67,84,.24);
--shadow-dark-card:0 24px 90px rgba(0,0,0,.28);

/* Focus rings — accent-tinted, 3px, no outline offset on field inputs */
--ring-accent:0 0 0 3px var(--accent-soft);
--ring-teal:var(--ring-accent);   /* legacy alias */
--ring-orange:var(--ring-accent); /* legacy alias */
--focus-outline:2px solid var(--accent); /* @kind other */
}

/* ── motion ── */
:root{
/* Short, functional, no bounce. Colour/shadow only on web; scale-down on touch. */
--dur-fast:.12s; /* @kind other */
--dur-base:.15s; /* @kind other */
--dur-slow:.18s; /* @kind other */
--dur-toggle:.25s; /* @kind other */
--dur-fade:.15s; /* @kind other */
--ease:ease; /* @kind other */
--ease-out:ease-out; /* @kind other */
--transition-interactive:color var(--dur-base),background var(--dur-base); /* @kind other */
--transition-lift:box-shadow var(--dur-slow),transform var(--dur-slow); /* @kind other */
--press-scale-web:1; /* @kind other */
--press-scale-field:.98; /* @kind other */
--press-scale-row:.99; /* @kind other */
--hover-lift:-1px; /* @kind spacing */
--pulse-duration:2.6s; /* @kind other */
}
@keyframes af-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.28);opacity:.55}}
@keyframes af-fade{from{opacity:0}to{opacity:1}}

/* ── themes ── */
/* Two brand surfaces. Put the class on <body> (or any wrapper); every component in this
   system reads only semantic tokens, so one component renders correctly in both.
   Light is the default for anything a customer or a crew member reads in daylight;
   dark is for back-office and command-center screens. */

/* Light — paper-white cards on a teal-tinted page, brand teal as the accent */
.af-light{
--surface:#ffffff;--surface-2:#f7fafb;--surface-page:#f2f6f8;--surface-input:#ffffff;
--border:#e8eff1;--border-strong:#d2dee2;
--text:#0b2027;--text-dim:#4a636c;--text-mute:#93a7ae;
--accent:#024354;--accent-ink:#012f3c;--accent-fg:#ffffff;
--accent-soft:rgba(2,67,84,.07);--accent-line:rgba(2,67,84,.20);
--dark:#012f3c;--info:#024354;
--pos:#0f7a55;--pos-ink:#0a6244;--pos-soft:rgba(15,122,85,.10);--pos-line:rgba(15,122,85,.22);
--warn:#c4823a;--warn-ink:#a86a29;--warn-soft:rgba(196,130,58,.12);--warn-line:rgba(196,130,58,.26);
--alarm:#b42318;--alarm-soft:rgba(180,35,24,.08);--alarm-line:rgba(180,35,24,.22);
--brand-mark:#024354;
--font-ui:var(--font-body);--radius-control:8px;--radius-surface:12px;--ring:var(--ring-accent);
background:var(--surface-page);color:var(--text);font-family:var(--font-body);
}

/* Dark — deep brand teal, sand as the accent. Also ships as [data-theme="dark"] on <html>. */
.af-dark,[data-theme="dark"] .af-light{
--surface:#0d2a34;--surface-2:#12394a;--surface-page:#011f28;--surface-input:#0d2a34;--surface-rail:#01161d;
--border:#1b4453;--border-strong:#28596b;
--text:#e9f2f4;--text-dim:#9ab5bf;--text-mute:#61818d;
--accent:#f7be75;--accent-ink:#fbdcb2;--accent-fg:#012f3c;
--accent-soft:rgba(247,190,117,.12);--accent-line:rgba(247,190,117,.38);
--dark:#011f28;--info:#59b6cb;
--pos:#3ec48f;--pos-ink:#6fdcae;--pos-soft:rgba(62,196,143,.14);--pos-line:rgba(62,196,143,.32);
--warn:#f7be75;--warn-ink:#fbdcb2;--warn-soft:rgba(247,190,117,.14);--warn-line:rgba(247,190,117,.32);
--alarm:#f08a80;--alarm-soft:rgba(240,138,128,.14);--alarm-line:rgba(240,138,128,.34);
--brand-mark:#f7be75;
--font-ui:var(--font-body);--radius-control:8px;--radius-surface:12px;--ring:var(--ring-accent);
--shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 2px 6px rgba(0,0,0,.4),0 12px 30px rgba(0,0,0,.45);
background:var(--surface-page);color:var(--text);font-family:var(--font-body);
}

/* Touch scale — layer on either surface for iPad and phone work in the field:
   bigger targets, softer radii, no hover affordances. */
.af-touch{--radius-control:10px;--radius-surface:16px;--tap-min:58px;--font-ui:var(--font-field);font-family:var(--font-field)}