/*
 * mint-rail daisyUI theme — "Flo Teal".
 *
 * daisyUI 5 themes are plain CSS variables — this file IS the theme, no build
 * step involved. Loaded after the compiled tailwind.css, activated by
 * <html data-theme="mint-rail">. Change brand colors here and nowhere else.
 * Colors are oklch(lightness chroma hue); the trailing hex note on each is the
 * brand source value it was converted from.
 *
 * Palette:  Flo Teal #18d3af · Deep Teal #0a7f69 · Brand Ink #17152F · Paper #ffffff–#eceae5
 * Rules:    Paper carries the interface, Ink carries the words, one teal
 *           action per view. Status colors stay muted — never the action teal.
 *           Flo Teal is a FILL colour only (1.9:1 on white) — teal-as-text
 *           always goes through --color-accent, which clears 4.5:1 on paper.
 * Shape:    4px controls, 0.35rem containers, pill selectors. Flat — no depth.
 */

/* Brand typeface — self-hosted variable woff2 (wght 200–800), no runtime CDN.
 * propshaft fingerprints the url() at serve time. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/assets/PlusJakartaSans-latin-wght-normal-d2ff26bc.woff2") format("woff2-variations");
}

/* Light and dark are ONE definition: every flipped token carries both sides
 * via light-dark(), resolved by the html color-scheme. `light dark` follows
 * the OS; the sidebar switcher forces a side by setting data-color-scheme
 * (cookie-backed, so the server renders it on first paint — no flash). */
[data-theme='mint-rail'] {
  color-scheme: light dark;

  /* Surfaces — Paper in light, Ink in dark. Dark cards sit one step above
   * the page so tables/tiles/charts keep their edges (shadows are invisible
   * on ink). */
  --color-base-100: light-dark(#ffffff, #0f1522); /* cards, page */
  --color-base-200: light-dark(#f9fafb, #0a0f1b); /* app background — gray-200 in light */
  --color-base-300: light-dark(oklch(93.7% 0.007 89), oklch(28.4% 0.004 107)); /* #eceae5 · #2a2a28 — wells, borders */
  --color-base-content: light-dark(oklch(15.4% 0 0), oklch(97% 0.003 85));    /* #0c0c0c · #f6f5f3 — body text */

  /* Flo Teal — the one action per view, same on both sides (9.5:1 against
   * the dark card). Contrast-checked: Brand Ink on Flo Teal 9.3:1 — white on
   * it is only 1.9:1, never pair. */
  --color-primary: oklch(77.5% 0.144 174);          /* #18d3af */
  --color-primary-content: oklch(21.4% 0.050 285);  /* #17152F — teal carries ink */

  /* Ink buttons/badges in light; Paper flips in for dark */
  --color-secondary: light-dark(oklch(15.4% 0 0), oklch(97% 0.003 85));       /* #0c0c0c · #f6f5f3 */
  --color-secondary-content: light-dark(oklch(97% 0.003 85), oklch(15.4% 0 0));

  /* Teal as TEXT — deep teal on paper (4.9:1 on white), pale tint on ink.
   * Every text-role use of the brand colour (hover, active nav/tab, badge)
   * reads this, never --color-primary. */
  --color-accent: light-dark(oklch(53.3% 0.099 175), oklch(90.3% 0.076 179)); /* #0a7f69 · #a7f0e0 */
  --color-accent-content: light-dark(oklch(97% 0.003 85), oklch(21.4% 0.050 285)); /* paper · #17152F */

  --color-neutral: oklch(38.2% 0.007 95);     /* #44433f — navbar, footers */
  --color-neutral-content: oklch(97% 0.003 85); /* #f6f5f3 */

  /* Feedback — functional and muted, never the action blue */
  --color-info: light-dark(oklch(51.6% 0.04 227), oklch(69.4% 0.049 229));    /* #4f6d7a · #7da3b5 */
  --color-info-content: light-dark(oklch(100% 0 0), oklch(15.4% 0 0));
  --color-success: light-dark(oklch(53.2% 0.096 151), oklch(69.3% 0.098 153)); /* #3e7c4f · #6bae7f */
  --color-success-content: light-dark(oklch(100% 0 0), oklch(15.4% 0 0));
  --color-warning: light-dark(oklch(63.2% 0.128 78), oklch(75.4% 0.133 82));  /* #b47e10 · #d9a63c */
  --color-warning-content: oklch(15.4% 0 0);  /* #0c0c0c */
  --color-error: light-dark(oklch(48.3% 0.147 24), oklch(64.4% 0.127 21));    /* #a13232 · #cf6b6b */
  --color-error-content: light-dark(oklch(100% 0 0), oklch(15.4% 0 0));

  /* Shape: 4px controls, 0.35rem containers, pill selectors — flat */
  --radius-selector: 2rem;     /* badges, toggles, checkboxes */
  --radius-field: 0.25rem;     /* 4px — inputs, selects, buttons */
  --radius-box: 0.35rem;       /* cards, modals, tables */
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/* The payer's wallet: every screen after the landing's Continue, on every
 * merchant (storyboard 2, drawn 2026-10-23). Pinned dark, because the wallet
 * is the payer's, not the merchant's. Surfaces are the neutral scale as
 * drawn; the one action is Flo Teal carrying ink, and teal as text clears
 * 9.5:1 on the card so --color-accent is the brand teal itself here. */
[data-theme='mint-rail-wallet'] {
  color-scheme: dark;

  --color-base-100: #171717;      /* neutral-900: cards */
  --color-base-200: #0a0a0a;      /* neutral-950: the page */
  --color-base-300: #262626;      /* neutral-800: wells, tracks, rings */
  --color-base-content: #f5f5f5;  /* neutral-100 */

  --color-primary: oklch(77.5% 0.144 174);          /* #18d3af */
  --color-primary-content: oklch(21.4% 0.050 285);  /* #17152F */
  --color-accent: oklch(77.5% 0.144 174);           /* teal as text */
  --color-accent-content: oklch(21.4% 0.050 285);

  /* The two states the wallet shows: verified, and a failed leg. */
  --color-success: oklch(69.3% 0.098 153);
  --color-success-content: oklch(15.4% 0 0);
  --color-error: oklch(64.4% 0.127 21);
  --color-error-content: oklch(15.4% 0 0);

  /* Shape as drawn: 2xl cards, lg buttons and fields, pill selectors, flat. */
  --radius-selector: 2rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --depth: 0;

  /* The confetti burst on the funded wallet (F13), six hues as drawn. */
  --confetti-1: #2dd4bf;  /* teal-400 */
  --confetti-2: #fbbf24;  /* amber-400 */
  --confetti-3: #f472b6;  /* pink-400 */
  --confetti-4: #a78bfa;  /* violet-400 */
  --confetti-5: #38bdf8;  /* sky-400 */
  --confetti-6: #a3e635;  /* lime-400 */
}

/* The wallet's bars are hairlines on a quiet track, as drawn. */
[data-theme='mint-rail-wallet'] .progress {
  height: 0.375rem;
  background-color: var(--color-base-300);
}

/* The switcher's override — anything but an explicit side follows the OS. */
[data-theme='mint-rail'][data-color-scheme='light'] { color-scheme: light; }
[data-theme='mint-rail'][data-color-scheme='dark'] { color-scheme: dark; }

/* Chart palette — pinned to Tailwind's scale like the badges below (400-tier
 * on dark, 700-tier on light). Brand teal is for lines and buttons only;
 * card marks (bar segments, swatches) never wear it. Identity slots are in
 * fixed order from slot 2; the status slots are never used as a series. Marks use the
 * .chart-fill-* classes, the hue at the badge's tint strength, so a card
 * reads as quietly as a row of badges; figures and the line use the solid
 * .chart-color-* shade. Checked with the dataviz six-checks script per card
 * (2026-10-19): blue, indigo and purple sit too close for colour-blind
 * readers to be neighbours, so indigo is last and every breakdown row
 * carries its label. Charts reference these via currentColor (inline style
 * attrs are CSP-blocked). */
[data-theme='mint-rail'] {
  --chart-1: light-dark(#00d6ac, #00d6ac);        /* brand teal: lines only */
  --chart-2: light-dark(#1d4ed8, #60a5fa);        /* blue-700 · blue-400 */
  --chart-3: light-dark(#7e22ce, #c084fc);        /* purple-700 · purple-400 */
  --chart-4: light-dark(#be185d, #f472b6);        /* pink-700 · pink-400 */
  --chart-5: light-dark(#4338ca, #818cf8);        /* indigo-700 · indigo-400 */
  --chart-neutral: light-dark(#4b5563, #9ca3af);  /* gray-600 · gray-400 */
  --chart-success: light-dark(#15803d, #4ade80);  /* green-700 · green-400 */
  --chart-warning: light-dark(#a16207, #eab308);  /* yellow-700 · yellow-500 */
  --chart-error: light-dark(#b91c1c, #f87171);    /* red-700 · red-400 */
  --chart-tint: 45%;
}

.chart-color-1 { color: var(--chart-1); }
.chart-color-2 { color: var(--chart-2); }
.chart-color-3 { color: var(--chart-3); }
.chart-color-4 { color: var(--chart-4); }
.chart-color-5 { color: var(--chart-5); }
.chart-color-neutral { color: var(--chart-neutral); }
.chart-color-success { color: var(--chart-success); }
.chart-color-warning { color: var(--chart-warning); }
.chart-color-error { color: var(--chart-error); }

.chart-fill-2 { color: color-mix(in oklab, var(--chart-2) var(--chart-tint), transparent); }
.chart-fill-3 { color: color-mix(in oklab, var(--chart-3) var(--chart-tint), transparent); }
.chart-fill-4 { color: color-mix(in oklab, var(--chart-4) var(--chart-tint), transparent); }
.chart-fill-5 { color: color-mix(in oklab, var(--chart-5) var(--chart-tint), transparent); }
.chart-fill-neutral { color: color-mix(in oklab, var(--chart-neutral) var(--chart-tint), transparent); }
.chart-fill-success { color: color-mix(in oklab, var(--chart-success) var(--chart-tint), transparent); }
.chart-fill-warning { color: color-mix(in oklab, var(--chart-warning) var(--chart-tint), transparent); }
.chart-fill-error { color: color-mix(in oklab, var(--chart-error) var(--chart-tint), transparent); }

/* Brand details daisyUI variables can't express. */

/* Elevated surfaces (cards, stats strips, table chrome) mark their edges
   with .shadow — invisible on ink, so in dark they get a hairline border
   instead. Light resolves the border transparent and keeps the shadow. */
[data-theme='mint-rail'] .bg-base-100.shadow {
  border: 1px solid light-dark(transparent, color-mix(in oklab, var(--color-base-content) 10%, transparent));
}

/* Focus: the Flo Teal ring alone; the border drops out. */
.input:focus,
.input:focus-within,
.select:focus,
.textarea:focus {
  border-color: transparent;
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 50%, transparent);
}

/* Active menu item — deep teal text on a soft teal pill (the icon-rail
   sidebar needs more than a text tint to mark the current page). */
[data-theme='mint-rail'] .menu {
  --menu-active-bg: color-mix(in oklab, var(--color-primary) 15%, transparent);
  --menu-active-fg: var(--color-accent);
}

/* Active tab — the same soft teal pill; the default box-tab surface is
   invisible dark-on-dark. */
[data-theme='mint-rail'] .tabs-box .tab-active {
  background: color-mix(in oklab, var(--color-primary) 15%, transparent);
  color: var(--color-accent);
  box-shadow: none;
}

/* Badges — Tailwind's tinted-pill style: color/10 background, colored text,
   1px inset ring at color/25. daisyUI variant classes (.badge-success etc.)
   keep working unchanged — they only set --badge-color; this changes how
   .badge consumes it. Unset variants (and badge-ghost) fall back to the
   base-content gray tint, matching Tailwind's gray badge. */
/* Badge palette — pinned to Tailwind's scale (the badge examples), NOT the
   muted semantic status tokens. 400-tier on dark (as in the Tailwind dark
   example), 600/700-tier on light (Tailwind's light badge convention —
   400-tier text fails contrast on white). */
[data-theme='mint-rail'] .badge-ghost,
[data-theme='mint-rail'] .badge-neutral { --badge-color: light-dark(#4b5563, #9ca3af); }  /* gray-600 · gray-400 */
[data-theme='mint-rail'] .badge-error   { --badge-color: light-dark(#b91c1c, #f87171); }  /* red-700 · red-400 */
[data-theme='mint-rail'] .badge-warning { --badge-color: light-dark(#a16207, #eab308); }  /* yellow-700 · yellow-500 */
[data-theme='mint-rail'] .badge-success { --badge-color: light-dark(#009376, #1ad3af); }  /* green-700 · green-400 */
[data-theme='mint-rail'] .badge-info    { --badge-color: light-dark(#1d4ed8, #60a5fa); }  /* blue-700 · blue-400 */
[data-theme='mint-rail'] .badge-secondary { --badge-color: light-dark(#4338ca, #818cf8); } /* indigo-700 · indigo-400 */
[data-theme='mint-rail'] .badge-accent  { --badge-color: light-dark(#7e22ce, #c084fc); }  /* purple-700 · purple-400 */
[data-theme='mint-rail'] .badge-primary { --badge-color: var(--color-accent); }   /* brand teal as text */

[data-theme='mint-rail'] .badge {
  --badge-tint: var(--badge-color, var(--color-base-content));
  border: 0;
  border-radius: 0.375rem;      /* rounded-md */
  height: auto;
  padding: 0.25rem 0.5rem;      /* px-2 py-1 */
  font-size: 0.75rem;           /* text-xs */
  font-weight: 500;             /* font-medium */
  color: var(--badge-tint);
  background: color-mix(in oklab, var(--badge-tint) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--badge-tint) 25%, transparent);
  text-transform: capitalize;
}

/* Selection — the brand blue carrying its content color, in both themes. */
::selection {
  background: var(--color-primary);
  color: var(--color-primary-content);
}

/* Hover — interactive text turns deep teal; backgrounds stay quiet. */
.menu li > a:hover,
.menu summary:hover,
.menu li > button:hover,
.tab:hover,
.btn-ghost:hover,
.breadcrumbs a:hover,
.link-hover:hover {
  color: var(--color-accent);
}

/* Data tables — hover is a text cue, never a background shift (rows must
   not merge into the page background). */
.table tbody tr:hover {
  color: var(--color-accent);
}

/* Payments brand — amounts always align. */
.tabular-nums,
table.table td {
  font-variant-numeric: tabular-nums;
}