/**
 * Akilli System — Design tokens (light-first minimal)
 * Shared by order-system panel + Apps admin. Do not use in storefront widgets.
 */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: light;

  /* Canvas */
  --ak-canvas: #f7f7f5;
  --ak-surface: #ffffff;
  --ak-surface-2: #f0efec;
  --ak-surface-3: #e8e7e3;

  /* Ink */
  --ak-ink: #141413;
  --ak-ink-2: #3f3f3a;
  --ak-ink-3: #6b6b64;
  --ak-ink-4: #9a9a92;

  /* Lines */
  --ak-line: #e6e5e0;
  --ak-line-strong: #d4d3cd;
  --ak-line-focus: #141413;

  /* Accent — near-black primary, muted olive focus (not purple SaaS cliché) */
  --ak-accent: #1a1a18;
  --ak-accent-hover: #000000;
  --ak-accent-subtle: rgba(20, 20, 19, 0.06);
  --ak-accent-muted: rgba(20, 20, 19, 0.1);
  --ak-link: #2f4f3e;
  --ak-link-hover: #1e3429;

  /* Semantic */
  --ak-success: #1f7a4c;
  --ak-success-bg: #eef8f2;
  --ak-warning: #a16207;
  --ak-warning-bg: #fff8eb;
  --ak-danger: #c23b3b;
  --ak-danger-bg: #fef2f2;
  --ak-info: #2f4f3e;
  --ak-info-bg: #eef4f0;

  /* Type */
  --ak-font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ak-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ak-fs-xs: 0.6875rem;
  --ak-fs-sm: 0.8125rem;
  --ak-fs-md: 0.9375rem;
  --ak-fs-lg: 1.0625rem;
  --ak-fs-xl: 1.25rem;
  --ak-fs-2xl: 1.5rem;
  --ak-fs-3xl: clamp(1.75rem, 2.4vw, 2.125rem);
  --ak-lh-tight: 1.25;
  --ak-lh-snug: 1.4;
  --ak-lh-normal: 1.55;
  --ak-fw-regular: 400;
  --ak-fw-medium: 500;
  --ak-fw-semibold: 600;
  --ak-fw-bold: 700;

  /* Space (4px base) */
  --ak-s-1: 0.25rem;
  --ak-s-2: 0.5rem;
  --ak-s-3: 0.75rem;
  --ak-s-4: 1rem;
  --ak-s-5: 1.25rem;
  --ak-s-6: 1.5rem;
  --ak-s-8: 2rem;
  --ak-s-10: 2.5rem;
  --ak-s-12: 3rem;
  --ak-s-16: 4rem;

  /* Radius — soft, not bubbly */
  --ak-r-sm: 6px;
  --ak-r-md: 10px;
  --ak-r-lg: 14px;
  --ak-r-xl: 18px;
  --ak-r-full: 999px;

  /* Elevation — hairline only */
  --ak-shadow-xs: 0 1px 0 rgba(20, 20, 19, 0.04);
  --ak-shadow-sm: 0 1px 2px rgba(20, 20, 19, 0.04), 0 4px 12px rgba(20, 20, 19, 0.03);
  --ak-shadow-md: 0 8px 24px rgba(20, 20, 19, 0.06);
  --ak-shadow-overlay: 0 16px 48px rgba(20, 20, 19, 0.12);

  /* Motion */
  --ak-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ak-t-fast: 120ms var(--ak-ease);
  --ak-t-base: 220ms var(--ak-ease);
  --ak-t-slow: 360ms var(--ak-ease);

  /* Layout */
  --ak-shell-h: 56px;
  --ak-content-max: 1120px;
  --ak-content-wide: 1280px;
  --ak-pad-x: clamp(1rem, 2.5vw, 1.75rem);
  --ak-pad-y: clamp(1rem, 2vw, 1.5rem);
  --ak-focus-ring: 0 0 0 2px var(--ak-canvas), 0 0 0 4px var(--ak-ink);

  /* Legacy bridges — map old admin/panel vars onto system */
  --bg: var(--ak-canvas);
  --panel: var(--ak-surface);
  --card: var(--ak-surface);
  --surface: var(--ak-surface-2);
  --surface-elevated: var(--ak-surface);
  --text: var(--ak-ink);
  --text-secondary: var(--ak-ink-2);
  --muted: var(--ak-ink-3);
  --line: var(--ak-line);
  --line-strong: var(--ak-line-strong);
  --accent: var(--ak-accent);
  --accent-hover: var(--ak-accent-hover);
  --accent-subtle: var(--ak-accent-subtle);
  --accent-muted: var(--ak-accent-muted);
  --primary: var(--ak-accent);
  --success: var(--ak-success);
  --success-subtle: var(--ak-success-bg);
  --warning: var(--ak-warning);
  --warning-subtle: var(--ak-warning-bg);
  --danger: var(--ak-danger);
  --danger-subtle: var(--ak-danger-bg);
  --radius: var(--ak-r-lg);
  --radius-md: var(--ak-r-md);
  --radius-sm: var(--ak-r-sm);
  --radius-xs: var(--ak-r-sm);
  --shadow-xs: var(--ak-shadow-xs);
  --shadow-sm: var(--ak-shadow-sm);
  --shadow-md: var(--ak-shadow-md);
  --shadow-lg: var(--ak-shadow-md);
  --shadow: var(--ak-shadow-sm);
  --font-sans: var(--ak-font);
  --transition: var(--ak-t-base);
  --motion-fast: var(--ak-t-fast);
  --motion-base: var(--ak-t-base);
  --motion-slow: var(--ak-t-slow);
  --focus-ring: var(--ak-focus-ring);
  --space-1: var(--ak-s-2);
  --space-2: var(--ak-s-4);
  --space-3: var(--ak-s-6);
  --space-4: var(--ak-s-8);
  --space-5: var(--ak-s-10);
  --space-6: var(--ak-s-12);
  --btn-height: 2.375rem;
  --btn-radius: var(--ak-r-md);
  --input-bg: var(--ak-surface);
  --input-border: var(--ak-line-strong);
  --input-radius: var(--ak-r-md);
}

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