/* =====================================================================
   THEME · modern — Gayesha POS neutral-first redesign
   ---------------------------------------------------------------------
   Neutral white chrome, ink text, green reserved for primary intent
   (Charge, Create, Save) and the active-nav pill. Green stays the brand,
   it just stops being the background.

   Load AFTER global.css, composition.css, utilities.css and blocks/.
   To swap themes, replace this file's <link> in base.html.

   Sections:
     1. Primitive palette (verbatim from original.css)
     2. Semantic token remapping — neutral chrome
     3. Motion / z-index knobs
     4. Base element overrides (html, body, links, forms, tables)
   Block appearance lives in blocks/*.css, not here.
   ===================================================================== */

/* 1. Primitive palette ----------------------------------------------- */
:root {
  --mv-green-50:  #e8f5e9;
  --mv-green-100: #c8e6c9;
  --mv-green-200: #a5d6a7;
  --mv-green-300: #81c784;
  --mv-green-400: #66bb6a;
  --mv-green-500: #4caf50;
  --mv-green-600: #43a047;
  --mv-green-700: #388e3c;
  --mv-green-800: #2e7d32;
  --mv-green-900: #1b5e20;

  --mv-red-500:   #e53935;
  --mv-red-600:   #d32f2f;

  --mv-ink-900:   #1a1d1f;
  --mv-ink-800:   #2c3034;
  --mv-ink-700:   #3f464c;
  --mv-ink-600:   #5a626a;
  --mv-ink-500:   #767f88;
  --mv-ink-400:   #9aa1a8;
  --mv-ink-300:   #c1c6cb;
  --mv-ink-200:   #dde0e3;
  --mv-ink-100:   #ebedef;
  --mv-ink-50:    #f5f6f7;
  --mv-ink-25:    #fafbfc;
  --mv-white:     #ffffff;
}

/* 2. Semantic token remapping — neutral chrome ----------------------- */
:root {
  --color-bg:            var(--mv-ink-50);     /* canvas */
  --color-surface:       var(--mv-white);
  --color-surface-muted: var(--mv-ink-25);     /* table headers */
  --color-fg:            var(--mv-ink-900);
  --color-muted:         var(--mv-ink-500);
  --color-border:        #e4e7ea;              /* card borders */
  --color-border-subtle: #f0f1f3;              /* row dividers */
  --color-border-strong: var(--mv-ink-200);

  --color-accent:        var(--mv-green-500);
  --color-accent-fg:     var(--mv-white);
  --color-primary:       var(--mv-green-500);
  --color-primary-hover: var(--mv-green-600);
  --color-primary-active:var(--mv-green-700);
  --color-primary-soft:  var(--mv-green-50);   /* active nav, tints */
  --color-primary-ink:   var(--mv-green-800);  /* text on soft */
  --color-on-primary:    var(--mv-white);

  --color-danger:        var(--mv-red-600);
  --color-danger-hover:  var(--mv-red-500);
  --color-danger-soft:   #fdecea;
  --color-danger-border: #f3c9c6;
  --color-warn:          #c77700;
  --color-warn-soft:     #fff8ec;
  --color-warn-border:   #ffe0b2;
  --color-warn-ink:      #7a4c00;
  --color-info-soft:     #eef2fd;
  --color-info-ink:      #3f51b5;
  --color-accent2-soft:  #f3eefd;              /* card payment pill */
  --color-accent2-ink:   #6a3fb5;
  --color-success:       var(--mv-green-800);

  --color-selected:      #f1f8f2;              /* selected table row */
  --color-test-tint:     #fffdf7;              /* test-flagged sale row */
  --color-skip-tint:     #fffafa;              /* skipped import row */
  --color-hover-soft:    #eceef0;              /* icon-button hover */
  --color-on-dark-hover: rgba(255, 255, 255, 0.1);   /* toast controls */
  --color-on-dark-muted: rgba(255, 255, 255, 0.6);
  --color-toast-undo:    var(--mv-green-300);
  --color-input-bg:      var(--mv-white);
  --color-backdrop:      rgba(15, 20, 25, 0.42);
  --color-focus-ring:    rgba(76, 175, 80, 0.16);

  /* Typography — Inter + Roboto Mono (loaded via <link> in base.html) */
  --font-body: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Elevation — flatter than Material */
  --shadow-xs:    0 1px 2px rgba(15, 20, 25, 0.04);
  --shadow-sm:    0 1px 3px rgba(15, 20, 25, 0.07);
  --shadow-md:    0 8px 28px rgba(15, 20, 25, 0.08);
  --shadow-lg:    0 24px 64px rgba(15, 20, 25, 0.28);   /* dialogs */
  --shadow-toast: 0 12px 32px rgba(15, 20, 25, 0.28);
  --shadow-tile:  0 18px 48px rgba(15, 20, 25, 0.14);
}

/* 3. Motion / z-index knobs ------------------------------------------ */
:root {
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    320ms;

  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  40;
  --z-menu:    60;
  --z-overlay: 80;
  --z-toast:   90;
}

/* 4. Base element overrides ------------------------------------------ */

html {
  font-family: var(--font-body);
  font-size: 16px;                 /* flat: the fluid clamp fought the fixed tablet width */
  background-color: var(--color-bg);
  color: var(--color-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-size: var(--fs-md);
}

a { color: var(--color-primary-hover); transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-primary-active); }

/* Buttons: filled = primary intent only. Secondary actions opt into
   data-variant="outline"; most toolbar buttons should be outline. */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  block-size: var(--control-h);
  min-block-size: var(--control-h);
  min-inline-size: 0;
  padding-inline: var(--space-m);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: 0;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-xs);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
button:hover:not(:disabled) { background: var(--color-primary-hover); }
button:active:not(:disabled) { background: var(--color-primary-active); }
button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
button:disabled { background: var(--color-border-strong); color: var(--color-muted); box-shadow: none; cursor: not-allowed; }

/* Secondary — the default for most actions. */
button[data-variant="outline"] {
  background: var(--color-surface);
  color: var(--color-fg);
  border: 1px solid var(--color-border-strong);
  font-weight: 500;
  box-shadow: none;
}
button[data-variant="outline"]:hover:not(:disabled) {
  background: var(--color-bg);
  border-color: var(--color-border-strong);
}

button[data-variant="ghost"] {
  background: transparent;
  color: var(--color-primary);
  box-shadow: none;
}
button[data-variant="ghost"]:hover:not(:disabled) { background: var(--color-primary-soft); }

button[data-variant="danger"] { background: var(--color-danger); color: var(--color-on-primary); }
button[data-variant="danger"]:hover:not(:disabled) { background: var(--color-danger-hover); }

button[data-variant="danger-quiet"] {
  background: var(--color-surface);
  color: var(--color-danger);
  border: 1px solid var(--color-danger-border);
  box-shadow: none;
}
button[data-variant="danger-quiet"]:hover:not(:disabled) { background: var(--color-danger-soft); }

/* Inputs: outlined, not underlined. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select, textarea {
  appearance: none;
  block-size: var(--control-h);
  min-block-size: var(--control-h);
  padding: 0 var(--space-s);
  background: var(--color-surface);
  color: var(--color-fg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-m);
  font-size: var(--fs-md);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
textarea { block-size: auto; padding: var(--space-s); resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
input:disabled, select:disabled, textarea:disabled {
  color: var(--color-muted);
  background: var(--color-surface-muted);
  cursor: not-allowed;
}
input[type="checkbox"] { accent-color: var(--color-primary); inline-size: 16px; block-size: 16px; min-block-size: 0; cursor: pointer; }

/* Tables live inside .table-card; only typography here. */
th {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-base);
  background: var(--color-surface-muted);
  padding: var(--space-s) var(--space-m);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted);
  border-block-end: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
}
td {
  padding: var(--space-s) var(--space-m);
  font-size: var(--fs-sm);
  border-block-end: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}
tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }
tbody tr:hover { background: var(--color-surface-muted); }
tbody tr[data-selected] { background: var(--color-selected); }
tbody tr[data-test] { background: var(--color-test-tint); }
tbody tr[data-skip] { background: var(--color-skip-tint); }

/* Utility class colour overrides. */
.muted { color: var(--color-muted); }
.err   { color: var(--color-danger); }