@import 'tailwindcss';

@plugin 'tailwindcss-animate';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

@custom-variant dark (&:is(.dark *));

@theme {
    --font-sans:
        'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    --color-background: var(--background);
    --color-foreground: var(--foreground);

    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);

    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);

    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-primary-soft: var(--primary-soft);

    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);

    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);

    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);

    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);

    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);

    --color-sidebar: var(--sidebar-background);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);

    /* Loan classification — Microfinance Regulations 2019 (GN 679), Reg 45.
       Always paired with an icon and a text label; colour never carries
       the meaning on its own. See docs/DESIGN.md section 3. */
    --color-status-current: var(--status-current);
    --color-status-mentioned: var(--status-mentioned);
    --color-status-substandard: var(--status-substandard);
    --color-status-doubtful: var(--status-doubtful);
    --color-status-loss: var(--status-loss);
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

/* ---------------------------------------------------------------------------
   CYDM palette — blue primary, orange accent, nothing else.

   Authored in OKLCH rather than HSL because OKLCH is perceptually uniform:
   equal lightness values look equally light across hues. That is what lets a
   tenant shift their brand colour without silently destroying contrast, and
   it is why the branding editor can validate a colour by arithmetic instead
   of by eye. Format is `L C H` — lightness 0-1, chroma 0-0.4, hue 0-360.

   Both hues are sampled from the CYDM logo rather than chosen: #1800AC for the
   blue, #FF741F for the orange. Institution overrides replace --primary /
   --accent / --radius at runtime and are constrained server-side to the blue
   family (hue 240-285) and the orange family (hue 30-60). The blue range is
   wider than a naive "blue" because the brand mark is a deep indigo at 268.6,
   which a 220-260 range would have rejected. See docs/DESIGN.md.
   --------------------------------------------------------------------------- */

:root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);

    /* PRIMARY — the deep indigo-blue sampled from the CYDM logo (#1800AC).
       Trust and stability; navigation and primary actions.
       Its low lightness gives ~13:1 against white, well past AA. */
    --primary: oklch(0.344 0.228 268.6);
    --primary-foreground: oklch(0.985 0 0);

    /* A lifted tint of the brand blue, for hovers, quiet fills and chart
       series that must not compete with the primary. */
    --primary-soft: oklch(0.55 0.19 268.6);

    --secondary: oklch(0.97 0.004 268.6);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0.004 268.6);
    --muted-foreground: oklch(0.556 0 0);

    /* ACCENT — the orange sampled from the logo swoosh (#FF741F).
       Warmth and community; used sparingly, ~10% of coloured surface. */
    --accent: oklch(0.715 0.19 46);
    --accent-foreground: oklch(0.145 0 0);

    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.985 0 0);

    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: var(--primary);

    /* Charts stay inside the brand: blues and oranges, ordered so adjacent
       series remain distinguishable in greyscale and to colour-blind viewers. */
    --chart-1: oklch(0.344 0.228 268.6);
    --chart-2: oklch(0.715 0.19 46);
    --chart-3: oklch(0.55 0.19 268.6);
    --chart-4: oklch(0.82 0.14 62);
    --chart-5: oklch(0.7 0.12 268.6);

    /* Loan classification (GN 679, Reg 45). */
    --status-current: oklch(0.6 0.15 150);
    --status-mentioned: oklch(0.75 0.15 85);
    --status-substandard: oklch(0.7 0.18 45);
    --status-doubtful: oklch(0.62 0.2 30);
    --status-loss: oklch(0.577 0.245 27.325);

    --radius: 0.5rem;

    --sidebar-background: oklch(0.985 0.004 268.6);
    --sidebar-foreground: oklch(0.35 0.02 268.6);
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.95 0.016 268.6);
    --sidebar-accent-foreground: oklch(0.3 0.03 268.6);
    --sidebar-border: oklch(0.91 0.008 268.6);
    --sidebar-ring: var(--primary);
}

/* Dark mode is a re-derivation, not an inversion. Lightness is re-chosen per
   token so contrast holds in both directions — the light-mode blue reads muddy
   against a dark ground, so it is lifted rather than simply reused. */
.dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);

    /* The brand indigo at L=0.344 is near-invisible against a dark ground, so
       dark mode lifts it substantially while holding the hue. This is why the
       palette is re-derived per mode rather than inverted. */
    --primary: oklch(0.62 0.21 268.6);
    --primary-foreground: oklch(0.985 0 0);
    --primary-soft: oklch(0.72 0.15 268.6);

    --secondary: oklch(0.269 0.008 268.6);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0.008 268.6);
    --muted-foreground: oklch(0.708 0 0);

    --accent: oklch(0.76 0.18 46);
    --accent-foreground: oklch(0.145 0 0);

    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.985 0 0);

    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: var(--primary);

    --chart-1: oklch(0.62 0.21 268.6);
    --chart-2: oklch(0.76 0.18 46);
    --chart-3: oklch(0.72 0.15 268.6);
    --chart-4: oklch(0.85 0.14 62);
    --chart-5: oklch(0.5 0.14 268.6);

    --status-current: oklch(0.7 0.15 150);
    --status-mentioned: oklch(0.82 0.15 85);
    --status-substandard: oklch(0.75 0.18 45);
    --status-doubtful: oklch(0.7 0.2 30);
    --status-loss: oklch(0.704 0.191 22.216);

    --sidebar-background: oklch(0.19 0.012 268.6);
    --sidebar-foreground: oklch(0.8 0.012 268.6);
    --sidebar-primary: var(--primary);
    --sidebar-primary-foreground: oklch(0.145 0 0);
    --sidebar-accent: oklch(0.26 0.022 268.6);
    --sidebar-accent-foreground: oklch(0.95 0.012 268.6);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: var(--primary);
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }

    /* Tabular figures everywhere money or dates appear. With proportional
       digits "1,111" and "9,999" render at different widths, so columns of
       currency fail to align and a ledger becomes materially harder to scan. */
    .tabular,
    table td,
    table th {
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum';
    }

    /* Field officers work on phones over slow connections; motion is a cost.
       Respect the OS preference rather than assuming everyone wants it. */
    @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;
        }
    }
}