/* =============================================================
   PC Schematic — Colors & Type Tokens
   Adapted from the Proton Master / PC Cube UI style guide.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* ── BRAND & UI COLORS ── */
    --pcs-white: #FFFFFF;
    --pcs-dark-navy: #2E4B6A;
    --pcs-atoll: #30597C;
    --pcs-blue-mid: #91A5B5;
    --pcs-charcoal: #293132;
    --pcs-mid-grey: #8E9292;
    --pcs-light-grey-1: #DEDEDE;
    --pcs-light-grey-2: #E7E7E7;
    --pcs-light-grey-3: #F4F4F4;
    --pcs-light-grey-4: #F9F9F9;
    --pcs-off-white: #F3F3F3;

    /* ── EXTENDED UI ── */
    --pcs-near-black: #222222;
    --pcs-dark-grey: #383838;
    --pcs-medium-grey: #787979;
    --pcs-silver: #C8C6C4;
    --pcs-blue-link: #228BCB;
    --pcs-blue-strong: #0964B0;
    --pcs-sky-blue: #92CBEE;

    /* ── ECAD WIRE / SEMANTIC ──
       Drawing colours: what a wire, a room or a selected shape is painted in.
       None of them is UI ink. --pcs-cyan in particular spent a long time
       doubling as the interface's accent — the top menu's hover, a pressed
       ribbon action, a picked symbol card — which is why a teal that means
       "this is a wire" also meant "this is selected". The UI accent is
       --pcs-accent, and it is the brand blue. */
    --pcs-cyan: #00BBCB;
    --pcs-red: #EF3E3B;
    --pcs-orange: #E57428;
    --pcs-yellow: #F7DA8E;
    --pcs-green: #17AB4F;
    --pcs-purple: #A0519F;
    --pcs-lilac: #DFBCD9;

    /* ── SEMANTIC TOKENS ── */
    --pcs-fg-1: var(--pcs-charcoal);
    --pcs-fg-2: var(--pcs-mid-grey);
    --pcs-fg-3: var(--pcs-medium-grey);
    --pcs-fg-inverse: var(--pcs-white);
    --pcs-bg-1: var(--pcs-white);
    --pcs-bg-2: var(--pcs-light-grey-3);
    --pcs-bg-3: var(--pcs-light-grey-2);
    /* A row or cell the user cannot change: lighter than bg-2, so it reads as a state, not a band. */
    --pcs-bg-readonly: var(--pcs-light-grey-4);
    --pcs-bg-canvas: #f0f2f5;
    --pcs-bg-brand: var(--pcs-dark-navy);
    --pcs-bg-brand-2: var(--pcs-atoll);
    --pcs-border: var(--pcs-light-grey-1);
    --pcs-border-soft: var(--pcs-light-grey-2);
    --pcs-accent: var(--pcs-atoll);
    --pcs-focus-color: var(--pcs-atoll);
    --pcs-link: var(--pcs-blue-link);
    /* Its own token because the two paths that draw a link — PcsButton's Link
       variant and .admin-link — rested on two different colours and both
       answered "what does hovering one look like?" with an underline alone. */
    --pcs-link-hover: var(--pcs-blue-strong);
    --pcs-success: var(--pcs-green);
    --pcs-warning: var(--pcs-orange);
    --pcs-danger: var(--pcs-red);

    /* ── CURSORS ──
       Chromium ships its non-native cursors (grab, grabbing, copy, zoom-…) as
       32px bitmaps that blur at fractional Windows scaling; ours are SVGs in
       wwwroot/cursors/, rasterized at device scale so they stay crisp. Always
       use these tokens instead of the bare keyword (the keyword remains as the
       fallback); add a token + SVG pair here when a new non-native cursor is
       needed. Native, DPI-aware cursors (default, pointer, move, text, …) need
       no token. Format: url(file) hotspotX hotspotY, fallback-keyword. */
    --pcs-cursor-grab: url('../cursors/grab.svg') 8 8, grab;
    --pcs-cursor-grabbing: url('../cursors/grabbing.svg') 8 8, grabbing;
    --pcs-cursor-col-resize: url('../cursors/col-resize.svg') 12 12, col-resize;
    --pcs-cursor-row-resize: url('../cursors/row-resize.svg') 12 12, row-resize;

    /* ── FONTS ── */
    --pcs-font-display: 'Inter', sans-serif;
    --pcs-font-ui: 'Inter', sans-serif;
    --pcs-font-mono: 'Courier New', ui-monospace, monospace;

    /* ── SPACING ── */
    --pcs-sp-4: 4px;
    --pcs-sp-10: 10px;
    --pcs-sp-15: 15px;
    --pcs-sp-20: 20px;
    --pcs-sp-24: 24px;
    --pcs-sp-30: 30px;
    --pcs-sp-40: 40px;
    --pcs-sp-60: 60px;
    --pcs-sp-65: 65px;

    /* ── RADII ── */
    --pcs-radius-xs: 3px;
    --pcs-radius-sm: 4px;
    --pcs-radius-md: 6px;
    --pcs-radius-lg: 8px;
    --pcs-radius-xl: 12px;
    --pcs-radius-pill: 6px;
    /* The corner of buttons, fields, selects, segmented controls and nav rows,
       so controls from different screens match wherever they end up side by
       side. Surfaces (dialogs, menus, cards) and chips keep --pcs-radius-md. */
    --pcs-radius-control: var(--pcs-radius-sm);

    /* ── ELEVATION ── */
    --pcs-shadow-1: 0 2px 12px rgba(0,0,0,.10);
    --pcs-shadow-menu: 0 4px 20px rgba(0,0,0,.12);
    --pcs-shadow-modal: 0 8px 32px rgba(0,0,0,.12);
    --pcs-shadow-nav: 0 2px 12px rgba(0,0,0,.25);

    /* ── CONTROL HEIGHTS ──
       The one size scale, matching the PcsControlSize enum the components take
       as a parameter. Buttons, fields, selects, segmented controls and icon
       buttons all resolve to these, so the component path (Size="...") and the
       bare-class path (.pcs-input--sm) cannot drift apart. The dense row is the
       compact square scale for icon buttons in rows, chips and panel chrome. */
    /* One device pixel, whatever the display scaling — every separator in the
       client uses it. A 1px rule is 1.5 device pixels at 150%, and the browser
       snaps that box outwards or inwards depending on the fractional position
       it lands on, so one declared rule rendered 2px in two places and 1px in
       a third within the same row.

       Resolution media queries rather than a JS-published ratio: they are
       correct before the first paint, need no resize listener, and re-evaluate
       on a zoom or a move between displays by themselves. */
    --pcs-hairline: 1px;

    --pcs-control-h-sm: 32px;
    --pcs-control-h-md: 38px;
    --pcs-control-h-lg: 46px;
    --pcs-control-h-dense-sm: 24px;
    --pcs-control-h-dense-md: 28px;
    --pcs-control-h-dense-lg: 32px;

    /* A field's horizontal padding — the line a leading glyph or a trailing
       clear button aligns to, so it belongs to the scale rather than to each
       control that reaches inside a field. */
    --pcs-control-pad-sm: 10px;
    --pcs-control-pad-md: 14px;
    --pcs-control-pad-lg: 16px;

    /* The padding that goes with the dense heights, for a strip that re-points
       --pcs-control-pad-sm at it (the tool-options row). Its own token so that
       row states a token rather than a literal, like every other control. */
    --pcs-control-pad-dense: 8px;

    --pcs-h-row: 60px;

    /* ── STROKE ── */
    --pcs-stroke: 1px;
    --pcs-stroke-color: var(--pcs-light-grey-1);

    /* ── TRANSITIONS ── */
    --pcs-transition: 150ms linear;
    /* A panel opening or closing (PcsCollapsiblePanel, the splitter pane it sits in). */
    --pcs-panel-duration: 120ms;
    --pcs-panel-transition: width var(--pcs-panel-duration) ease;
    /* Feedback that comes and goes on its own: a save's flash and fading check, a busy
       spinner's turn, the nudge of a refused key. */
    --pcs-feedback-duration: 1.2s;
    --pcs-spin-duration: 0.8s;
    --pcs-nudge-duration: 0.3s;

    /* ── PANELS ── */
    /* What a collapsed side panel leaves behind: the strip holding its expand toggle. */
    --pcs-panel-strip: 36px;
}

/* Type presets */
.pcs-ui-label {
    font-family: var(--pcs-font-ui);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--pcs-fg-2);
}

.pcs-mono {
    font-family: var(--pcs-font-mono);
    font-size: 12px;
}

/* The scaling ladder for --pcs-hairline. Each step is the CSS length that is
   exactly one device pixel at that ratio, so a separator is always a single
   crisp line and never a snapped-up double. */
@media (min-resolution: 1.25dppx) and (max-resolution: 1.49dppx) {
    :root { --pcs-hairline: 0.8px; }
}

@media (min-resolution: 1.5dppx) and (max-resolution: 1.99dppx) {
    :root { --pcs-hairline: 0.667px; }
}

@media (min-resolution: 2dppx) and (max-resolution: 2.99dppx) {
    :root { --pcs-hairline: 0.5px; }
}

@media (min-resolution: 3dppx) {
    :root { --pcs-hairline: 0.333px; }
}