/* ============================================================
   TMS Design System — Colors & Type
   Foundation tokens. Import this file from any page.
   Brand: Travel Marketing Systems (TMS)
   ============================================================ */

/* Local DM Sans (brand-supplied static cuts). DM Mono is still loaded from Google
   Fonts — no local files supplied for it. Replace with a local copy if/when one
   is provided. Available DM Sans weights: 400 / 500 / 700 (regular, medium, bold).
   600 declarations in this stylesheet will fall back to 500 (Medium) via the
   declarations below; 800 declarations will fall back to 700 (Bold). */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/DMSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/DMSans-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/DMSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/DMSans-MediumItalic.ttf") format("truetype");
}
/* Map "Semi-Bold" (600) to Medium (500) — no semi-bold cut was supplied.
   When a real semi-bold becomes available, point this rule at it. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/DMSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/DMSans-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/DMSans-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/DMSans-BoldItalic.ttf") format("truetype");
}
/* Map "Black" (800) to Bold (700) — no black cut was supplied. The display-xl
   token in this system uses 800 and will resolve to Bold until an extra-bold
   cut is added. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/DMSans-Bold.ttf") format("truetype");
}

/* DM Mono — Google Fonts (no local file supplied). */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand colors (TMS) ----------
     Primary teal sampled from logo wordmark + globe glyph.
     Coral sampled from the orange "dots" floating around the globe.
     The brand is restrained — these two hues do the heavy lifting,
     with a warm-leaning neutral ramp for everything else. */

  /* Teal — primary. Sampled from the live admin product (latecards.co.uk),
     a more vivid cyan-teal than the muted hue the marketing wordmark shows. */
  --tms-teal-50:  #E6F5F6;
  --tms-teal-100: #C5EAEE;
  --tms-teal-200: #94D2DA;
  --tms-teal-300: #5DB7C4;
  --tms-teal-400: #2A9CAD;
  --tms-teal-500: #0E8A99;   /* core brand teal — primary buttons, links, status dots */
  --tms-teal-600: #0A6E7E;   /* hover */
  --tms-teal-700: #0A6E7E;
  --tms-teal-800: #0E4A53;
  --tms-teal-900: #062B30;

  /* Coral — soft accent for marketing surfaces (Jasper-inspired warmth).
     Sampled from the floating dots in the TMS logo glyph. Pair with sand
     backgrounds in marketing copy. NOT the same hue as the brand red below. */
  --tms-coral-50:  #FDF1EC;
  --tms-coral-100: #FADCCE;
  --tms-coral-200: #F6BFA8;
  --tms-coral-300: #F1A082;
  --tms-coral-400: #EE9977;   /* logo dot color */
  --tms-coral-500: #E37A55;
  --tms-coral-600: #C95F3B;
  --tms-coral-700: #9D4429;
  --tms-coral-800: #6E2E1B;

  /* Red — brand red. Sampled from the live product's "Back to Account Listing"
     CTA and other product red surfaces. Use for destructive actions and high-
     priority secondary CTAs in product/admin chrome. Distinct from coral. */
  --tms-red-50:  #FDECEC;
  --tms-red-100: #FBD3D5;
  --tms-red-200: #F7A2A6;
  --tms-red-300: #F26F75;
  --tms-red-400: #EE3C46;
  --tms-red-500: #ED1A25;   /* core brand red */
  --tms-red-600: #C8121B;
  --tms-red-700: #970C14;
  --tms-red-800: #6B080E;

  /* Sand — warm cream backgrounds (Jasper-inspired soft tints) */
  --tms-sand-50:  #FBF8F3;
  --tms-sand-100: #F5EFE5;
  --tms-sand-200: #ECE2D0;
  --tms-sand-300: #DFD2B9;

  /* Sky — supporting cool wash for "marketing" / data sections */
  --tms-sky-50:  #EEF4F8;
  --tms-sky-100: #D8E6EF;
  --tms-sky-300: #9CC1D6;
  --tms-sky-500: #4F8AAD;

  /* Sun — warm yellow accent for highlights / badges */
  --tms-sun-100: #FBEFC2;
  --tms-sun-300: #F5D871;
  --tms-sun-500: #E9B91A;

  /* Neutral — warm gray ramp (slightly biased toward sand, not pure cool)
     Used by marketing surfaces. The product app uses --slate-* instead. */
  --tms-ink-0:   #FFFFFF;
  --tms-ink-50:  #F8F7F4;
  --tms-ink-100: #EFEDE7;
  --tms-ink-200: #DFDCD3;
  --tms-ink-300: #C2BEB2;
  --tms-ink-400: #8F8B7F;
  --tms-ink-500: #6E6A60;
  --tms-ink-600: #4D4A44;
  --tms-ink-700: #2F2D29;
  --tms-ink-800: #1C1B18;
  --tms-ink-900: #0E0D0B;

  /* Slate — cool neutral ramp. Used by the live admin product. Sampled from
     the actual app surfaces. Use these for any in-product chrome (lists,
     tables, cards, drawers) — the page bg is --slate-50, cards are white,
     borders are --slate-200. Heading ink is --slate-900 (#0F1C31). */
  --slate-0:   #FFFFFF;
  --slate-50:  #F0F1F4;   /* product page background */
  --slate-100: #E7E9EE;
  --slate-200: #D5D8DF;   /* default product border */
  --slate-300: #B7BCC6;
  --slate-400: #8B92A0;
  --slate-500: #636C87;   /* secondary text */
  --slate-600: #4B5468;
  --slate-700: #334155;   /* body text */
  --slate-800: #1F2937;
  --slate-900: #0F1C31;   /* heading ink */

  /* Semantic */
  --tms-success: #2F8F5C;
  --tms-warning: #D08316;
  --tms-danger:  var(--tms-red-500);  /* the brand red doubles as destructive */
  --tms-info:    var(--tms-teal-500);

  /* ---------- Semantic foreground / background ----------
     Two surface modes:
     · Marketing (default below): warm sand bg + warm ink — Jasper-inspired
     · Product (use .ds-product or override these): cool slate bg + slate ink —
       what the real TMS admin product looks like.  */
  --bg:        var(--tms-sand-50);
  --bg-elev:   var(--tms-ink-0);
  --bg-muted:  var(--tms-sand-100);
  --bg-deep:   var(--tms-teal-800);          /* dark hero / footer */
  --bg-accent: var(--tms-coral-100);

  --fg:        var(--tms-ink-800);
  --fg-muted:  var(--tms-ink-500);
  --fg-soft:   var(--tms-ink-400);
  --fg-on-deep:  #F8F4EC;
  --fg-on-accent: var(--tms-teal-800);

  --border:        var(--tms-ink-200);
  --border-strong: var(--tms-ink-300);
  --border-deep:   var(--tms-teal-700);

  /* Product-mode aliases — opt in by adding class="ds-product" to <body>
     (or by using --product-* directly in product CSS). */
  --product-bg:        var(--slate-50);
  --product-surface:   var(--slate-0);
  --product-border:    var(--slate-200);
  --product-fg:        var(--slate-900);
  --product-fg-muted:  var(--slate-500);
  --product-fg-soft:   var(--slate-400);

  --brand:       var(--tms-teal-500);
  --brand-hover: var(--tms-teal-600);
  --brand-press: var(--tms-teal-700);
  --accent:      var(--tms-coral-400);
  --accent-hover:var(--tms-coral-500);

  /* ---------- Typography ---------- */
  --font-display: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — generous, Jasper-style display sizes */
  --fs-display-xl: clamp(56px, 7.5vw, 104px);  /* hero one-liner */
  --fs-display-l:  clamp(44px, 5.5vw, 76px);
  --fs-display-m:  clamp(34px, 4vw, 56px);
  --fs-h1:         clamp(32px, 3.4vw, 44px);
  --fs-h2:         clamp(26px, 2.6vw, 34px);
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-l:     19px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-caption:    13px;
  --fs-micro:      11px;

  --lh-tight:    1.02;
  --lh-display:  1.05;
  --lh-heading:  1.15;
  --lh-body:     1.55;
  --lh-loose:    1.7;

  --tracking-display: -0.03em;   /* DM Sans likes a tight display track */
  --tracking-heading: -0.015em;
  --tracking-body:    0em;
  --tracking-eyebrow: 0.14em;    /* small caps eyebrow labels */

  /* ---------- Shape & rhythm ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-blob: 36px;                       /* big soft cards */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 1px rgba(28, 27, 24, 0.04);
  --shadow-sm: 0 1px 2px rgba(28, 27, 24, 0.06), 0 1px 1px rgba(28,27,24,0.04);
  --shadow-md: 0 8px 24px -8px rgba(28, 27, 24, 0.14), 0 2px 4px rgba(28,27,24,0.05);
  --shadow-lg: 0 24px 48px -16px rgba(28, 27, 24, 0.20), 0 6px 12px rgba(28,27,24,0.06);
  --shadow-pop: 0 18px 0 -2px var(--tms-teal-700);    /* chunky offset for playful CTA */

  /* Focus ring (accessible) */
  --ring: 0 0 0 3px rgba(46, 117, 117, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   Element-level defaults — semantic mapping
   Use the .ds-* utility classes when you need the styling
   outside of normal h1/p/etc semantics.
   ============================================================ */

html { color: var(--fg); background: var(--bg); }

.ds-product {
  background: var(--product-bg);
  color: var(--product-fg);
}

body, .ds-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-display-xl, .ds-display-l, .ds-display-m {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-wrap: balance;
}
.ds-display-xl { font-size: var(--fs-display-xl); font-weight: 800; line-height: var(--lh-tight); }
.ds-display-l  { font-size: var(--fs-display-l); }
.ds-display-m  { font-size: var(--fs-display-m); }

h1, .ds-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); text-wrap: balance; }
h2, .ds-h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); text-wrap: balance; }
h3, .ds-h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); }
h4, .ds-h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-heading); }

p, .ds-p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); text-wrap: pretty; }
.ds-lead { font-size: var(--fs-body-l); line-height: var(--lh-body); color: var(--fg-muted); }
.ds-small { font-size: var(--fs-body-s); line-height: var(--lh-body); }
.ds-caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-muted); }
.ds-eyebrow {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}

code, kbd, samp, .ds-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}