/* ==========================================================================
   Tomatico UI — tomatico-ui.css
   Version 0.1.0

   The Tomatico user interface system. Drop this file into any Tomatico
   digital product to inherit the brand's colour, type, spacing and
   component rules.

   Requires Poppins (Latin) and IBM Plex Sans Arabic (Arabic). Load them
   before this file:

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap" rel="stylesheet">

   Everything is written with CSS logical properties, so the whole system
   mirrors correctly under dir="rtl" without a separate stylesheet.

   Contents
   01. Tokens — colour
   02. Tokens — typography
   03. Tokens — space, radius, border, shadow, motion, layer
   04. Semantic tokens + themes
   05. Reset and base
   06. Typography
   07. Layout
   08. Buttons
   09. Forms
   10. Tables
   11. Cards
   12. Alerts
   13. Badges
   14. Masthead
   15. Navigation
   16. Breadcrumb + tabs
   17. Pattern
   18. Utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. TOKENS — COLOUR
   Five locked brand values from the Tomatico brand book, plus a derived
   neutral ramp that exists only to serve interface needs. Derived steps are
   for UI surfaces, borders and states — never for brand or marketing artwork.
   -------------------------------------------------------------------------- */
:root {
  /* Brand — locked. Do not alter. */
  --tmt-white: #ffffff;
  --tmt-grey-100: #e8e8e8;
  --tmt-grey-500: #606060;
  --tmt-grey-700: #363636;
  --tmt-black: #020106;

  /* Derived neutral ramp — interface use only. */
  --tmt-grey-050: #f7f7f7;
  --tmt-grey-200: #d2d2d2;
  --tmt-grey-300: #b4b4b4;
  --tmt-grey-400: #8b8b8b;
  --tmt-grey-600: #4a4a4a;
  --tmt-grey-800: #232323;
  --tmt-grey-900: #141414;

  /* Functional status — interface only, small areas, always paired with
     an icon or text label so colour is never the sole signal. */
  --tmt-success: #2e7d32;
  --tmt-success-surface: #eaf3ea;
  --tmt-success-border: #a8cbaa;

  --tmt-warning: #9a5b00;
  --tmt-warning-surface: #fbf2e4;
  --tmt-warning-border: #e0be86;

  --tmt-error: #c62828;
  --tmt-error-surface: #fbeaea;
  --tmt-error-border: #e7a7a7;

  --tmt-info: #1565c0;
  --tmt-info-surface: #e9f1fb;
  --tmt-info-border: #a6c6ea;
}

/* --------------------------------------------------------------------------
   02. TOKENS — TYPOGRAPHY
   Scale, weights and tracking taken directly from section 04 of the
   Tomatico brand guidelines. Caption is a derived step added for dense
   interface work (table meta, field hints, timestamps).
   -------------------------------------------------------------------------- */
:root {
  --tmt-font-latin: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --tmt-font-arabic: "IBM Plex Sans Arabic", "Segoe UI", "Tahoma", system-ui, sans-serif;
  --tmt-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Default family. Switch to --tmt-font-arabic on Arabic roots. */
  --tmt-font: var(--tmt-font-latin);

  --tmt-weight-light: 300;
  --tmt-weight-regular: 400;
  --tmt-weight-medium: 500;
  --tmt-weight-semibold: 600;
  --tmt-weight-bold: 700;

  --tmt-size-h1: 3rem;      /* 48px */
  --tmt-size-h2: 2rem;      /* 32px */
  --tmt-size-h3: 1.5rem;    /* 24px */
  --tmt-size-h4: 1.125rem;  /* 18px */
  --tmt-size-body: 1rem;    /* 16px */
  --tmt-size-small: 0.875rem; /* 14px */
  --tmt-size-caption: 0.75rem; /* 12px — derived */

  --tmt-leading-h1: 3.5rem;   /* 56px */
  --tmt-leading-h2: 2.5rem;   /* 40px */
  --tmt-leading-h3: 2rem;     /* 32px */
  --tmt-leading-h4: 1.75rem;  /* 28px */
  --tmt-leading-body: 1.5rem; /* 24px */
  --tmt-leading-small: 1.25rem; /* 20px */
  --tmt-leading-caption: 1rem;  /* 16px */

  --tmt-tracking-tight: -0.01em; /* -1%, headings 1 and 2 */
  --tmt-tracking-none: 0;
  --tmt-tracking-wide: 0.18em;   /* wordmark / tagline lockups only */
}

/* --------------------------------------------------------------------------
   03. TOKENS — SPACE, RADIUS, BORDER, SHADOW, MOTION, LAYER
   4px base grid. Every gap, pad and offset in the system is a multiple of it.
   -------------------------------------------------------------------------- */
:root {
  --tmt-space-1: 0.25rem; /* 4 */
  --tmt-space-2: 0.5rem;  /* 8 */
  --tmt-space-3: 0.75rem; /* 12 */
  --tmt-space-4: 1rem;    /* 16 */
  --tmt-space-5: 1.5rem;  /* 24 */
  --tmt-space-6: 2rem;    /* 32 */
  --tmt-space-7: 3rem;    /* 48 */
  --tmt-space-8: 4rem;    /* 64 */
  --tmt-space-9: 6rem;    /* 96 */

  /* The brand's own interface examples use fully rounded calls to action and
     softly rounded containers. Controls are pills; surfaces are 12px. */
  --tmt-radius-none: 0;
  --tmt-radius-sm: 0.25rem;
  --tmt-radius-md: 0.5rem;
  --tmt-radius-lg: 0.75rem;
  --tmt-radius-xl: 1.25rem;
  --tmt-radius-pill: 999px;
  --tmt-radius-control: var(--tmt-radius-pill);
  --tmt-radius-surface: var(--tmt-radius-lg);

  --tmt-border-hairline: 1px;
  --tmt-border-thick: 2px;

  --tmt-shadow-sm: 0 1px 2px rgb(2 1 6 / 0.06), 0 1px 3px rgb(2 1 6 / 0.08);
  --tmt-shadow-md: 0 2px 4px rgb(2 1 6 / 0.06), 0 6px 16px rgb(2 1 6 / 0.08);
  --tmt-shadow-lg: 0 4px 8px rgb(2 1 6 / 0.06), 0 16px 40px rgb(2 1 6 / 0.12);

  --tmt-duration-fast: 120ms;
  --tmt-duration-base: 200ms;
  --tmt-duration-slow: 320ms;
  --tmt-ease: cubic-bezier(0.2, 0, 0.2, 1);

  --tmt-layer-base: 0;
  --tmt-layer-sticky: 100;
  --tmt-layer-nav: 200;
  --tmt-layer-overlay: 300;
  --tmt-layer-modal: 400;
  --tmt-layer-toast: 500;

  --tmt-container: 75rem; /* 1200px */
  --tmt-measure: 68ch;    /* comfortable reading width for body copy */
}

/* --------------------------------------------------------------------------
   04. SEMANTIC TOKENS + THEMES
   Components only ever reference these. Both themes are brand-sanctioned:
   the logo system is specified in light and dark mode.
   -------------------------------------------------------------------------- */
:root,
[data-tmt-theme="light"] {
  color-scheme: light;

  --tmt-surface: var(--tmt-white);
  --tmt-surface-raised: var(--tmt-white);
  --tmt-surface-sunken: var(--tmt-grey-050);
  --tmt-surface-inverse: var(--tmt-black);
  --tmt-surface-muted: var(--tmt-grey-100);

  --tmt-text: var(--tmt-black);
  --tmt-text-secondary: var(--tmt-grey-700);
  --tmt-text-muted: var(--tmt-grey-500);
  --tmt-text-disabled: var(--tmt-grey-400);
  --tmt-text-inverse: var(--tmt-white);

  --tmt-border: var(--tmt-grey-200);
  --tmt-border-subtle: var(--tmt-grey-100);
  --tmt-border-strong: var(--tmt-grey-700);

  --tmt-interactive: var(--tmt-black);
  --tmt-interactive-hover: var(--tmt-grey-700);
  --tmt-interactive-active: var(--tmt-grey-800);
  --tmt-interactive-text: var(--tmt-white);
  --tmt-interactive-subtle: var(--tmt-grey-100);

  --tmt-focus: var(--tmt-black);
  --tmt-focus-offset: var(--tmt-white);

  --tmt-overlay: rgb(2 1 6 / 0.56);
}

[data-tmt-theme="dark"] {
  color-scheme: dark;

  --tmt-surface: var(--tmt-black);
  --tmt-surface-raised: var(--tmt-grey-900);
  --tmt-surface-sunken: #000000;
  --tmt-surface-inverse: var(--tmt-white);
  --tmt-surface-muted: var(--tmt-grey-800);

  --tmt-text: var(--tmt-white);
  --tmt-text-secondary: var(--tmt-grey-200);
  --tmt-text-muted: var(--tmt-grey-300);
  --tmt-text-disabled: var(--tmt-grey-500);
  --tmt-text-inverse: var(--tmt-black);

  --tmt-border: var(--tmt-grey-700);
  --tmt-border-subtle: var(--tmt-grey-800);
  --tmt-border-strong: var(--tmt-grey-300);

  --tmt-interactive: var(--tmt-white);
  --tmt-interactive-hover: var(--tmt-grey-100);
  --tmt-interactive-active: var(--tmt-grey-200);
  --tmt-interactive-text: var(--tmt-black);
  --tmt-interactive-subtle: var(--tmt-grey-800);

  --tmt-focus: var(--tmt-white);
  --tmt-focus-offset: var(--tmt-black);

  --tmt-overlay: rgb(0 0 0 / 0.72);

  /* Status hues are lightened so they clear AA on near-black surfaces. */
  --tmt-success: #7bc47f;
  --tmt-success-surface: #16261a;
  --tmt-success-border: #3c6b40;

  --tmt-warning: #e6a93c;
  --tmt-warning-surface: #2a2013;
  --tmt-warning-border: #6d5324;

  --tmt-error: #ef8a8a;
  --tmt-error-surface: #2a1717;
  --tmt-error-border: #7a3b3b;

  --tmt-info: #7fb3ea;
  --tmt-info-surface: #16212e;
  --tmt-info-border: #37587c;
}

/* --------------------------------------------------------------------------
   05. RESET AND BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.tmt,
.tmt-root {
  margin: 0;
  background-color: var(--tmt-surface);
  color: var(--tmt-text);
  font-family: var(--tmt-font);
  font-size: var(--tmt-size-body);
  font-weight: var(--tmt-weight-regular);
  line-height: var(--tmt-leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Arabic content switches family and relaxes leading. Applies to a whole
   document (<html lang="ar">) or to any inline island (<span lang="ar">). */
[lang="ar"],
[lang^="ar-"],
.tmt-arabic {
  --tmt-font: var(--tmt-font-arabic);
  font-family: var(--tmt-font-arabic);
  line-height: 1.7;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:where(a) {
  color: var(--tmt-interactive);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--tmt-duration-fast) var(--tmt-ease);
}

:where(a):hover {
  color: var(--tmt-interactive-hover);
  text-decoration-thickness: 2px;
}

/* One focus treatment across the whole system: a 2px ring in the
   interactive colour with a 2px offset so it reads on any surface. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--tmt-border-thick) solid var(--tmt-focus);
  outline-offset: 2px;
  border-radius: inherit;
}

::selection {
  background-color: var(--tmt-black);
  color: var(--tmt-white);
}

[data-tmt-theme="dark"] ::selection {
  background-color: var(--tmt-white);
  color: var(--tmt-black);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   06. TYPOGRAPHY
   -------------------------------------------------------------------------- */
.tmt-h1,
.tmt-h2,
.tmt-h3,
.tmt-h4 {
  margin-block: 0;
  color: var(--tmt-text);
  text-wrap: balance;
}

.tmt-h1 {
  font-size: var(--tmt-size-h1);
  line-height: var(--tmt-leading-h1);
  font-weight: var(--tmt-weight-bold);
  letter-spacing: var(--tmt-tracking-tight);
}

.tmt-h2 {
  font-size: var(--tmt-size-h2);
  line-height: var(--tmt-leading-h2);
  font-weight: var(--tmt-weight-semibold);
  letter-spacing: var(--tmt-tracking-tight);
}

.tmt-h3 {
  font-size: var(--tmt-size-h3);
  line-height: var(--tmt-leading-h3);
  font-weight: var(--tmt-weight-medium);
  letter-spacing: var(--tmt-tracking-none);
}

.tmt-h4 {
  font-size: var(--tmt-size-h4);
  line-height: var(--tmt-leading-h4);
  font-weight: var(--tmt-weight-medium);
  letter-spacing: var(--tmt-tracking-none);
}

.tmt-body {
  font-size: var(--tmt-size-body);
  line-height: var(--tmt-leading-body);
  font-weight: var(--tmt-weight-regular);
}

.tmt-body-lead {
  font-size: var(--tmt-size-h4);
  line-height: var(--tmt-leading-h4);
  font-weight: var(--tmt-weight-regular);
  color: var(--tmt-text-secondary);
}

.tmt-small {
  font-size: var(--tmt-size-small);
  line-height: var(--tmt-leading-small);
}

.tmt-caption {
  font-size: var(--tmt-size-caption);
  line-height: var(--tmt-leading-caption);
  color: var(--tmt-text-muted);
}

/* Wide-tracked uppercase, reserved for the tagline, eyebrow labels and
   small structural headers. Never for running text. */
.tmt-eyebrow {
  font-size: var(--tmt-size-caption);
  line-height: var(--tmt-leading-caption);
  font-weight: var(--tmt-weight-medium);
  letter-spacing: var(--tmt-tracking-wide);
  text-transform: uppercase;
  color: var(--tmt-text-muted);
}

.tmt-prose {
  max-width: var(--tmt-measure);
}

.tmt-prose > * + * {
  margin-block-start: var(--tmt-space-4);
}

.tmt-prose :is(h1, h2, h3, h4) {
  margin-block-start: var(--tmt-space-6);
}

.tmt-code {
  font-family: var(--tmt-font-mono);
  font-size: 0.875em;
  background-color: var(--tmt-surface-muted);
  border-radius: var(--tmt-radius-sm);
  padding-inline: 0.35em;
  padding-block: 0.15em;
}

/* --------------------------------------------------------------------------
   07. LAYOUT
   -------------------------------------------------------------------------- */
.tmt-container {
  width: 100%;
  max-width: var(--tmt-container);
  margin-inline: auto;
  padding-inline: var(--tmt-space-4);
}

@media (min-width: 48rem) {
  .tmt-container {
    padding-inline: var(--tmt-space-6);
  }
}

.tmt-stack {
  display: flex;
  flex-direction: column;
  gap: var(--tmt-stack-gap, var(--tmt-space-4));
}

.tmt-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tmt-cluster-gap, var(--tmt-space-3));
}

.tmt-grid {
  display: grid;
  gap: var(--tmt-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.tmt-divider {
  border: 0;
  border-block-start: var(--tmt-border-hairline) solid var(--tmt-border-subtle);
  margin-block: var(--tmt-space-6);
}

/* --------------------------------------------------------------------------
   08. BUTTONS
   Pill geometry follows the brand book's own interface example. Minimum
   target is 44px so controls stay reachable on touch.
   -------------------------------------------------------------------------- */
.tmt-btn {
  --_btn-bg: var(--tmt-interactive);
  --_btn-fg: var(--tmt-interactive-text);
  --_btn-border: var(--tmt-interactive);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tmt-space-2);
  min-block-size: 2.75rem;
  padding-inline: var(--tmt-space-5);
  padding-block: var(--tmt-space-2);
  border: var(--tmt-border-hairline) solid var(--_btn-border);
  border-radius: var(--tmt-radius-control);
  background-color: var(--_btn-bg);
  color: var(--_btn-fg);
  font-size: var(--tmt-size-body);
  font-weight: var(--tmt-weight-medium);
  line-height: var(--tmt-leading-small);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--tmt-duration-fast) var(--tmt-ease),
    border-color var(--tmt-duration-fast) var(--tmt-ease),
    color var(--tmt-duration-fast) var(--tmt-ease),
    transform var(--tmt-duration-fast) var(--tmt-ease);
}

.tmt-btn:hover {
  --_btn-bg: var(--tmt-interactive-hover);
  --_btn-border: var(--tmt-interactive-hover);
  color: var(--_btn-fg);
  text-decoration: none;
}

.tmt-btn:active {
  --_btn-bg: var(--tmt-interactive-active);
  --_btn-border: var(--tmt-interactive-active);
  transform: translateY(1px);
}

.tmt-btn[disabled],
.tmt-btn[aria-disabled="true"] {
  --_btn-bg: var(--tmt-surface-muted);
  --_btn-fg: var(--tmt-text-disabled);
  --_btn-border: var(--tmt-surface-muted);
  cursor: not-allowed;
  transform: none;
}

/* Secondary — outlined. The default choice for anything that is not the
   single most important action on the screen. */
.tmt-btn--secondary {
  --_btn-bg: transparent;
  --_btn-fg: var(--tmt-text);
  --_btn-border: var(--tmt-border-strong);
}

.tmt-btn--secondary:hover {
  --_btn-bg: var(--tmt-interactive-subtle);
  --_btn-fg: var(--tmt-text);
  --_btn-border: var(--tmt-border-strong);
}

.tmt-btn--secondary:active {
  --_btn-bg: var(--tmt-surface-muted);
  --_btn-fg: var(--tmt-text);
}

/* Ghost — for toolbars, table rows and dense areas. */
.tmt-btn--ghost {
  --_btn-bg: transparent;
  --_btn-fg: var(--tmt-text);
  --_btn-border: transparent;
}

.tmt-btn--ghost:hover {
  --_btn-bg: var(--tmt-interactive-subtle);
  --_btn-fg: var(--tmt-text);
  --_btn-border: transparent;
}

/* Destructive — the one place a button carries hue. */
.tmt-btn--danger {
  --_btn-bg: var(--tmt-error);
  --_btn-fg: var(--tmt-white);
  --_btn-border: var(--tmt-error);
}

.tmt-btn--danger:hover {
  --_btn-bg: #a81f1f;
  --_btn-border: #a81f1f;
  --_btn-fg: var(--tmt-white);
}

[data-tmt-theme="dark"] .tmt-btn--danger {
  --_btn-fg: var(--tmt-black);
}

.tmt-btn--sm {
  min-block-size: 2.25rem;
  padding-inline: var(--tmt-space-4);
  font-size: var(--tmt-size-small);
}

.tmt-btn--lg {
  min-block-size: 3.25rem;
  padding-inline: var(--tmt-space-6);
  font-size: var(--tmt-size-h4);
}

.tmt-btn--block {
  display: flex;
  width: 100%;
}

.tmt-btn--icon {
  padding-inline: 0;
  inline-size: 2.75rem;
}

.tmt-btn--icon.tmt-btn--sm {
  inline-size: 2.25rem;
}

/* Icons inside buttons flip with the writing direction. */
.tmt-btn__icon {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: none;
}

.tmt-btn__icon--directional {
  transform: scaleX(1);
}

[dir="rtl"] .tmt-btn__icon--directional {
  transform: scaleX(-1);
}

.tmt-btn[aria-busy="true"] {
  cursor: progress;
}

.tmt-btn[aria-busy="true"] .tmt-btn__label {
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   09. FORMS
   -------------------------------------------------------------------------- */
.tmt-field {
  display: flex;
  flex-direction: column;
  gap: var(--tmt-space-2);
}

.tmt-label {
  font-size: var(--tmt-size-small);
  line-height: var(--tmt-leading-small);
  font-weight: var(--tmt-weight-medium);
  color: var(--tmt-text);
}

.tmt-label__optional {
  font-weight: var(--tmt-weight-regular);
  color: var(--tmt-text-muted);
}

.tmt-label__required {
  color: var(--tmt-error);
  margin-inline-start: 0.15em;
}

.tmt-input,
.tmt-textarea,
.tmt-select {
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding-inline: var(--tmt-space-4);
  padding-block: var(--tmt-space-2);
  background-color: var(--tmt-surface);
  color: var(--tmt-text);
  border: var(--tmt-border-hairline) solid var(--tmt-border);
  /* Inputs are rectangles, not pills — a pill field reads as a button and
     hides where the text will land. */
  border-radius: var(--tmt-radius-md);
  transition:
    border-color var(--tmt-duration-fast) var(--tmt-ease),
    background-color var(--tmt-duration-fast) var(--tmt-ease);
}

.tmt-textarea {
  min-block-size: 6.5rem;
  padding-block: var(--tmt-space-3);
  resize: vertical;
}

.tmt-input::placeholder,
.tmt-textarea::placeholder {
  color: var(--tmt-text-muted);
}

.tmt-input:hover,
.tmt-textarea:hover,
.tmt-select:hover {
  border-color: var(--tmt-border-strong);
}

.tmt-input:focus-visible,
.tmt-textarea:focus-visible,
.tmt-select:focus-visible {
  border-color: var(--tmt-focus);
  outline: var(--tmt-border-thick) solid var(--tmt-focus);
  outline-offset: 1px;
}

.tmt-input[disabled],
.tmt-textarea[disabled],
.tmt-select[disabled] {
  background-color: var(--tmt-surface-muted);
  color: var(--tmt-text-disabled);
  border-color: var(--tmt-border-subtle);
  cursor: not-allowed;
}

.tmt-input[readonly] {
  background-color: var(--tmt-surface-sunken);
}

.tmt-select {
  appearance: none;
  /* Chevron sits on the inline-end edge and follows direction. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right calc(var(--tmt-space-4) + 4px) center,
    right var(--tmt-space-4) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: var(--tmt-space-7);
}

[dir="rtl"] .tmt-select {
  background-position:
    left calc(var(--tmt-space-4) + 4px) center,
    left var(--tmt-space-4) center;
}

.tmt-help {
  font-size: var(--tmt-size-small);
  line-height: var(--tmt-leading-small);
  color: var(--tmt-text-muted);
}

/* Invalid state is carried by three signals at once — border weight,
   an icon, and the message text — so it survives greyscale and
   colour-blind viewing. */
.tmt-field--invalid .tmt-input,
.tmt-field--invalid .tmt-textarea,
.tmt-field--invalid .tmt-select,
.tmt-input[aria-invalid="true"],
.tmt-textarea[aria-invalid="true"],
.tmt-select[aria-invalid="true"] {
  border-color: var(--tmt-error);
  border-width: var(--tmt-border-thick);
}

.tmt-error-text {
  display: flex;
  align-items: flex-start;
  gap: var(--tmt-space-2);
  font-size: var(--tmt-size-small);
  line-height: var(--tmt-leading-small);
  font-weight: var(--tmt-weight-medium);
  color: var(--tmt-error);
}

.tmt-error-text::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border: var(--tmt-border-thick) solid currentColor;
  border-radius: var(--tmt-radius-pill);
  font-size: var(--tmt-size-caption);
  font-weight: var(--tmt-weight-bold);
  line-height: 1;
}

.tmt-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.tmt-legend {
  padding: 0;
  margin-block-end: var(--tmt-space-3);
  font-size: var(--tmt-size-h4);
  font-weight: var(--tmt-weight-medium);
}

/* Checkbox and radio: native controls, brand-coloured, with a generous
   clickable label. */
.tmt-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--tmt-space-3);
  min-block-size: 2.75rem;
  padding-block: var(--tmt-space-2);
  cursor: pointer;
}

.tmt-choice input[type="checkbox"],
.tmt-choice input[type="radio"] {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  margin-block-start: 0.125rem;
  accent-color: var(--tmt-interactive);
  cursor: pointer;
}

.tmt-choice__text {
  display: flex;
  flex-direction: column;
  gap: var(--tmt-space-1);
}

.tmt-choice__hint {
  font-size: var(--tmt-size-small);
  line-height: var(--tmt-leading-small);
  color: var(--tmt-text-muted);
}

/* Switch — for settings that apply immediately, never inside a form that
   needs a submit. */
.tmt-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--tmt-space-3);
  cursor: pointer;
}

.tmt-switch input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}

.tmt-switch__track {
  position: relative;
  flex: none;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  border: var(--tmt-border-hairline) solid var(--tmt-border-strong);
  border-radius: var(--tmt-radius-pill);
  background-color: var(--tmt-surface);
  transition: background-color var(--tmt-duration-base) var(--tmt-ease);
}

.tmt-switch__track::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: var(--tmt-radius-pill);
  background-color: var(--tmt-border-strong);
  transition:
    translate var(--tmt-duration-base) var(--tmt-ease),
    background-color var(--tmt-duration-base) var(--tmt-ease);
}

.tmt-switch input:checked + .tmt-switch__track {
  background-color: var(--tmt-interactive);
  border-color: var(--tmt-interactive);
}

.tmt-switch input:checked + .tmt-switch__track::after {
  background-color: var(--tmt-interactive-text);
  /* Logical translate keeps the knob travelling the correct way in RTL. */
  translate: 1.1875rem 0;
}

[dir="rtl"] .tmt-switch input:checked + .tmt-switch__track::after {
  translate: -1.1875rem 0;
}

.tmt-switch input:focus-visible + .tmt-switch__track {
  outline: var(--tmt-border-thick) solid var(--tmt-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   10. TABLES
   -------------------------------------------------------------------------- */
.tmt-table-wrap {
  overflow-x: auto;
  border: var(--tmt-border-hairline) solid var(--tmt-border);
  border-radius: var(--tmt-radius-surface);
}

.tmt-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--tmt-size-small);
  line-height: var(--tmt-leading-small);
  background-color: var(--tmt-surface);
}

.tmt-table caption {
  padding: var(--tmt-space-4);
  text-align: start;
  font-size: var(--tmt-size-small);
  color: var(--tmt-text-muted);
  border-block-end: var(--tmt-border-hairline) solid var(--tmt-border-subtle);
}

.tmt-table :is(th, td) {
  padding-inline: var(--tmt-space-4);
  padding-block: var(--tmt-space-3);
  text-align: start;
  vertical-align: top;
  border-block-end: var(--tmt-border-hairline) solid var(--tmt-border-subtle);
}

.tmt-table thead th {
  background-color: var(--tmt-surface-sunken);
  color: var(--tmt-text);
  font-weight: var(--tmt-weight-semibold);
  white-space: nowrap;
  border-block-end: var(--tmt-border-thick) solid var(--tmt-border-strong);
}

.tmt-table tbody tr:last-child :is(th, td) {
  border-block-end: 0;
}

.tmt-table--striped tbody tr:nth-child(even) {
  background-color: var(--tmt-surface-sunken);
}

.tmt-table--hover tbody tr:hover {
  background-color: var(--tmt-interactive-subtle);
}

.tmt-table--compact :is(th, td) {
  padding-block: var(--tmt-space-2);
}

.tmt-table--sticky thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--tmt-layer-sticky);
}

/* Numbers read right-aligned and tabular in both directions. */
.tmt-table .tmt-numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   11. CARDS
   -------------------------------------------------------------------------- */
.tmt-card {
  display: flex;
  flex-direction: column;
  background-color: var(--tmt-surface-raised);
  border: var(--tmt-border-hairline) solid var(--tmt-border);
  border-radius: var(--tmt-radius-surface);
  overflow: hidden;
}

.tmt-card__media {
  aspect-ratio: 16 / 9;
  background-color: var(--tmt-surface-muted);
  object-fit: cover;
  inline-size: 100%;
}

.tmt-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--tmt-space-2);
  padding: var(--tmt-space-5);
}

.tmt-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tmt-space-3);
  padding: var(--tmt-space-5);
  padding-block-start: 0;
  margin-block-start: auto;
}

.tmt-card--raised {
  border-color: transparent;
  box-shadow: var(--tmt-shadow-md);
}

.tmt-card--inverse {
  background-color: var(--tmt-surface-inverse);
  color: var(--tmt-text-inverse);
  border-color: transparent;
}

.tmt-card--inverse .tmt-h3,
.tmt-card--inverse .tmt-h4 {
  color: inherit;
}

/* Whole-card link target without nesting interactive elements. */
.tmt-card--link {
  position: relative;
  transition:
    border-color var(--tmt-duration-fast) var(--tmt-ease),
    box-shadow var(--tmt-duration-fast) var(--tmt-ease);
}

.tmt-card--link:hover {
  border-color: var(--tmt-border-strong);
  box-shadow: var(--tmt-shadow-sm);
}

.tmt-card--link a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tmt-card--link:focus-within {
  outline: var(--tmt-border-thick) solid var(--tmt-focus);
  outline-offset: 2px;
}

.tmt-card--link a:focus-visible {
  outline: none;
}

/* --------------------------------------------------------------------------
   12. ALERTS
   -------------------------------------------------------------------------- */
.tmt-alert {
  --_alert-accent: var(--tmt-border-strong);
  --_alert-surface: var(--tmt-surface-sunken);
  --_alert-border: var(--tmt-border);

  display: flex;
  align-items: flex-start;
  gap: var(--tmt-space-3);
  padding: var(--tmt-space-4);
  background-color: var(--_alert-surface);
  border: var(--tmt-border-hairline) solid var(--_alert-border);
  /* Accent bar on the inline-start edge mirrors automatically. */
  border-inline-start: var(--tmt-space-1) solid var(--_alert-accent);
  border-radius: var(--tmt-radius-md);
  font-size: var(--tmt-size-small);
  line-height: var(--tmt-leading-small);
}

.tmt-alert__icon {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--tmt-radius-pill);
  background-color: var(--_alert-accent);
  color: var(--tmt-surface);
  font-size: var(--tmt-size-caption);
  font-weight: var(--tmt-weight-bold);
  line-height: 1;
}

.tmt-alert__content {
  display: flex;
  flex-direction: column;
  gap: var(--tmt-space-1);
}

.tmt-alert__title {
  font-size: var(--tmt-size-small);
  font-weight: var(--tmt-weight-semibold);
}

.tmt-alert--success {
  --_alert-accent: var(--tmt-success);
  --_alert-surface: var(--tmt-success-surface);
  --_alert-border: var(--tmt-success-border);
}

.tmt-alert--warning {
  --_alert-accent: var(--tmt-warning);
  --_alert-surface: var(--tmt-warning-surface);
  --_alert-border: var(--tmt-warning-border);
}

.tmt-alert--error {
  --_alert-accent: var(--tmt-error);
  --_alert-surface: var(--tmt-error-surface);
  --_alert-border: var(--tmt-error-border);
}

.tmt-alert--info {
  --_alert-accent: var(--tmt-info);
  --_alert-surface: var(--tmt-info-surface);
  --_alert-border: var(--tmt-info-border);
}

[data-tmt-theme="dark"] .tmt-alert__icon {
  color: var(--tmt-black);
}

/* --------------------------------------------------------------------------
   13. BADGES
   -------------------------------------------------------------------------- */
.tmt-badge {
  --_badge-fg: var(--tmt-text);
  --_badge-bg: var(--tmt-surface-muted);
  --_badge-border: transparent;

  display: inline-flex;
  align-items: center;
  gap: var(--tmt-space-1);
  padding-inline: var(--tmt-space-3);
  padding-block: 0.125rem;
  background-color: var(--_badge-bg);
  color: var(--_badge-fg);
  border: var(--tmt-border-hairline) solid var(--_badge-border);
  border-radius: var(--tmt-radius-pill);
  font-size: var(--tmt-size-caption);
  line-height: 1.5;
  font-weight: var(--tmt-weight-medium);
  white-space: nowrap;
}

.tmt-badge--solid {
  --_badge-bg: var(--tmt-interactive);
  --_badge-fg: var(--tmt-interactive-text);
}

.tmt-badge--outline {
  --_badge-bg: transparent;
  --_badge-border: var(--tmt-border-strong);
}

.tmt-badge--success {
  --_badge-bg: var(--tmt-success-surface);
  --_badge-fg: var(--tmt-success);
  --_badge-border: var(--tmt-success-border);
}

.tmt-badge--warning {
  --_badge-bg: var(--tmt-warning-surface);
  --_badge-fg: var(--tmt-warning);
  --_badge-border: var(--tmt-warning-border);
}

.tmt-badge--error {
  --_badge-bg: var(--tmt-error-surface);
  --_badge-fg: var(--tmt-error);
  --_badge-border: var(--tmt-error-border);
}

.tmt-badge--info {
  --_badge-bg: var(--tmt-info-surface);
  --_badge-fg: var(--tmt-info);
  --_badge-border: var(--tmt-info-border);
}

/* The dot is decoration; the badge text carries the meaning. */
.tmt-badge__dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--tmt-radius-pill);
  background-color: currentColor;
  flex: none;
}

.tmt-badge--count {
  min-inline-size: 1.25rem;
  padding-inline: var(--tmt-space-2);
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   14. MASTHEAD
   The brand's front door in a product: logo lockup, optional product name,
   and account or language controls at the inline end.
   -------------------------------------------------------------------------- */
.tmt-masthead {
  background-color: var(--tmt-black);
  color: var(--tmt-white);
  border-block-end: var(--tmt-border-hairline) solid var(--tmt-grey-800);
}

.tmt-masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--tmt-space-5);
  min-block-size: 4rem;
  width: 100%;
  max-width: var(--tmt-container);
  margin-inline: auto;
  padding-inline: var(--tmt-space-4);
  /* Flex items default to min-content width, which lets long labels push
     out of the bar instead of shrinking. Zeroing the minimum is what makes
     the truncation below actually take effect. */
  min-inline-size: 0;
}

@media (max-width: 30rem) {
  .tmt-masthead__inner {
    gap: var(--tmt-space-3);
  }
}

.tmt-masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--tmt-space-3);
  color: inherit;
  text-decoration: none;
  min-inline-size: 0;
}

.tmt-masthead__brand:hover {
  color: inherit;
  text-decoration: none;
}

.tmt-masthead__logo {
  block-size: 2rem;
  inline-size: auto;
  flex: none;
}

/* The product name is the one part of the bar that can be arbitrarily long,
   so it is the part that gives way — it truncates rather than pushing the
   account controls off the edge. */
.tmt-masthead__product {
  padding-inline-start: var(--tmt-space-4);
  border-inline-start: var(--tmt-border-hairline) solid var(--tmt-grey-700);
  font-size: var(--tmt-size-small);
  font-weight: var(--tmt-weight-medium);
  letter-spacing: var(--tmt-tracking-none);
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tmt-masthead__actions {
  display: flex;
  align-items: center;
  gap: var(--tmt-space-2);
  margin-inline-start: auto;
  flex: none;
}

/* Controls inside the masthead sit on black, so they invert. */
.tmt-masthead .tmt-btn--ghost {
  --_btn-fg: var(--tmt-white);
}

.tmt-masthead .tmt-btn--ghost:hover {
  --_btn-bg: var(--tmt-grey-800);
  --_btn-fg: var(--tmt-white);
}

.tmt-masthead .tmt-btn--secondary {
  --_btn-fg: var(--tmt-white);
  --_btn-border: var(--tmt-grey-500);
}

.tmt-masthead .tmt-btn--secondary:hover {
  --_btn-bg: var(--tmt-grey-800);
  --_btn-fg: var(--tmt-white);
  --_btn-border: var(--tmt-grey-300);
}

.tmt-masthead :is(a, button):focus-visible {
  outline-color: var(--tmt-white);
}

/* --------------------------------------------------------------------------
   15. NAVIGATION
   -------------------------------------------------------------------------- */
.tmt-nav {
  background-color: var(--tmt-surface);
  border-block-end: var(--tmt-border-hairline) solid var(--tmt-border);
}

.tmt-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tmt-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: var(--tmt-container);
  margin-inline: auto;
  padding-inline: var(--tmt-space-4);
}

.tmt-nav__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 3rem;
  padding-inline: var(--tmt-space-4);
  color: var(--tmt-text-secondary);
  font-size: var(--tmt-size-small);
  font-weight: var(--tmt-weight-medium);
  text-decoration: none;
  /* The active marker is a 2px rule on the block-end edge. It uses a
     logical edge so it stays under the label in vertical writing too. */
  border-block-end: var(--tmt-border-thick) solid transparent;
  transition:
    color var(--tmt-duration-fast) var(--tmt-ease),
    border-color var(--tmt-duration-fast) var(--tmt-ease);
}

.tmt-nav__link:hover {
  color: var(--tmt-text);
  text-decoration: none;
  border-block-end-color: var(--tmt-border);
}

.tmt-nav__link[aria-current="page"] {
  color: var(--tmt-text);
  font-weight: var(--tmt-weight-semibold);
  border-block-end-color: var(--tmt-interactive);
}

/* Vertical / sidebar variant. */
.tmt-nav--vertical {
  border-block-end: 0;
}

.tmt-nav--vertical .tmt-nav__list {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
  padding-inline: 0;
  max-width: none;
}

.tmt-nav--vertical .tmt-nav__link {
  min-block-size: 2.5rem;
  inline-size: 100%;
  padding-block: var(--tmt-space-2);
  border-block-end: 0;
  /* In a vertical list the marker moves to the inline-start edge. */
  border-inline-start: var(--tmt-space-1) solid transparent;
}

.tmt-nav--vertical .tmt-nav__link:hover {
  background-color: var(--tmt-interactive-subtle);
  border-inline-start-color: var(--tmt-border);
}

.tmt-nav--vertical .tmt-nav__link[aria-current="page"] {
  background-color: var(--tmt-interactive-subtle);
  border-inline-start-color: var(--tmt-interactive);
}

.tmt-nav__group-title {
  padding-inline: var(--tmt-space-4);
  padding-block: var(--tmt-space-4) var(--tmt-space-2);
  font-size: var(--tmt-size-caption);
  font-weight: var(--tmt-weight-semibold);
  letter-spacing: var(--tmt-tracking-wide);
  text-transform: uppercase;
  color: var(--tmt-text-muted);
}

/* --------------------------------------------------------------------------
   16. BREADCRUMB + TABS
   -------------------------------------------------------------------------- */
.tmt-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tmt-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--tmt-size-small);
}

.tmt-breadcrumb__list li + li::before {
  content: "/";
  margin-inline-end: var(--tmt-space-2);
  color: var(--tmt-text-muted);
}

/* The separator itself is direction-neutral, so RTL needs no override. */
.tmt-breadcrumb a {
  color: var(--tmt-text-secondary);
}

.tmt-breadcrumb [aria-current="page"] {
  color: var(--tmt-text);
  font-weight: var(--tmt-weight-medium);
}

.tmt-tabs {
  display: flex;
  gap: var(--tmt-space-1);
  border-block-end: var(--tmt-border-hairline) solid var(--tmt-border);
  overflow-x: auto;
}

.tmt-tab {
  appearance: none;
  background: none;
  border: 0;
  border-block-end: var(--tmt-border-thick) solid transparent;
  padding-inline: var(--tmt-space-4);
  padding-block: var(--tmt-space-3);
  color: var(--tmt-text-muted);
  font-size: var(--tmt-size-small);
  font-weight: var(--tmt-weight-medium);
  white-space: nowrap;
  cursor: pointer;
}

.tmt-tab:hover {
  color: var(--tmt-text);
}

.tmt-tab[aria-selected="true"] {
  color: var(--tmt-text);
  border-block-end-color: var(--tmt-interactive);
}

/* --------------------------------------------------------------------------
   17. PATTERN
   The Tomatico pattern is a background element and must never compete with
   content. The brand book specifies 5–15% opacity; these helpers cap it there.
   -------------------------------------------------------------------------- */
.tmt-pattern {
  position: relative;
  isolation: isolate;
}

.tmt-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--tmt-pattern-image, url("../brand/pattern-01.png"));
  background-size: var(--tmt-pattern-size, 480px);
  background-repeat: repeat;
  opacity: var(--tmt-pattern-opacity, 0.08);
  pointer-events: none;
}

.tmt-pattern--subtle {
  --tmt-pattern-opacity: 0.05;
}

.tmt-pattern--strong {
  --tmt-pattern-opacity: 0.15;
}

.tmt-pattern--inverse {
  background-color: var(--tmt-black);
  color: var(--tmt-white);
}

.tmt-pattern--inverse::before {
  filter: invert(1);
  opacity: var(--tmt-pattern-opacity, 0.12);
}

/* --------------------------------------------------------------------------
   18. UTILITIES
   -------------------------------------------------------------------------- */
.tmt-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first focusable element on every Tomatico page. */
.tmt-skip-link {
  position: absolute;
  inset-block-start: var(--tmt-space-2);
  inset-inline-start: var(--tmt-space-2);
  z-index: var(--tmt-layer-toast);
  padding: var(--tmt-space-3) var(--tmt-space-4);
  background-color: var(--tmt-surface);
  color: var(--tmt-text);
  border: var(--tmt-border-thick) solid var(--tmt-focus);
  border-radius: var(--tmt-radius-md);
  text-decoration: none;
  transform: translateY(-200%);
}

.tmt-skip-link:focus-visible {
  transform: translateY(0);
}

.tmt-text-start { text-align: start; }
.tmt-text-center { text-align: center; }
.tmt-text-end { text-align: end; }

.tmt-muted { color: var(--tmt-text-muted); }
.tmt-inverse-surface {
  background-color: var(--tmt-surface-inverse);
  color: var(--tmt-text-inverse);
}

.tmt-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}