/* ═══════════════════════════════════════════════════════════════════════
RCOS Online — design system.
An aviation operations and compliance console, not a dashboard product.
Colour is information: navy is structure, blue is action, teal is the
single accent (focus, current position, live emphasis), and the five
status colours are reserved exclusively for status. Nothing here is
decorative — every tint on this page means something an operator or an
authority reviewer has to act on.
Two rules govern the whole file:
1. Every colour, size, space and radius comes from a token below.
2. Direction is expressed with logical properties, never left/right,
because the Arabic UI ships with dir="rtl" on and there is
no mirror stylesheet.
═══════════════════════════════════════════════════════════════════════ */
/* ══ TOKENS ═══════════════════════════════════════════════════════════ */
:root{
--navy-900:#0A1A30; --navy-800:#11294A; --navy-700:#1A3A66; --navy-600:#234A80;
--blue-600:#2660A8; --blue-500:#3277C4; --blue-100:#E3EDF9;
--teal-700:#0A6E70; --teal-600:#0E8A8C; --teal-500:#14A3A5; --teal-100:#DFF2F2;
--ink-900:#0F1720; --ink-700:#28323F; --ink-600:#3D4855; --ink-500:#5A6573; --ink-400:#7C8794;
--line-300:#CFD7E1; --line-200:#DFE5EC; --line-100:#EDF1F5;
--surface:#FFFFFF; --surface-2:#F7F9FC;
/* ── PHASE C6 — the approved global colour identity (Direction B, PO
final ruling, 30 Aug 2026). RCOS's primary identity is a confident
aviation blue; the retired dark navy remains ONLY as dark-neutral
text (headings, values, data), never as brand or interactive colour.
Values are the ruling's tokens verbatim — do not re-derive them.
primary #1F5FB8 filled controls, brand, hero fills (white text 6.20:1)
hover #1B54A4 · active #17478B
soft #EAF2FE hover/selected washes
nav #FFFFFF bar · #D9E6F8 hairline · #E7F0FE active chip
interactive #2266CC links and link-styled text (5.22:1 on the tint)
icon accent #2F80ED icons and large accents ONLY — never small
white-text controls (3.87:1 is icon-grade)
teal #14A3A5 unchanged, the single live accent
focus #2F80ED
page tint #F6FAFF */
--pri-600:#1F5FB8; --pri-700:#1B54A4; --pri-800:#17478B;
--pri-soft:#EAF2FE;
--nav-hairline:#D9E6F8; --nav-active:#E7F0FE;
--link-600:#2266CC;
--accent-ic:#2F80ED;
--bg:#F6FAFF;
--st-ready-fg:#0E6B3F; --st-ready-bg:#E6F4EC; --st-ready-line:#B9DEC9;
--st-attention-fg:#8A5A00; --st-attention-bg:#FDF3E2; --st-attention-line:#EDD6A8;
--st-blocked-fg:#94231F; --st-blocked-bg:#FBEAE9; --st-blocked-line:#EFC4C1;
--st-progress-fg:#1D4E86; --st-progress-bg:#E8F0FA; --st-progress-line:#C2D6ED;
--st-idle-fg:#4B5563; --st-idle-bg:#F1F3F6; --st-idle-line:#DBE0E7;
/* PHASE C6 — focus moved off the teal accent onto the ruling's focus
blue, so the accent stays reserved for live emphasis. */
--focus:#2F80ED;
/* ── PHASE C (Batch C1) — elevation & shape tokens ─────────────────────
Approved Phase C foundation (PO final visual-direction ruling, 29 Aug
2026). Two elevation levels only: level 1 for standard cards/tiles,
level 2 for menus/dialogs and hover emphasis. Nothing decorative. */
--shadow-1:0 1px 2px rgba(10,26,48,.05), 0 2px 8px rgba(10,26,48,.06);
--shadow-2:0 4px 10px rgba(10,26,48,.10), 0 10px 28px rgba(10,26,48,.12);
--r-pill:999px;
/* ── the UI typeface ───────────────────────────────────────────────────
Calibri is the Program Owner's preferred UI face and is asked for first,
for English and for Arabic alike — Calibri carries both scripts, so a
machine that has it renders the whole product, both languages, in one
family.
NO FONT FILE IS SHIPPED. There is no @font-face here, no webfont, no CDN
and no network request for type anywhere in this product. Calibri is
licensed with Windows and Office and may not be packaged, embedded or
redistributed, so it is used if and only if the operating system already
has it installed. This is a licensing constraint, deliberately met, not
an omission — and the stack below is written so the product is complete
and visually stable on a machine that has never seen Calibri.
The fallbacks, in order and for a reason:
Carlito metric-compatible with Calibri, free, and already present
on most Linux desktops and CI images. Same set widths, so
a Linux operator gets the intended measure with no file
added here.
Segoe UI Windows without Office. Carries Arabic.
system-ui / the platform UI face on macOS, iOS, Android and ChromeOS.
-apple-system
Roboto, Helvetica Neue
Latin-only faces; CSS falls through them per character,
so an Arabic string never stops here.
Noto Sans Arabic, Geeza Pro, Dubai, Tahoma
the realistic Arabic UI faces, named explicitly and ahead
of Arial and of the generic keyword, so an Arabic screen
can never land on a serif or on a face with no Arabic
coverage. Arabic matters as much as English here.
DOCUMENT GENERATION IS NOT AFFECTED BY THIS LINE. The frozen DOCX
generator carries its own controlled document typography and is a
separate, governed design concern; nothing in this stylesheet reaches
it. Do not "make them consistent" — they are deliberately not. */
--font-ui:Calibri,Carlito,"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue","Noto Sans Arabic","Geeza Pro","Dubai",Tahoma,Arial,sans-serif;
/* Unchanged, and it stays unchanged: project ids, document ids, hashes,
coordinates, rule references and ISO dates are set in this stack and
nowhere else. Calibri never appears here. */
--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
/* ── the scale, compensated for Calibri ────────────────────────────────
Measured, not assumed (1ex per em, as the engine resolves it):
Calibri / Carlito 0.4775 DejaVu Sans 0.5469
Segoe UI 0.50 Liberation Sans 0.5283
SF (macOS) ~0.52 FreeSans 0.524
Calibri sets a smaller x-height than every face in the outgoing stack,
and a narrower one again, so keeping the old px values would have made
the whole interface read a step smaller and — a smaller x-height inside
the same 1.55 leading — noticeably looser. Two deliberate compensations,
and they are the compensation; the font-size-adjust below is a
correction on top of them, not a substitute for them:
1. every step of the scale is up ~3.5% (15→15.5, 13.5→14, 12.5→13,
11.5→12, 17→17.5, 20→21, 24→25, 30→31). 0.4775 × 15.5px = 7.40px
of x-height against the outgoing Segoe UI's 0.50 × 15px = 7.50px,
so Calibri alone now lands within 1.3% of the old rendering even in
a browser that implements no adjustment at all;
2. body leading is down from 1.55 to 1.5 (see html, body below), which
is where the "looser" half of the problem was.
The two lifted headline steps (20→21, 24→25, 30→31) are lifted a little
harder than the body, because a narrow face loses more at display size
than at reading size. */
--fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:15.5px;
--fs-lg:17.5px; --fs-xl:21px; --fs-2xl:25px; --fs-3xl:31px;
/* The x-height every UI face is held to. 0.48 × 15.5px = 7.44px, which is
the outgoing Segoe UI rendering to within 1%. What it actually buys is
the FALLBACKS, not Calibri: measured against this target Calibri moves
by +0.5% (it is already right, from the scale above), but DejaVu Sans is
pulled in by 12% and Liberation Sans by 9%. Without it the same screen
is a tenth larger on a Linux operator's machine than on the Program
Owner's, which is exactly the instability this brief is about. */
--x-height:0.48;
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px;
--r-1:3px; --r-2:5px; --r-3:8px;
--shadow-1:0 1px 0 rgba(16,24,40,.04), 0 1px 2px rgba(16,24,40,.06);
--shadow-2:0 2px 4px rgba(16,24,40,.05), 0 10px 24px rgba(16,24,40,.06);
--topbar-h:58px; --page-max:1180px;
/* The inset of a plate. Named because three things have to agree with it
exactly: the plate's own padding, the sticky save bar that bleeds to the
plate's edge, and the next-question marker that bleeds the other way. It
is redefined once, at the tablet breakpoint. */
--card-pad:var(--sp-6);
/* ── border hierarchy ──────────────────────────────────────────────────
Three deliberate levels, so that a border can say how important the
thing it encloses is. Before this every line in the product was one of
two nearly identical greys and nothing read as more structural than
anything else.
--edge-strong an edge you are meant to see and often to act on: form
controls, the rule under a table head, the outline of a
raised surface, a dashed "not built" outline.
--edge a separation between groups: the rule under a section
heading,
, a fieldset, .sep.
--hairline structure inside one group: table rows, list rows, the
line between two interview questions. Never an outline.
One rule constrains the hierarchy: THE BOUNDARY OF AN INTERACTIVE
CONTROL NEVER GOES BELOW --edge-strong. Fields, .opt answers, .btn.ghost
and the designer's palette buttons all stay where they were, because a
control's outline is the thing that says it can be operated and the
refinement is not allowed to spend that. Everything that stepped down a
level is a read-out, a separator or a group edge.
Nothing else in this file states a line colour directly. */
--edge-strong:var(--line-300);
--edge:var(--line-200);
--hairline:var(--line-100);
}
/* Contrast notes, measured against the tokens above (WCAG 2.1 ratios):
• Every --st-*-fg on its own --st-*-bg clears 4.5:1 (lowest is
attention at 5.39:1), so no status token needed adjusting.
• --ink-400 reaches only 3.65:1 on --surface. It is therefore used for
non-text marks and disabled affordances only — every piece of
secondary body text uses --ink-500 (5.93:1 on white, 5.37:1 on --bg).
• --teal-600 reaches only 4.17:1 on white, so teal *text* always uses
--teal-700 (6.04:1). --teal-600 is used as a fill behind white. */
/* Two derived names the issued block does not carry. Both appear in a dozen
places and must not be allowed to drift apart, so they are named rather
than written out:
--on-navy is the foreground on any navy surface (topbar, primary button,
hero cell). It resolves to the same white as --surface; it is a
separate name because it is a foreground role, not a panel.
--overlay-* are the translucent whites used for hover and current state
on navy. The issued palette has no alpha values, and a solid tint here
would have to be re-picked for every navy step. */
:root{
--on-navy:var(--surface);
--overlay-1:rgba(255,255,255,.08);
--overlay-2:rgba(255,255,255,.10);
--overlay-3:rgba(255,255,255,.12);
--overlay-line:rgba(255,255,255,.32);
}
/* Legacy token aliases. signin.html carries its own