/* ==========================================================================
   iya.ru — design tokens
   --------------------------------------------------------------------------
   Single source of truth for colour, type, space, radius, elevation and
   motion. Both themes are defined here; `components.css` and `utilities.css`
   only ever reference these variables, which is what makes the dark theme and
   per-tenant accent colours work without duplicating rules.

   Colour model: OKLCH for perceptually uniform lightness (so `--accent-600`
   reads the same "weight" in both themes), with sRGB fallbacks declared first
   for engines without OKLCH support.

   No CDN, no build step: this file is served as-is.
   ========================================================================== */

:root {
  /* --- type --------------------------------------------------------------- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji';
  --font-mono: 'Iya Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
    Consolas, 'Liberation Mono', monospace;

  /* Modular scale, 1.25 ratio, clamped so it works from 320px to 2560px. */
  --text-2xs: 0.6875rem;   /* 11px */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.8125rem;    /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md: 1rem;         /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.375rem;     /* 22px */
  --text-2xl: 1.75rem;     /* 28px */
  --text-3xl: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  --text-4xl: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  --text-5xl: clamp(2.75rem, 1.5rem + 4.5vw, 5rem);

  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tighter: -0.035em;
  --tracking-tight: -0.022em;
  --tracking-normal: -0.006em;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.08em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- space (4px grid) --------------------------------------------------- */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-3-5: 0.875rem;  /* 14px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-7: 1.75rem;     /* 28px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-14: 3.5rem;
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-32: 8rem;

  /* --- radius ------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-3xl: 28px;
  --radius-full: 9999px;

  /* --- elevation ---------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgb(9 12 20 / 0.05);
  --shadow-sm: 0 1px 2px rgb(9 12 20 / 0.06), 0 1px 3px rgb(9 12 20 / 0.05);
  --shadow-md: 0 4px 8px -2px rgb(9 12 20 / 0.07), 0 2px 4px -2px rgb(9 12 20 / 0.05);
  --shadow-lg: 0 12px 24px -6px rgb(9 12 20 / 0.10), 0 4px 8px -4px rgb(9 12 20 / 0.06);
  --shadow-xl: 0 24px 48px -12px rgb(9 12 20 / 0.16);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.06);
  --ring-width: 3px;

  /* --- motion ------------------------------------------------------------- */
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 380ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- layout ------------------------------------------------------------- */
  --container-xs: 24rem;
  --container-sm: 32rem;
  --container-md: 44rem;
  --container-lg: 56rem;
  --container-xl: 72rem;
  --container-2xl: 84rem;
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --sidebar-width: 15.5rem;
  --sidebar-width-collapsed: 4.25rem;
  --header-height: 3.75rem;
  --content-max: 78rem;

  /* --- z-index scale ------------------------------------------------------ */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 400;
  --z-overlay: 800;
  --z-modal: 900;
  --z-popover: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;

  /* --- accent (brand) — sRGB fallbacks first ------------------------------ */
  --accent-50: #eef2ff;
  --accent-100: #e0e7ff;
  --accent-200: #c7d2fe;
  --accent-300: #a5b4fc;
  --accent-400: #818cf8;
  --accent-500: #6366f1;
  --accent-600: #4f46e5;
  --accent-700: #4338ca;
  --accent-800: #3730a3;
  --accent-900: #312e81;
  --accent-contrast: #ffffff;

  /* Semantic status colours */
  --ok-500: #16a34a;
  --ok-600: #15803d;
  --ok-soft: #dcfce7;
  --warn-500: #d97706;
  --warn-600: #b45309;
  --warn-soft: #fef3c7;
  --danger-500: #dc2626;
  --danger-600: #b91c1c;
  --danger-soft: #fee2e2;
  --info-500: #0284c7;
  --info-600: #0369a1;
  --info-soft: #e0f2fe;
  --neutral-soft: #f1f3f7;
}

/* --------------------------------------------------------------------------
   Light theme (default)
   -------------------------------------------------------------------------- */
:root,
:root[data-theme='light'] {
  color-scheme: light;

  --bg: #ffffff;
  --bg-subtle: #f7f8fa;
  --bg-muted: #f1f3f7;
  --bg-raised: #ffffff;
  --bg-sunken: #eceef3;
  --bg-inverse: #0c0f16;

  --surface: #ffffff;
  --surface-2: #fbfbfd;
  --surface-3: #f4f6f9;
  --surface-hover: #f4f6fa;

  --border: #e5e7ec;
  --border-strong: #d5d9e2;
  --border-subtle: #eef0f4;

  --text: #0e1219;
  --text-secondary: #474f5e;
  --text-muted: #6d7686;
  --text-faint: #98a0ae;
  --text-inverse: #f6f7f9;
  --text-link: var(--accent-700);
  --text-link-hover: var(--accent-800);

  --accent: var(--accent-600);
  --accent-hover: var(--accent-700);
  --accent-active: var(--accent-800);
  --accent-soft: #eef1ff;
  --accent-soft-hover: #e2e7ff;
  --accent-text: var(--accent-800);
  --accent-border: #cdd5fb;

  --ok: var(--ok-600);
  --ok-bg: var(--ok-soft);
  --warn: var(--warn-600);
  --warn-bg: var(--warn-soft);
  --danger: var(--danger-600);
  --danger-bg: var(--danger-soft);
  --info: var(--info-600);
  --info-bg: var(--info-soft);

  --code-bg: #f4f6f9;
  --code-text: #24292f;
  --mark-bg: #fff3bf;

  --overlay: rgb(12 15 22 / 0.42);
  --skeleton: linear-gradient(90deg, #eef0f4 25%, #f7f8fa 37%, #eef0f4 63%);

  --grid-line: rgb(14 18 25 / 0.045);
  --chart-1: var(--accent-600);
  --chart-2: #0ea5e9;
  --chart-3: #14b8a6;
  --chart-4: #f59e0b;
  --chart-5: #ef4444;
  --chart-6: #8b5cf6;
  --chart-7: #ec4899;
  --chart-8: #84cc16;
  --chart-grid: rgb(14 18 25 / 0.08);
  --chart-axis: #98a0ae;
}

/* --------------------------------------------------------------------------
   Dark theme
   -------------------------------------------------------------------------- */
:root[data-theme='dark'] {
  color-scheme: dark;

  --bg: #0a0c11;
  --bg-subtle: #0e1117;
  --bg-muted: #14181f;
  --bg-raised: #12161d;
  --bg-sunken: #070910;
  --bg-inverse: #f4f6f9;

  --surface: #10141b;
  --surface-2: #141922;
  --surface-3: #1a2029;
  --surface-hover: #1a2029;

  --border: #212936;
  --border-strong: #2c3644;
  --border-subtle: #1a2029;

  --text: #e8ebf0;
  --text-secondary: #b3bcc9;
  --text-muted: #8b95a4;
  --text-faint: #626c7b;
  --text-inverse: #0b0e14;
  --text-link: #a5b4fc;
  --text-link-hover: #c7d2fe;

  --accent: #7c83f5;
  --accent-hover: #9098f8;
  --accent-active: #a5acfa;
  --accent-soft: #191d33;
  --accent-soft-hover: #212647;
  --accent-text: #c3c9fd;
  --accent-border: #2f3660;
  --accent-contrast: #0b0e14;

  --ok: #4ade80;
  --ok-bg: #0f2a1c;
  --warn: #fbbf24;
  --warn-bg: #2b2110;
  --danger: #f87171;
  --danger-bg: #2d1517;
  --info: #38bdf8;
  --info-bg: #0d2231;

  --code-bg: #141922;
  --code-text: #dbe2ec;
  --mark-bg: #4a3f10;

  --overlay: rgb(3 5 9 / 0.66);
  --skeleton: linear-gradient(90deg, #161b24 25%, #1d232d 37%, #161b24 63%);

  --grid-line: rgb(255 255 255 / 0.045);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.45), 0 1px 3px rgb(0 0 0 / 0.35);
  --shadow-md: 0 4px 10px -2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 14px 28px -8px rgb(0 0 0 / 0.6);
  --shadow-xl: 0 28px 56px -16px rgb(0 0 0 / 0.7);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.05);

  --chart-1: #8b93f7;
  --chart-2: #38bdf8;
  --chart-3: #2dd4bf;
  --chart-4: #fbbf24;
  --chart-5: #fb7185;
  --chart-6: #a78bfa;
  --chart-7: #f472b6;
  --chart-8: #a3e635;
  --chart-grid: rgb(255 255 255 / 0.08);
  --chart-axis: #626c7b;
}

/* --------------------------------------------------------------------------
   Tenant branding: a subdomain owner can override the accent from a single
   inline custom property on <html>, e.g. style="--brand:#e11d48".
   Everything derived from --accent follows automatically.
   -------------------------------------------------------------------------- */
:root[data-brand='custom'] {
  --accent: var(--brand, var(--accent-600));
  --accent-hover: color-mix(in oklab, var(--brand, var(--accent-600)) 84%, #000);
  --accent-active: color-mix(in oklab, var(--brand, var(--accent-600)) 70%, #000);
  --accent-soft: color-mix(in oklab, var(--brand, var(--accent-600)) 12%, var(--bg));
  --accent-soft-hover: color-mix(in oklab, var(--brand, var(--accent-600)) 18%, var(--bg));
  --accent-text: color-mix(in oklab, var(--brand, var(--accent-600)) 72%, var(--text));
  --accent-border: color-mix(in oklab, var(--brand, var(--accent-600)) 32%, var(--border));
  --chart-1: var(--brand, var(--accent-600));
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High-contrast preference: strengthen borders and text. */
@media (prefers-contrast: more) {
  :root {
    --border: #9aa2b1;
    --border-strong: #6d7686;
    --text-secondary: #23282f;
    --text-muted: #3d444f;
  }

  :root[data-theme='dark'] {
    --border: #7b8698;
    --border-strong: #a7b0bf;
    --text-secondary: #dde3ea;
    --text-muted: #c3cbd6;
  }
}