@custom-variant dark (&:is(.dark *));
/* Indian mode is the console's: the phone skin's class on the same element switches it off there. */
@custom-variant indian (&:is(.indian:not(.field-app) *));

:root {
    color-scheme: light;
    --ground: #E8EBE6;
    --sheet: #F6F7F3;
    --raised: #FFFFFF;
    --ink: #16191C;
    --ink-2: #40464C;
    --ink-3: #5A6168;
    --rule: #C3C8C2;
    --edge: #5A6168;
    --fibre: #0E5F59;
    --on-fibre: #FFFFFF;
    --crew: #2458C5;
    --on-crew: #FFFFFF;
    --fault: #B00507;
    --on-fault: #FFFFFF;
    --weak: #884C00;
    --up: #0C683D;
    --focus: #16191C;
    --act: #16191C;
    --on-act: #E8EBE6;
    --grid: #DCE0DA;
    --track: #E8EBE6;
    --plane-vitals: #4C5C9F;
    --plane-plant: #934D7B;
    --plane-fleet: #67599F;
    --block-network: #4456B8;
    --block-people: #A23B82;
    --block-account: #6A4BBF;
    --on-area: #FFFFFF;
    --desk-operate: #0E5F59;
    --desk-network: #4456B8;
    --desk-people: #A23B82;
    --desk-account: #6A4BBF;
    --desk-org: #5A6168;
    --desk-crew: #2458C5;
    --on-desk: #FFFFFF;
    --map-line-violet: #a98bef;
    --map-line-magenta: #dd7fc0;
    --map-line-teal: #4fc3b5;
    --map-line-lime: #b0c95f;
    --map-line-indigo: #8093f0;
    --map-line-chalk: #d3d7df;
}

.dark {
    color-scheme: dark;
    --ground: #000000;
    --sheet: #121212;
    --raised: #1C1C1C;
    --ink: #E6E6E6;
    --ink-2: #BDBDBD;
    --ink-3: #A3A3A3;
    --rule: #383838;
    --edge: #636363;
    --fibre: #5AC8BC;
    --on-fibre: #000000;
    --crew: #70B8FF;
    --on-crew: #06132B;
    --fault: #FF6266;
    --on-fault: #2B120E;
    --weak: #FFA900;
    --up: #4CC38A;
    --focus: #70B8FF;
    --act: #70B8FF;
    --on-act: #06132B;
    --grid: #2A2A2A;
    --track: #2A2A2A;
    --plane-vitals: #808ECA;
    --plane-plant: #B77CA4;
    --plane-fleet: #9787C3;
    --block-network: #8093F0;
    --block-people: #DD7FC0;
    --block-account: #A98BEF;
    --on-area: #000000;
    --desk-operate: #18655F;
    --desk-network: #4456B8;
    --desk-people: #A23B82;
    --desk-account: #6A4BBF;
    --desk-org: #5A6168;
    --desk-crew: #2458C5;
    --on-desk: #E6E6E6;
}

:root {
    --background: var(--ground);
    --card: var(--sheet);
    --popover: var(--raised);
    --muted: var(--ground);
    --secondary: var(--raised);
    --accent: color-mix(in oklab, var(--ink) 7%, transparent);
    --selected: color-mix(in oklab, var(--ink) 9%, var(--sheet));

    --foreground: var(--ink);
    --muted-foreground: var(--ink-2);
    --faint-foreground: var(--ink-3);
    --ghost-foreground: var(--rule);

    --border: var(--rule);
    --border-strong: var(--edge);
    --input: var(--rule);
    --ring: var(--focus);

    --primary: var(--act);
    --primary-foreground: var(--on-act);
    --primary-soft: color-mix(in oklab, var(--act) 10%, transparent);
    --destructive: var(--fault);
    --on-destructive: var(--on-fault);
    --destructive-soft: color-mix(in oklab, var(--fault) 16%, transparent);
    --destructive-edge: color-mix(in oklab, var(--fault) 40%, transparent);
    --success: var(--up);
    --success-foreground: var(--ground);
    --success-soft: color-mix(in oklab, var(--up) 16%, transparent);
    --success-edge: color-mix(in oklab, var(--up) 40%, transparent);
    --warning: var(--weak);
    --warning-foreground: var(--raised);
    --warning-soft: color-mix(in oklab, var(--weak) 16%, transparent);
    --warning-edge: color-mix(in oklab, var(--weak) 40%, transparent);

    --plane-optical: var(--fibre);
    --plane-traffic: var(--crew);
    --chart-empty: var(--rule);
    --chart-grid: var(--grid);
    --bar-track: var(--track);

    --area-operate: var(--fibre);
    --area-network: var(--block-network);
    --area-people: var(--block-people);
    --area-account: var(--block-account);
    --area-org: var(--ink-3);

    --area-desk-operate: var(--desk-operate);
    --area-desk-network: var(--desk-network);
    --area-desk-people: var(--desk-people);
    --area-desk-account: var(--desk-account);
    --area-desk-org: var(--desk-org);
    --area-desk-crew: var(--desk-crew);
}

@theme inline {
    --font-sans: 'Overpass', system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-axis: 0.875rem;
    --text-axis--line-height: 1.4;
    --text-xs: 0.9375rem;
    --text-xs--line-height: 1.45;
    --text-sm: 1rem;
    --text-sm--line-height: 1.5;

    --radius-*: initial;
    --radius-sm: 2px;

    --color-background: var(--background);
    --color-card: var(--card);
    --color-popover: var(--popover);
    --color-muted: var(--muted);
    --color-secondary: var(--secondary);
    --color-accent: var(--accent);
    --color-selected: var(--selected);

    --color-foreground: var(--foreground);
    --color-muted-foreground: var(--muted-foreground);
    --color-faint-foreground: var(--faint-foreground);
    --color-ghost-foreground: var(--ghost-foreground);

    --color-border: var(--border);
    --color-border-strong: var(--border-strong);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-primary-soft: var(--primary-soft);
    --color-destructive: var(--destructive);
    --color-on-destructive: var(--on-destructive);
    --color-destructive-soft: var(--destructive-soft);
    --color-destructive-edge: var(--destructive-edge);
    --color-success: var(--success);
    --color-success-foreground: var(--success-foreground);
    --color-success-soft: var(--success-soft);
    --color-success-edge: var(--success-edge);
    --color-warning: var(--warning);
    --color-warning-foreground: var(--warning-foreground);
    --color-warning-soft: var(--warning-soft);
    --color-warning-edge: var(--warning-edge);

    --color-chart-grid: var(--chart-grid);
    --color-bar-track: var(--bar-track);

    --color-fibre: var(--fibre);
    --color-on-fibre: var(--on-fibre);
    --color-crew: var(--crew);
    --color-on-crew: var(--on-crew);

    --color-area-operate: var(--area-operate);
    --color-area-network: var(--area-network);
    --color-area-people: var(--area-people);
    --color-area-account: var(--area-account);
    --color-area-org: var(--area-org);
    --color-on-area: var(--on-area);

    --color-area-desk-operate: var(--area-desk-operate);
    --color-area-desk-network: var(--area-desk-network);
    --color-area-desk-people: var(--area-desk-people);
    --color-area-desk-account: var(--area-desk-account);
    --color-area-desk-org: var(--area-desk-org);
    --color-area-desk-crew: var(--area-desk-crew);
    --color-on-desk: var(--on-desk);
}