/* ==========================================================================
   OMi Partners Portal - design tokens (docs/DESIGN-SYSTEM.md)
   Source: dev/design-preview/assets/tokens.css (approved mockup). Everything the
   components use is a custom property, so dark mode is only a token swap.
   Loaded after Bootstrap 5.3; components.css maps Bootstrap's --bs-* onto these.
   ========================================================================== */

/* Self-hosted fonts (Fonts/). Only the weights in use; a face is downloaded only when text uses it. */
@font-face { font-family: "Inter"; src: url("../../Fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../../Fonts/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../../Fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../../Fonts/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../../Fonts/SpaceMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../../Fonts/SpaceMono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* --- Brand: the omi wordmark blue ------------------------------------ */
  --omi-blue-50:  #EEF4FB;
  --omi-blue-100: #DCE8F6;
  --omi-blue-200: #B9D1EC;
  --omi-blue-300: #8DB3DE;
  --omi-blue-400: #6699D0;
  --omi-blue-500: #4A86C5;   /* logo blue: marks, focus ring, large type only */
  --omi-blue-600: #3770AF;   /* buttons, links, ticks: 5.1:1 on white */
  --omi-blue-700: #2C5B90;
  --omi-blue-800: #23466E;
  --omi-blue-900: #1A3352;

  /* --- The swoosh (spectrum): 3px brand line, login hero, empty states,
         file-type colours. Never as fills behind text. ------------------- */
  --spectrum-red:    #E2231A;
  --spectrum-orange: #F07F00;
  --spectrum-yellow: #F9BE00;
  --spectrum-green:  #8DB92E;
  --spectrum-teal:   #0E9AC8;
  --spectrum-navy:   #3B4A9A;
  --spectrum: linear-gradient(90deg, #E2231A 0%, #F07F00 22%, #F9BE00 42%, #8DB92E 62%, #0E9AC8 82%, #3B4A9A 100%);
  --spectrum-v: linear-gradient(180deg, #E2231A, #F07F00, #F9BE00, #8DB92E, #0E9AC8, #3B4A9A);

  /* --- Neutrals: cool, navy-tinted ------------------------------------ */
  --ink-900: #18213A;   /* headings, body */
  --ink-700: #36415C;   /* secondary text */
  --ink-500: #5A6580;   /* muted text, 5.7:1 on white */
  --ink-400: #8A93A8;   /* icons, placeholder (not for text < 18px) */
  --ink-300: #B4BBCA;

  /* --- Semantic surfaces (what components use) ------------------------ */
  --bg:            #F3F5F9;   /* app background */
  --surface:       #FFFFFF;   /* panels, tables, cards */
  --surface-2:     #F7F9FC;   /* table header, hover, inset */
  --surface-3:     #EBEFF5;   /* pressed, selected neutral */
  --line:          #DFE4EC;   /* hairlines */
  --line-strong:   #C6CEDB;   /* inputs, dividers that matter */
  --text:          var(--ink-900);
  --text-2:        var(--ink-700);
  --text-muted:    var(--ink-500);
  --icon:          var(--ink-400);

  --primary:       var(--omi-blue-600);
  --primary-hover: var(--omi-blue-700);
  --primary-soft:  var(--omi-blue-50);
  --primary-soft-2:var(--omi-blue-100);
  --on-primary:    #FFFFFF;
  --link:          var(--omi-blue-600);
  --focus:         var(--omi-blue-500);
  --selected:      #E4EEF9;   /* selected row */

  --success:       #3F7A12;  --success-soft: #EDF6E1;
  --warning:       #9A5A00;  --warning-soft: #FFF3DC;  --warning-line: #F3C877;
  --danger:        #C21D15;  --danger-soft:  #FDECEB;  --on-danger: #FFFFFF;
  --info:          var(--omi-blue-700); --info-soft: var(--omi-blue-50);

  /* Dark surfaces that stay dark in both themes (toast, selection bar) */
  --inverse:       var(--ink-900);
  --on-inverse:    #FFFFFF;
  --on-inverse-muted: #B4BBCA;
  --on-inverse-link:  #A9CBF0;
  --bar-bg:        var(--ink-900);   /* selection bar, pending-changes bar (white text in both themes) */

  /* RGB triplets for Bootstrap's rgba(var(--bs-*-rgb), a) utilities (keep in step with the colours above) */
  --text-rgb: 24, 33, 58;
  --text-muted-rgb: 90, 101, 128;
  --bg-rgb: 243, 245, 249;
  --surface-rgb: 255, 255, 255;
  --surface-2-rgb: 247, 249, 252;
  --primary-rgb: 55, 112, 175;
  --link-rgb: 55, 112, 175;
  --link-hover-rgb: 44, 91, 144;
  --success-rgb: 63, 122, 18;
  --warning-rgb: 154, 90, 0;
  --danger-rgb: 194, 29, 21;
  --info-rgb: 44, 91, 144;

  /* --- File types: each owns one swoosh colour ------------------------- */
  --ft-omiapp:    var(--omi-blue-500);
  --ft-installer: var(--spectrum-navy);
  --ft-pdf:       var(--spectrum-red);
  --ft-video:     var(--spectrum-orange);
  --ft-image:     var(--spectrum-green);
  --ft-zip:       var(--spectrum-teal);
  --ft-doc:       #6B7590;
  --ft-folder:    var(--omi-blue-500);
  --ft-folder-bg: var(--omi-blue-100);

  /* --- Access states (matrix + badges) --------------------------------- */
  --acl-everyone:  #3F7A12;
  --acl-restricted:#7A4BC2;   /* violet: only ever means "restricted" */
  --acl-restricted-soft: #F1EBFB;
  --acl-blocked:   #A9B1C2;

  /* --- Type ------------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", ui-monospace, Consolas, monospace;  /* file-type extensions only */
  --font-code: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --fs-xs:  12px;   /* badges, captions */
  --fs-sm:  13px;   /* table meta, helper text */
  --fs-md:  15px;   /* body + table names (base) */
  --fs-lg:  17px;   /* panel titles */
  --fs-xl:  20px;   /* section titles */
  --fs-2xl: 26px;   /* page titles */
  --fs-3xl: 34px;   /* login headline */
  --lh-tight: 1.2;
  --lh-body:  1.5;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --tracking-tight: -0.011em;  /* titles >= 20px */

  /* --- Space (4px grid) ------------------------------------------------ */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* --- Shape: radius grows with the size of the thing ------------------ */
  --r-xs: 4px;    /* badges, checkboxes */
  --r-sm: 6px;    /* buttons, inputs */
  --r-md: 10px;   /* panels, cards, menus */
  --r-lg: 16px;   /* drawers, dialogs, login card */
  --r-pill: 999px;

  /* --- Elevation: navy-tinted, only on things that float --------------- */
  --shadow-1: 0 1px 2px rgba(24, 33, 58, .06);
  --shadow-2: 0 6px 20px rgba(24, 33, 58, .10), 0 1px 3px rgba(24, 33, 58, .06);
  --shadow-3: 0 24px 64px rgba(24, 33, 58, .22), 0 2px 8px rgba(24, 33, 58, .08);
  --scrim: rgba(17, 24, 43, .44);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);

  /* --- Layout ----------------------------------------------------------- */
  --topbar-h: 60px;
  --sidebar-w: 288px;
  --drawer-w: 440px;
  --row-h: 48px;
  --page-max: 1280px;

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms;  /* hover, press */
  --dur-2: 200ms;  /* menus, toggles */
  --dur-3: 320ms;  /* drawers, dialogs */

  color-scheme: light;
}

/* --- Dark mode: automatic from the OS, forced with <html data-theme="dark|light">
       (JS/app/core.js sets data-theme from the user's choice; "auto" removes it). --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1526; --surface: #161E33; --surface-2: #1B243C; --surface-3: #232E4A;
    --line: #26314D; --line-strong: #34405F;
    --text: #E7EBF3; --text-2: #C3CADA; --text-muted: #9AA3B9; --icon: #7F89A3;
    --primary: #6FA3DC; --primary-hover: #8DB7E6; --primary-soft: #1C2B47; --primary-soft-2: #22375A;
    --on-primary: #0D1424; --link: #8DB7E6; --focus: #8DB7E6; --selected: #1E3152;
    --success: #9BCB5E; --success-soft: #1D2B16; --warning: #F3B95A; --warning-soft: #2E2412; --warning-line: #6E5320;
    --danger: #FF8A80; --danger-soft: #3A1C1E; --on-danger: #2A0C0B; --info: #8DB7E6; --info-soft: #1C2B47;
    --inverse: #E7EBF3; --on-inverse: #18213A; --on-inverse-muted: #36415C; --on-inverse-link: #2C5B90; --bar-bg: #2A3656;
    --text-rgb: 231, 235, 243; --text-muted-rgb: 154, 163, 185; --bg-rgb: 15, 21, 38; --surface-rgb: 22, 30, 51; --surface-2-rgb: 27, 36, 60;
    --primary-rgb: 111, 163, 220; --link-rgb: 141, 183, 230; --link-hover-rgb: 179, 207, 238;
    --success-rgb: 155, 203, 94; --warning-rgb: 243, 185, 90; --danger-rgb: 255, 138, 128; --info-rgb: 141, 183, 230;
    --ft-folder-bg: #22375A; --ft-doc: #9AA3B9; --ft-installer: #8B98E0;
    --acl-everyone: #9BCB5E; --acl-restricted: #B99AF0; --acl-restricted-soft: #2A2244; --acl-blocked: #4A5571;
    --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 6px 20px rgba(0,0,0,.45); --shadow-3: 0 24px 64px rgba(0,0,0,.6);
    --scrim: rgba(4, 7, 15, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1526; --surface: #161E33; --surface-2: #1B243C; --surface-3: #232E4A;
  --line: #26314D; --line-strong: #34405F;
  --text: #E7EBF3; --text-2: #C3CADA; --text-muted: #9AA3B9; --icon: #7F89A3;
  --primary: #6FA3DC; --primary-hover: #8DB7E6; --primary-soft: #1C2B47; --primary-soft-2: #22375A;
  --on-primary: #0D1424; --link: #8DB7E6; --focus: #8DB7E6; --selected: #1E3152;
  --success: #9BCB5E; --success-soft: #1D2B16; --warning: #F3B95A; --warning-soft: #2E2412; --warning-line: #6E5320;
  --danger: #FF8A80; --danger-soft: #3A1C1E; --on-danger: #2A0C0B; --info: #8DB7E6; --info-soft: #1C2B47;
  --inverse: #E7EBF3; --on-inverse: #18213A; --on-inverse-muted: #36415C; --on-inverse-link: #2C5B90; --bar-bg: #2A3656;
  --text-rgb: 231, 235, 243; --text-muted-rgb: 154, 163, 185; --bg-rgb: 15, 21, 38; --surface-rgb: 22, 30, 51; --surface-2-rgb: 27, 36, 60;
  --primary-rgb: 111, 163, 220; --link-rgb: 141, 183, 230; --link-hover-rgb: 179, 207, 238;
  --success-rgb: 155, 203, 94; --warning-rgb: 243, 185, 90; --danger-rgb: 255, 138, 128; --info-rgb: 141, 183, 230;
  --ft-folder-bg: #22375A; --ft-doc: #9AA3B9; --ft-installer: #8B98E0;
  --acl-everyone: #9BCB5E; --acl-restricted: #B99AF0; --acl-restricted-soft: #2A2244; --acl-blocked: #4A5571;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 6px 20px rgba(0,0,0,.45); --shadow-3: 0 24px 64px rgba(0,0,0,.6);
  --scrim: rgba(4, 7, 15, .6);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}