/* RMI Auto App: shared design tokens. One file for the homepage, the phone app, the owner dashboard,
   the provider console, sign-in, customer pages and emails. No surface declares its own colours.
   Light, one blue, no brass, no navy surfaces. Contrast is checked by tests/TokensTest.php. */

@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-latin-wght.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-latin-ext-wght.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
	/* Surfaces and text */
	--bg:#F6F8FB;          /* page */
	--surface:#FFFFFF;     /* cards, sheets, tables, inputs */
	--ink:#0F1A2A;         /* headings and body */
	--muted:#4B586B;       /* secondary text */
	--line:#DDE2EA;        /* dividers and card edges, decorative only */
	--control:#7C8799;     /* input and outline-button borders, 3:1 on white */

	/* The one action colour */
	--primary:#1D4ED8;
	--primary-hover:#1A44BD;
	--primary-tint:#EEF3FF;
	--on-primary:#FFFFFF;

	/* Status: text on its tint, always with a dot and a word */
	--ok:#0A6B3A;   --ok-bg:#E6F4EC;
	--wait:#8A4B00; --wait-bg:#FFF3D6;
	--stop:#B42318; --stop-bg:#FDECEA;
	--neutral:#4B586B; --neutral-bg:#E9ECF1;

	/* Registration plate chip: yellow carries one meaning only */
	--plate:#FFC20E;

	/* Type: one family, three weights */
	--font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	--w-regular:400; --w-semi:600; --w-bold:700;
	--t-12:.75rem; --t-14:.875rem; --t-16:1rem; --t-20:1.25rem; --t-28:1.75rem; --t-40:2.5rem; --t-52:3.25rem;
	--lh-tight:1.1; --lh-snug:1.25; --lh-body:1.5;

	/* Spacing: 4px base */
	--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;

	/* Radii: four only */
	--r-1:4px; --r-2:8px; --r-3:12px; --r-pill:999px;

	/* Elevation: three only, border first */
	--shadow-0:none;
	--shadow-1:0 1px 2px rgba(15,26,42,.06);
	--shadow-2:0 1px 2px rgba(15,26,42,.06),0 12px 32px rgba(15,26,42,.08);

	/* Touch and motion: taps and hovers only, nothing loops */
	--tap:44px; --tap-primary:52px;
	--dur-1:120ms; --dur-2:200ms; --ease:cubic-bezier(.2,0,0,1);
	--max-content:1120px;
}

@media (prefers-reduced-motion:reduce){
	:root{--dur-1:0ms;--dur-2:0ms}
	*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Shared components. Surfaces use these names so a car and a status look the same everywhere. */

/* Registration plate chip: how workshop people already identify a job. */
.wjc-plate{display:inline-flex;align-items:stretch;border:2px solid var(--ink);border-radius:6px;background:var(--surface);color:var(--ink);font-weight:var(--w-bold);letter-spacing:.04em;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden}
.wjc-plate::before{content:"";width:9px;background:var(--plate);flex:0 0 9px}
.wjc-plate>span{padding:2px 9px}

/* Status pill: dot plus word, three colours plus neutral. */
.wjc-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:6px;font-size:var(--t-12);font-weight:var(--w-semi);line-height:1;white-space:nowrap;background:var(--neutral-bg);color:var(--neutral)}
.wjc-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.wjc-pill.ok{background:var(--ok-bg);color:var(--ok)}
.wjc-pill.wait{background:var(--wait-bg);color:var(--wait)}
.wjc-pill.stop{background:var(--stop-bg);color:var(--stop)}

/* Buttons: one filled primary per screen, calm, no glow. */
.wjc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:var(--tap);padding:0 var(--s-5);border:1px solid var(--primary);border-radius:var(--r-2);background:var(--primary);color:var(--on-primary);font-weight:var(--w-semi);font-size:var(--t-16);text-decoration:none;cursor:pointer;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.wjc-btn:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.wjc-btn:active{background:var(--primary-hover)}
.wjc-btn.outline{background:var(--surface);color:var(--ink);border-color:var(--control)}
.wjc-btn.outline:hover{background:var(--bg)}
.wjc-btn.big{min-height:var(--tap-primary)}
.wjc-btn:disabled{background:var(--neutral-bg);border-color:var(--neutral-bg);color:var(--muted);cursor:not-allowed}
.wjc-btn:focus-visible,.wjc-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}