/* Grindrod Logistics Design System — flattened for deployment */

/* === tokens/fonts.css === */
/* Grindrod Logistics — Webfonts
   Roboto (variable: width + weight) is the brand's primary typeface.
   Roboto Mono (variable: weight) is used for data, codes, and metrics. */

@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("fonts/RobotoMono-Variable.ttf") format("truetype-variations");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("fonts/RobotoMono-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
}


/* === tokens/colors.css === */
/* Grindrod Logistics — Color tokens
   Brand red + deep maritime navy, on clean neutral greys.
   Base ramps first, then semantic aliases. */

:root {
  /* ---- Brand: Grindrod Red ---- */
  --red-50:  #fdecec;
  --red-100: #fac9ca;
  --red-200: #f5989a;
  --red-300: #ef6165;
  --red-400: #e93b40;
  --red-500: #e31f26; /* core brand red (logo mark) */
  --red-600: #c5171d;
  --red-700: #9f1217;
  --red-800: #720d10;
  --red-900: #4a090b;

  /* ---- Brand: Navy / Ink ---- */
  --navy-50:  #eef1f5;
  --navy-100: #d3dae4;
  --navy-200: #a3b1c5;
  --navy-300: #6f83a0;
  --navy-400: #3f5678;
  --navy-500: #1f3557;
  --navy-600: #142744;
  --navy-700: #0f1f36; /* primary dark surface */
  --navy-800: #0b182b;
  --navy-900: #071019;

  /* ---- Neutrals (cool grey) ---- */
  --grey-0:   #ffffff;
  --grey-50:  #f6f7f9;
  --grey-100: #eef0f3;
  --grey-200: #e1e5ea;
  --grey-300: #cbd2da;
  --grey-400: #9aa5b3;
  --grey-500: #6b7683;
  --grey-600: #4c5560;
  --grey-700: #363d46;
  --grey-800: #23282f;
  --grey-900: #12151a;

  /* ---- Support / semantic hues ---- */
  --green-500: #1f9d57;
  --green-50:  #e7f6ed;
  --amber-500: #d98a00;
  --amber-50:  #fbf1dc;
  --blue-500:  #1f6fd4;
  --blue-50:   #e6f0fb;

  /* ================= Semantic aliases ================= */
  /* Brand */
  --brand:            var(--red-500);
  --brand-hover:      var(--red-600);
  --brand-active:     var(--red-700);
  --brand-contrast:   var(--grey-0);
  --ink:              var(--navy-700);
  --ink-hover:        var(--navy-600);

  /* Text */
  --text-strong:      var(--navy-700);
  --text-body:        var(--grey-700);
  --text-muted:       var(--grey-500);
  --text-faint:       var(--grey-400);
  --text-on-dark:     var(--grey-0);
  --text-on-dark-muted: var(--navy-200);
  --text-brand:       var(--red-500);
  --text-link:        var(--red-600);
  --text-link-hover:  var(--red-700);

  /* Surfaces */
  --surface-page:     var(--grey-50);
  --surface-card:     var(--grey-0);
  --surface-sunken:   var(--grey-100);
  --surface-dark:     var(--navy-700);
  --surface-dark-alt: var(--navy-600);
  --surface-brand:    var(--red-500);

  /* Borders */
  --border-subtle:    var(--grey-200);
  --border-default:   var(--grey-300);
  --border-strong:    var(--grey-400);
  --border-on-dark:   rgba(255,255,255,0.14);

  /* Feedback */
  --success:  var(--green-500);
  --success-surface: var(--green-50);
  --warning:  var(--amber-500);
  --warning-surface: var(--amber-50);
  --info:     var(--blue-500);
  --info-surface: var(--blue-50);
  --danger:   var(--red-500);
  --danger-surface: var(--red-50);

  /* Focus */
  --focus-ring: var(--red-400);
}


/* === tokens/typography.css === */
/* Grindrod Logistics — Typography tokens
   Roboto for everything; condensed weights for big display lockups
   (mirrors the italic condensed style of the GRINDROD wordmark).
   Roboto Mono for figures, codes, throughput metrics. */

:root {
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Roboto", system-ui, sans-serif; /* use with --stretch-condensed */
  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Width axis (Roboto variable supports 75%–100%) */
  --stretch-condensed: 75%;
  --stretch-normal: 100%;

  /* Weights */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-black: 900; /* @kind font */

  /* Semantic heading weights — light, per brand direction */
  --fw-display: 300; /* @kind font */
  --fw-heading: 300; /* @kind font */

  /* Type scale (rem, 16px base) */
  --fs-display-2xl: 4.5rem;   /* 72 */
  --fs-display-xl:  3.5rem;   /* 56 */
  --fs-display-lg:  2.75rem;  /* 44 */
  --fs-h1: 2.25rem;  /* 36 */
  --fs-h2: 1.75rem;  /* 28 */
  --fs-h3: 1.375rem; /* 22 */
  --fs-h4: 1.125rem; /* 18 */
  --fs-body-lg: 1.125rem; /* 18 */
  --fs-body: 1rem;        /* 16 */
  --fs-body-sm: 0.875rem; /* 14 */
  --fs-caption: 0.75rem;  /* 12 */
  --fs-overline: 0.6875rem; /* 11 */

  /* Line heights */
  --lh-tight: 1.05; /* @kind other */
  --lh-snug: 1.2; /* @kind other */
  --lh-normal: 1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* Letter spacing */
  --ls-tight: -0.02em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-wide: 0.04em; /* @kind other */
  --ls-overline: 0.14em; /* @kind other */
}


/* === tokens/spacing.css === */
/* Grindrod Logistics — Spacing & layout tokens
   4px base grid. */

:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */
  --space-24: 6rem;    /* 96 */
  --space-32: 8rem;    /* 128 */

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1360px;
  --gutter: var(--space-6);
  --section-y: var(--space-24);
}


/* === tokens/effects.css === */
/* Grindrod Logistics — Radii, shadows, borders, motion
   Restrained corporate feel: modest radii, soft cool-grey shadows,
   quick confident easing. */

:root {
  /* Radii */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* Borders */
  --border-width: 1px; /* @kind other */
  --border-width-strong: 2px; /* @kind other */

  /* Shadows (cool navy-tinted, low spread) */
  --shadow-xs: 0 1px 2px rgba(11, 24, 43, 0.06);
  --shadow-sm: 0 1px 3px rgba(11, 24, 43, 0.08), 0 1px 2px rgba(11, 24, 43, 0.04);
  --shadow-md: 0 4px 12px rgba(11, 24, 43, 0.10);
  --shadow-lg: 0 12px 28px rgba(11, 24, 43, 0.14);
  --shadow-xl: 0 24px 56px rgba(11, 24, 43, 0.20);
  --shadow-brand: 0 8px 20px rgba(227, 31, 38, 0.28);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* Z */
  --z-sticky: 100; /* @kind other */
  --z-overlay: 500; /* @kind other */
  --z-modal: 600; /* @kind other */
  --z-toast: 700; /* @kind other */
}