/* Miova CMS design primitives. Loaded after CouchCMS main.css. */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-variable.woff2') format('woff2-variations');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-sans: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-2xs: 0.375rem;
  --radius-xs: 0.5rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-round: 999px;

  /* AlignUI Marketing & Sales neutral and status palette. */
  /* Near-white canvas so white cards, fields and the header separate from the page. */
  --color-canvas: #f6f6f7;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-subtle: #f7f7f7;
  --color-surface-hover: #f2f2f2;
  --color-text: #333333;
  --color-text-strong: #171717;
  --color-text-muted: #5c5c5c;
  --color-text-faint: #747474;
  --color-text-disabled: #a3a3a3;
  --color-border: #ebebeb;
  --color-border-control: #d1d1d1;
  --color-border-strong: #b8b8b8;

  /* Bright orange is decorative; action orange passes AA with white text. */
  --color-accent: #fa7319;
  --color-accent-hover: #e9630d;
  --color-accent-pressed: #d95700;
  --color-on-accent: #171717;
  --color-primary: #c84a00;
  --color-primary-hover: #b63d00;
  --color-primary-pressed: #a83b00;
  --color-primary-subtle: #fff1e8;
  --color-on-primary: #ffffff;

  --color-danger: #d92d20;
  --color-danger-subtle: #fff1f3;
  --color-danger-border: #ffc0c5;
  --color-success: #137a42;
  --color-success-subtle: #e8f8ef;
  --color-success-border: #a6e9c4;
  --color-warning: #8a5600;
  --color-warning-subtle: #fff8df;
  --color-warning-border: #ffe17d;
  --color-info: #2947c7;
  --color-info-subtle: #eff3ff;
  --color-info-border: #a6b7ff;

  /* Graphite navigation; sidebar text levels keep AA contrast on --color-sidebar. */
  --color-sidebar: #1c1c1e;
  --color-sidebar-raised: #262628;
  --color-sidebar-hover: #29292c;
  --color-sidebar-active: #333336;
  --color-sidebar-text: #b4b4b8;
  --color-sidebar-text-faint: #8e8e93;
  --color-sidebar-text-strong: #ffffff;
  --color-sidebar-border: #2e2e31;

  /* Elements using these already draw a 1px border; an inset ring here doubled it. */
  --shadow-field: 0 1px 2px rgb(10 13 20 / 0.04);
  --shadow-surface: 0 1px 2px rgb(10 13 20 / 0.04);
  --shadow-overlay: 0 16px 32px rgb(10 13 20 / 0.12), 0 2px 8px rgb(10 13 20 / 0.08);
  --focus-ring: 0 0 0 3px rgb(250 115 25 / 0.16);

  --control-height: 2.5rem;
  --table-row-height: 3rem;
  --sidebar-width: 17rem;
  --sidebar-rail-width: 4.5rem;
  --header-height: 5.5rem;
  --content-max-width: 85rem;

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 280ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --z-header: 20;
  --z-sidebar: 40;
  --z-backdrop: 35;
  --z-overlay: 60;

  /* Backwards-compatible aliases used by CouchCMS add-ons. */
  --white: var(--color-surface-raised);
  --black: var(--color-text-strong);
  --background: var(--color-canvas);
  --foreground: var(--color-text);
  --surface: var(--color-surface);
  --surface-secondary: var(--color-surface-subtle);
  --accent: var(--color-accent);
  --accent-hover: var(--color-accent-hover);
  --accent-pressed: var(--color-accent-pressed);
  --accent-foreground: var(--color-on-accent);
  --border: var(--color-border);
  --border-hover: var(--color-border-strong);
  --muted: var(--color-text-muted);
  --default-bg: var(--color-surface-subtle);
  --default-hover: var(--color-surface-hover);
  --danger: var(--color-danger);
  --danger-bg: var(--color-danger-subtle);
  --danger-border: var(--color-danger-border);
  --success: var(--color-success);
  --success-bg: var(--color-success-subtle);
  --success-border: var(--color-success-border);
  --warning: var(--color-warning);
  --warning-bg: var(--color-warning-subtle);
  --warning-border: var(--color-warning-border);
  --info: var(--color-info);
  --info-bg: var(--color-info-subtle);
  --info-border: var(--color-info-border);
  --surface-shadow: var(--shadow-surface);
  --overlay-shadow: var(--shadow-overlay);
  --field-shadow: var(--shadow-field);
  --focus: var(--color-accent);
  --ring-offset-width: 2px;
  --radius: var(--radius-xs);
  --field-radius: var(--radius-sm);
  --btn-radius: var(--radius-sm);
}

html {
  color-scheme: light;
}

body {
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.4286;
  letter-spacing: -0.006em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgb(250 115 25 / 0.18);
  color: var(--color-text-strong);
  text-shadow: none;
}

a {
  color: var(--color-primary);
  font-weight: 500;
  text-underline-offset: 0.16em;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover,
a:focus {
  color: var(--color-primary-hover);
}

button,
input,
select,
textarea {
  font: inherit;
}

*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: calc(var(--z-overlay) + 10);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--color-text-strong);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-overlay);
  transform: translateY(calc(-100% - var(--space-8)));
  transition: transform var(--duration-base) var(--ease-out);
}

.skip-link:focus {
  color: var(--color-on-primary);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}