@import "tailwindcss";
@import "tom-select/dist/css/tom-select.css" layer(base);

/*
 * Design tokens for the whole app: neutral scale is `slate` everywhere (the
 * old admin UI mixed `stone`/`gray` inconsistently). `primary`/`secondary`
 * are the brand accent colors, registered here as real Tailwind color
 * utilities (bg-primary, text-primary, ring-primary, ...) so `/opacity`
 * modifiers work like any other Tailwind color. Each resolves from the
 * --store-primary/--store-secondary custom properties that
 * layouts/_theme_vars.html.erb sets per-request from the current store's
 * StoreSetting — falling back to the original indigo/slate-900 defaults if
 * those vars are ever unset.
 */
@theme {
  --color-primary: var(--store-primary, #4f46e5);
  --color-secondary: var(--store-secondary, #0f172a);

  /*
   * Sutra brand palette (sutra-tokens.css v1.0) — used by the marketing
   * landing page, auth screens, splash and 404. Named so none of them shadow
   * a Tailwind default scale (indigo/amber/violet stay untouched for the app).
   */
  --color-ink: #14120E;

  --color-cotton-50: #FAF8F5;
  --color-cotton-100: #F3F0EA;
  --color-cotton-200: #E6E1D8;
  --color-cotton-300: #D2CBBF;
  --color-cotton-400: #A9A194;
  --color-cotton-500: #807869;
  --color-cotton-600: #5F584C;
  --color-cotton-700: #474137;
  --color-cotton-800: #2F2B24;
  --color-cotton-900: #1F1C17;
  --color-cotton-950: #14120E;

  --color-madder-50: #FBF0F4;
  --color-madder-100: #F6DCE6;
  --color-madder-200: #ECB5C9;
  --color-madder-300: #DD84A4;
  --color-madder-400: #CB5280;
  --color-madder-500: #B83468;
  --color-madder-600: #A3245A;
  --color-madder-700: #861C4A;
  --color-madder-800: #67163A;
  --color-madder-900: #4A1029;

  --color-turmeric-50: #FDF8EA;
  --color-turmeric-100: #FBEFCC;
  --color-turmeric-300: #F0C85A;
  --color-turmeric-400: #E3A81F;
  --color-turmeric-600: #A87406;
  --color-turmeric-800: #5E4105;
  --color-turmeric-900: #3F2C04;

  --color-leaf-100: #E6F4EC;
  --color-leaf-400: #5BC28A;
  --color-leaf-600: #1F7A4D;

  --color-vermilion-100: #FCEBE6;
  --color-vermilion-300: #F2B4A4;
  --color-vermilion-600: #C2361A;

  --color-saffron-100: #FDF1DC;
  --color-saffron-700: #8F5207;

  --color-link: #3A47A6;
  --color-link-hover: #2E3887;
  --color-focus-halo: #DCE0F4;

  --font-display: "Bricolage Grotesque", "Anek Devanagari", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", "Anek Devanagari", system-ui, sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-devanagari: "Anek Devanagari", "Noto Sans Devanagari", sans-serif;
}

@layer base {
  ::selection {
    background-color: color-mix(in srgb, var(--color-primary) 20%, white);
  }
}

/*
 * Tom Select (searchable <select>, see select_controller.js) — the import
 * above provides its required structural CSS (dropdown positioning, hiding
 * the native <select>); this just re-skins its default theme to match the
 * app's own field/dropdown look. Layered after `base` so it reliably wins.
 */
@layer components {
  /* Tom Select measures the native <select>'s width at init and locks it in
     inline — that width is unreliable inside a table cell or a flex/grid
     item, so force it to fill its parent instead. */
  .ts-wrapper {
    @apply w-full;
  }

  .ts-wrapper .ts-control {
    @apply rounded-lg border-0 px-3 py-2 text-sm text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300;
  }

  .ts-wrapper.focus .ts-control {
    @apply ring-2 ring-primary;
  }

  .ts-wrapper .ts-control input {
    @apply text-sm text-slate-900;
  }

  /* z-[60]: appended to <body> (dropdownParent: "body" in select_controller.js)
     to escape overflow-clipping ancestors, so it must outrank every fixed
     overlay it can render inside of — the offcanvas panel and main nav
     sidebar both sit at z-50. */
  .ts-dropdown {
    @apply z-[60] mt-1 rounded-lg border border-slate-200 bg-white text-sm shadow-lg;
  }

  .ts-dropdown [data-selectable] {
    @apply cursor-pointer px-3 py-2 text-slate-700;
  }

  .ts-dropdown .active {
    @apply bg-primary/10 text-primary;
  }

  .ts-dropdown .no-results {
    @apply px-3 py-2 text-slate-400;
  }
}