/*
 * BUNEXA design tokens. Single source of truth for colour, type, space, radius, shadow and motion.
 * Derived from the live Devlan Solutions Ltd identity (devlan.co.ke/assets/css/devlan.css); see
 * docs/brand/DEVLAN_TOKENS.md for the sampled values, sources and contrast evidence.
 *
 * Rules: style components with these variables only (never hard-coded colours). Tenants may override
 * --brand* through /theme.css, never the functional colours (--danger, --success, --warning, --info).
 *
 * Copyright (c) 2026 Devlan Solutions Ltd. All rights reserved.
 * PROPRIETARY AND CONFIDENTIAL. BUNEXA is a product of Devlan Solutions Ltd.
 */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2'); }

:root {
  /* Type */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
  --font: var(--font-body);                 /* legacy alias used by existing screens */
  --text-xs: .75rem;  --text-sm: .8125rem; --text-base: .875rem; --text-md: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem;
  --leading-tight: 1.25; --leading-normal: 1.5;

  /* Parent green scale, sampled from devlan.css (logo anchor #318e05) */
  --devlan-green: #318e05;                  /* logo / endorsement artwork only: 4.20:1 on white, fails AA as a text-button fill */
  --green-700: #256b12; --green-600: #2f8317; --green-500: #3f9e22; --green-400: #57c23a; --green-300: #7ada5b;
  --ink: #070a08;                           /* Devlan --bg, the dark foundation */

  /* Spacing, radius, motion */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);

  /* Light theme (default): neutral off-white foundation, white surfaces */
  --bg: #f6f7f4;           --bg-elev: #ffffff;       --surface: #ffffff;       --surface-2: #f0f3ee;
  --text: #0e1410;         --text-soft: #34423a;     --muted: #5b6b60;         /* muted 5.65:1 on white */
  --border: #e1e7df;       --border-strong: #c9d3c7;
  --brand: #2f8317;        --brand-hover: #256b12;   --brand-contrast: #ffffff; /* 4.79:1 white on fill */
  --brand-text: #256b12;                    /* links and brand-coloured text: 6.58:1 on white */
  --brand-soft: color-mix(in srgb, var(--brand) 12%, transparent);
  --accent: #7ada5b;                        /* sparing: selected states, data emphasis */
  --success: #188038; --warning: #b45309; --danger: #c5221f; --info: #1d4ed8;   /* all >= 5:1 on white */
  --success-soft: #e6f4ea; --warning-soft: #fef3e2; --danger-soft: #fce8e6; --info-soft: #e8f0fe;
  --shadow-sm: 0 1px 2px rgba(14, 20, 16, .06);
  --shadow: 0 4px 16px -4px rgba(14, 20, 16, .12), 0 1px 3px rgba(14, 20, 16, .06);
  --shadow-lg: 0 24px 60px -20px rgba(14, 20, 16, .35);
  --scrim: rgba(7, 10, 8, .5);
  --chart-1: #2f8317; --chart-2: #1d4ed8; --chart-3: #b45309; --chart-4: #7c3aed; --chart-5: #0e7490; --chart-6: #be185d;
  color-scheme: light;
}

/* Dark theme: Devlan's green-tinted charcoal, verbatim from devlan.css */
:root[data-theme="dark"] {
  --bg: #070a08;           --bg-elev: #0b0f0c;       --surface: #0e1410;       --surface-2: #131b15;
  --text: #e9f1eb;         --text-soft: #b7c6bb;     --muted: #8a9c8f;         /* 6.42:1 on surface */
  --border: rgba(150, 200, 160, .12); --border-strong: rgba(150, 200, 160, .22);
  --brand: #57c23a;        --brand-hover: #7ada5b;   --brand-contrast: #04120a;
  --brand-text: #7ada5b;
  --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --info: #60a5fa;
  --success-soft: rgba(74, 222, 128, .12); --warning-soft: rgba(251, 191, 36, .12);
  --danger-soft: rgba(248, 113, 113, .12); --info-soft: rgba(96, 165, 250, .12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow: 0 8px 24px -8px rgba(0, 0, 0, .7);
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .85);
  --scrim: rgba(0, 0, 0, .65);
  --chart-1: #57c23a; --chart-2: #60a5fa; --chart-3: #fbbf24; --chart-4: #a78bfa; --chart-5: #22d3ee; --chart-6: #f472b6;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070a08; --bg-elev: #0b0f0c; --surface: #0e1410; --surface-2: #131b15;
    --text: #e9f1eb; --text-soft: #b7c6bb; --muted: #8a9c8f;
    --border: rgba(150, 200, 160, .12); --border-strong: rgba(150, 200, 160, .22);
    --brand: #57c23a; --brand-hover: #7ada5b; --brand-contrast: #04120a; --brand-text: #7ada5b;
    --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --info: #60a5fa;
    --success-soft: rgba(74, 222, 128, .12); --warning-soft: rgba(251, 191, 36, .12);
    --danger-soft: rgba(248, 113, 113, .12); --info-soft: rgba(96, 165, 250, .12);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5); --shadow: 0 8px 24px -8px rgba(0, 0, 0, .7);
    --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, .85); --scrim: rgba(0, 0, 0, .65);
    --chart-1: #57c23a; --chart-2: #60a5fa; --chart-3: #fbbf24; --chart-4: #a78bfa; --chart-5: #22d3ee; --chart-6: #f472b6;
    color-scheme: dark;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}