/* Sakura Fleet - brand tokens
   Colours sampled from the Sakura Transport & Logistics logo (emblem gradient,
   navy wordmark, indigo tagline). Use these tokens everywhere; never hard-code hex
   values in templates. */

/* Body and data: IBM Plex Sans (tabular figures, high legibility at small sizes). References, plates and amounts
   in tables: IBM Plex Mono. Page titles and headline figures: Montserrat, the logo's typeface family. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("./fonts/ibm-plex-sans-latin-400-normal.77bc02670657.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("./fonts/ibm-plex-sans-latin-500-normal.f7016cd446d2.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("./fonts/ibm-plex-sans-latin-600-normal.196e3cbc5fee.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("./fonts/ibm-plex-sans-latin-700-normal.c277d7b83f8a.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("./fonts/ibm-plex-mono-latin-400-normal.79936b18df9f.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("./fonts/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-display: swap; src: url("./fonts/montserrat-latin-600-normal.9e606da1cbeb.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("./fonts/montserrat-latin-700-normal.1c0792ac34ef.woff2") format("woff2"); }

:root {
  /* Brand */
  --sk-navy-950: #0F0C33;   /* darkest - sidebar, dark surfaces */
  --sk-navy-900: #17123F;   /* wordmark navy - headings, body text */
  --sk-navy-800: #1C1660;   /* emblem deep navy */
  --sk-indigo-700: #2414B4; /* PRIMARY - emblem highlight */
  --sk-indigo-600: #2A1BC2; /* primary hover / gradient start */
  --sk-indigo-500: #4B3FE0; /* focus rings, links on dark */
  --sk-indigo-300: #A49DF2;
  --sk-indigo-100: #E9E7FF; /* selected rows, chips */
  --sk-indigo-50:  #F4F3FF; /* subtle tint */
  --sk-tagline:    #4A4396; /* secondary text accent (logo tagline) */

  /* Neutrals (cool, slightly violet to sit with the brand) */
  --sk-bg:        #F4F4F7;  /* app frame behind the page */
  --sk-surface:   #FFFFFF;
  --sk-surface-2: #F8F8FB;
  --sk-border:    #E4E3EC;  /* hairline rules between rows */
  --sk-border-strong: #C6C4D6; /* section rules, input borders */
  --sk-text:      #17123F;
  --sk-text-muted:#5B5A72;
  --sk-text-faint:#6F6E86; /* 4.9:1 on white */
  --sk-on-primary:#FFFFFF; /* text/icons on primary buttons */
  --sk-on-navy:   #FFFFFF; /* text on the navy frame (menu, driver header, sign-in panel) */
  --sk-on-navy-muted: #DCD9F5;

  /* Status (each passes 4.5:1 on white for text) */
  --sk-success: #12733F;  --sk-success-bg: #E5F5EC;
  --sk-warning: #9A5B00;  --sk-warning-bg: #FFF3DC;
  --sk-danger:  #B42318;  --sk-danger-bg:  #FDECEA;
  --sk-info:    #2414B4;  --sk-info-bg:    #ECEAFF;
  --sk-sos:     #D7263D;  /* distress button only */

  /* Registration plates: black on white in both themes, like the real plate */
  --sk-plate:     #FFFFFF;
  --sk-plate-ink: #0F0C33;

  /* Brand gradient: app icon background and splash only. The UI uses flat navy. */
  --sk-gradient: linear-gradient(135deg, #2A1BC2 0%, #1C1660 100%);

  /* Type */
  --sk-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sk-font-heading: "Montserrat", "IBM Plex Sans", system-ui, sans-serif;
  --sk-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Shape */
  --sk-radius-sm: 3px;
  --sk-radius: 4px;
  --sk-radius-lg: 8px;
  --sk-shadow: 0 8px 28px rgba(15,12,51,.18); /* overlays only: menus, dialogs, the SOS banner */

  /* Driver app touch sizing */
  --sk-touch: 52px;  /* minimum height of any tappable control in the driver app */
}

/* Dark theme - driver app night mode and optional office dark mode */
:root[data-theme="dark"] {
  --sk-bg:        #0A0920;
  --sk-surface:   #17143A;
  --sk-surface-2: #1D1A47;
  --sk-border:    #2C2860;
  --sk-border-strong: #3D3880;
  --sk-text:      #F2F1FF;
  --sk-text-muted:#B9B6DA;
  --sk-text-faint:#8E8AB8;
  --sk-indigo-700: #8B82FF; /* lifted primary for contrast on dark */
  --sk-indigo-600: #9C94FF;
  --sk-on-primary: #0F0C33; /* dark text on the lifted primary */
  --sk-indigo-100: #2A2568;
  --sk-indigo-50:  #1F1B4F;
  --sk-success: #4ADE80;  --sk-success-bg: #10331F;
  --sk-warning: #FBBF24;  --sk-warning-bg: #3A2A05;
  --sk-danger:  #F87171;  --sk-danger-bg:  #3B1214;
  --sk-info:    #A49DF2;  --sk-info-bg:    #221E55;
}