@import "tailwindcss";
@source "../../../spec/components/previews";

@theme {
  /* Royal Purple scale — L and C values computed from the brand hex ladder;
     hue locked to 302 throughout so the scale reads as a pure purple ramp
     (raw conversions drifted to hue 172 at 50 as chroma → 0 near white). */
  --color-royal-purple-50:  oklch(99.4% 0.026 302);
  --color-royal-purple-100: oklch(96.7% 0.019 302);
  --color-royal-purple-200: oklch(92.2% 0.027 302);
  --color-royal-purple-300: oklch(86.0% 0.054 302);
  --color-royal-purple-400: oklch(75.1% 0.109 302);
  --color-royal-purple-500: oklch(65.4% 0.157 302);
  --color-royal-purple-600: oklch(56.9% 0.185 302);
  --color-royal-purple-700: oklch(48.2% 0.187 302);
  --color-royal-purple-800: oklch(45.4% 0.167 302);
  --color-royal-purple-900: oklch(39.0% 0.132 302);
  --color-royal-purple-950: oklch(28.5% 0.124 302);
}

@plugin "daisyui" {
  themes: all;
}

@plugin "daisyui/theme" {
  name: "tdf-light";
  default: true;
  prefersdark: false;
  color-scheme: light;

/* Surface */
  --color-base-100: oklch(99.2% 0.008 95.2);   /* near-white warm */
  --color-base-200: oklch(97.0% 0.018 97.6);
  --color-base-300: oklch(93.5% 0.028 97.5);
  --color-base-content: oklch(22.8% 0.048 297.2); /* deep-aubergine #1F1730 */

  /* Brand */
  --color-primary: var(--color-royal-purple-900);
  --color-primary-content: oklch(97.8% 0.016 95.2);   /* ivory-mist     #FBF8EC */

  --color-secondary: oklch(62.0% 0.120 185.0);         /* teal */
  --color-secondary-content: oklch(97.8% 0.016 95.2); /* ivory-mist */

  --color-accent: oklch(68.0% 0.105 306.6);            /* mid lavender */
  --color-accent-content: oklch(97.8% 0.016 95.2);    /* ivory-mist */

  --color-neutral: oklch(18.0% 0.055 295.0);           /* near-black purple */
  --color-neutral-content: oklch(97.8% 0.016 95.2);   /* ivory-mist */

  /* Semantic */
  --color-info: oklch(60.0% 0.130 225.0);             /* azure blue */
  --color-info-content: oklch(97.8% 0.016 95.2);     /* ivory-mist */

  --color-success: oklch(60.7% 0.083 136.6);          /* sage           #6B8E5C */
  --color-success-content: oklch(97.8% 0.016 95.2);   /* ivory-mist */

  --color-warning: oklch(80.0% 0.120 85.7);            /* amber */
  --color-warning-content: oklch(22.8% 0.048 297.2);  /* deep-aubergine */

  --color-error: oklch(55.9% 0.179 34.4);             /* red-ochre      #C73E1D */
  --color-error-content: oklch(97.8% 0.016 95.2);     /* ivory-mist */

  /* Shape */
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;}

@plugin "daisyui/theme" {
  name: "tdf-dark";
  default: false;
  prefersdark: true;
  color-scheme: dark;

  --color-base-100: oklch(22% 0.005 67.558);
  --color-base-200: oklch(27% 0.005 67.558);
  --color-base-300: oklch(33% 0.005 67.558);
  --color-base-content: oklch(92% 0.003 48.717);
  --color-primary: var(--color-royal-purple-500);
  --color-primary-content: oklch(98% 0.01 295);
  --color-secondary: oklch(62% 0.125 185.0);
  --color-secondary-content: oklch(18% 0.04 185);
  --color-accent: oklch(72% 0.110 306.6);
  --color-accent-content: oklch(18% 0.04 306.6);
  --color-neutral: oklch(35% 0.07 295.0);
  --color-neutral-content: oklch(90% 0.01 295);
  --color-info: oklch(65% 0.145 225.0);
  --color-info-content: oklch(18% 0.05 225);
  --color-success: oklch(72% 0.177 163.223);
  --color-success-content: oklch(20% 0.05 168.94);
  --color-warning: oklch(80% 0.120 85.7);
  --color-warning-content: oklch(22% 0.07 45.904);
  --color-error: oklch(68% 0.191 22.216);
  --color-error-content: oklch(20% 0.07 12.094);
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 0.75rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1px;
  --depth: 0;
  --noise: 0;}

@plugin "daisyui/theme" {
  name: "mono-fi-light";
  default: false;
  prefersdark: false;
  color-scheme: light;

  --color-base-100: oklch(100.0% 0.0001 263.3);
  --color-base-200: oklch(96.5% 0.0069 248.1);
  --color-base-300: oklch(88.6% 0.0368 241.9);
  --color-base-content: oklch(55.0% 0.065 258.3);

  --color-primary: oklch(39.6% 0.0736 256.0);
  --color-primary-content: oklch(100.0% 0.0001 263.3);

  --color-secondary: oklch(46.1% 0.1013 252.8);
  --color-secondary-content: oklch(100.0% 0.0001 263.3);

  --color-accent: oklch(27.5% 0.0589 256.2);
  --color-accent-content: oklch(100.0% 0.0001 263.3);

  --color-neutral: oklch(95.1% 0.0138 248.1);
  --color-neutral-content: oklch(39.6% 0.0736 256.0);

  --color-info: oklch(46.8% 0.1023 244.2);
  --color-info-content: oklch(100.0% 0.0001 263.3);

  --color-success: oklch(47.1% 0.0956 151.7);
  --color-success-content: oklch(100.0% 0.0001 263.3);

  --color-warning: oklch(48.9% 0.0889 80.7);
  --color-warning-content: oklch(100.0% 0.0001 263.3);

  --color-error: oklch(43.2% 0.1306 24.4);
  --color-error-content: oklch(100.0% 0.0001 263.3);

  --radius-selector: 0;
  --radius-field: 0;
  --radius-box: 0;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

@plugin "daisyui/theme" {
  name: "mono-fi-dark";
  default: false;
  prefersdark: false;
  color-scheme: dark;

  --color-base-100: oklch(28.0% 0.04 258.3);
  --color-base-200: oklch(33.0% 0.05 256.0);
  --color-base-300: oklch(40.0% 0.06 256.0);
  --color-base-content: oklch(85.0% 0.035 258.3);

  --color-primary: oklch(60.0% 0.0736 256.0);
  --color-primary-content: oklch(18.0% 0.04 258.3);

  --color-secondary: oklch(56.0% 0.1013 252.8);
  --color-secondary-content: oklch(18.0% 0.04 258.3);

  --color-accent: oklch(72.0% 0.06 256.2);
  --color-accent-content: oklch(18.0% 0.04 258.3);

  --color-neutral: oklch(25.0% 0.05 256.0);
  --color-neutral-content: oklch(70.0% 0.06 256.0);

  --color-info: oklch(58.0% 0.1023 244.2);
  --color-info-content: oklch(18.0% 0.04 258.3);

  --color-success: oklch(58.0% 0.0956 151.7);
  --color-success-content: oklch(18.0% 0.04 258.3);

  --color-warning: oklch(62.0% 0.0889 80.7);
  --color-warning-content: oklch(18.0% 0.04 258.3);

  --color-error: oklch(56.0% 0.1306 24.4);
  --color-error-content: oklch(18.0% 0.04 258.3);

  --radius-selector: 0;
  --radius-field: 0;
  --radius-box: 0;
  --border: 1px;
  --depth: 0;
  --noise: 0;
}

/*
 * mono-fi: Font + dashed border overrides
 * Scoped to mono-fi themes only so other DaisyUI themes render normally.
 */
@layer components {
  [data-theme="mono-fi-light"],
  [data-theme="mono-fi-dark"] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Buttons — outline and ghost variants */
    & .btn-outline,
    & .btn-ghost {
      border-style: dashed;
    }

    /* Cards */
    & .card {
      border-style: dashed;
    }

    /* Form inputs */
    & .input,
    & .textarea,
    & .select {
      border-style: dashed;
    }

    /* Badges */
    & .badge {
      border-style: dashed;
    }

    /* Tables */
    & .table :where(thead, tbody, tfoot) :where(tr) {
      border-style: dashed;
    }

    /* Dividers */
    & .divider::before,
    & .divider::after {
      border-style: dashed;
    }

    /* Navbar bottom border */
    & .navbar {
      border-bottom-style: dashed;
    }

    /* Tabs */
    & .tabs-border {
      border-style: dashed;
    }
    & .tabs-border .tab {
      border-style: dashed;
    }

    /* Menu */
    & .menu :where(li) {
      border-style: dashed;
    }

    /* Join (grouped items) */
    & .join-item {
      border-style: dashed;
    }

    /* Fieldset / Card body dividers */
    & .card-body {
      border-style: dashed;
    }
  }
}

/* Keyboard focus indicator — shared by Tab (:focus-visible) and arrow-nav
   (.kb-focused) so both navigation modes look identical. */
[data-kb-item].kb-focused,
[data-kb-item]:focus-visible {
  outline: 2px dashed currentColor;
  outline-offset: 2px;
  background-color: color-mix(in srgb, currentColor 8%, transparent);
}

/* Filled DaisyUI buttons: outline uses the button's fill color (not its text
   color, which matches the button's interior and would be invisible against
   the page bg). Restore the fill — the parent rule's 8% currentColor tint
   would otherwise wipe out the button's actual background.

   NOTE: --btn-color is a DaisyUI internal custom property (not part of the
   public token API). Verified against DaisyUI 5.5.19. If a DaisyUI upgrade
   renames it, this rule silently degrades to transparent — re-test focus
   styling after any DaisyUI version bump. */
/* tdf-light primary = 900 → active filter at 800 (slightly lighter, still darker than primary) */
[data-theme="tdf-light"] .btn-filter-active {
  background-color: var(--color-royal-purple-800);
  color: var(--color-royal-purple-50);
  border-color: var(--color-royal-purple-800);
}
[data-theme="tdf-light"] .btn-filter-active:hover {
  background-color: var(--color-royal-purple-700);
  border-color: var(--color-royal-purple-700);
}
[data-theme="tdf-light"] .btn-filter-active[data-kb-item].kb-focused,
[data-theme="tdf-light"] .btn-filter-active[data-kb-item]:focus-visible {
  outline-color: var(--color-royal-purple-800);
  background-color: var(--color-royal-purple-800);
}

/* tdf-dark primary = 500 → active filter at 600 (one step darker, clearly visible on dark surfaces) */
[data-theme="tdf-dark"] .btn-filter-active {
  background-color: var(--color-royal-purple-600);
  color: var(--color-royal-purple-50);
  border-color: var(--color-royal-purple-600);
}
[data-theme="tdf-dark"] .btn-filter-active:hover {
  background-color: var(--color-royal-purple-700);
  border-color: var(--color-royal-purple-700);
}
[data-theme="tdf-dark"] .btn-filter-active[data-kb-item].kb-focused,
[data-theme="tdf-dark"] .btn-filter-active[data-kb-item]:focus-visible {
  outline-color: var(--color-royal-purple-600);
  background-color: var(--color-royal-purple-600);
}

.btn-primary[data-kb-item].kb-focused,
.btn-primary[data-kb-item]:focus-visible,
.btn-secondary[data-kb-item].kb-focused,
.btn-secondary[data-kb-item]:focus-visible,
.btn-accent[data-kb-item].kb-focused,
.btn-accent[data-kb-item]:focus-visible,
.btn-neutral[data-kb-item].kb-focused,
.btn-neutral[data-kb-item]:focus-visible,
.btn-info[data-kb-item].kb-focused,
.btn-info[data-kb-item]:focus-visible,
.btn-success[data-kb-item].kb-focused,
.btn-success[data-kb-item]:focus-visible,
.btn-warning[data-kb-item].kb-focused,
.btn-warning[data-kb-item]:focus-visible,
.btn-error[data-kb-item].kb-focused,
.btn-error[data-kb-item]:focus-visible {
  outline-color: var(--btn-color);
  background-color: var(--btn-color);
}