@import "tailwindcss";

/*
 * YeffoHub design tokens.
 *
 * PLACEHOLDER PALETTE — every color value below is a temporary stand-in,
 * not final YeffoDesign branding. Replace this whole @theme block (and the
 * logo/favicon under /public) once real brand values are supplied; nothing
 * in the component layer should ever reference a raw hex value directly —
 * always go through one of these tokens. See docs/architecture.md
 * ("Theming") for the replacement checklist.
 */
@theme {
  /* --- Color: neutral surface scale --- */
  --color-surface-0: #0b0e14; /* PLACEHOLDER app background (dark) */
  --color-surface-1: #12161f; /* PLACEHOLDER raised surface */
  --color-surface-2: #1a2030; /* PLACEHOLDER card/panel */
  --color-surface-border: #2a3142; /* PLACEHOLDER hairline border */

  --color-surface-0-light: #f7f8fa; /* PLACEHOLDER app background (light) */
  --color-surface-1-light: #ffffff; /* PLACEHOLDER raised surface */
  --color-surface-2-light: #eef0f4; /* PLACEHOLDER card/panel */
  --color-surface-border-light: #dde1e8; /* PLACEHOLDER hairline border */

  /* --- Color: text --- */
  --color-text-primary: #e8ebf1; /* PLACEHOLDER */
  --color-text-secondary: #9aa4b8; /* PLACEHOLDER */
  --color-text-primary-light: #171a21; /* PLACEHOLDER */
  --color-text-secondary-light: #565f72; /* PLACEHOLDER */

  /* --- Color: brand / accent (technical, restrained — not neon) --- */
  --color-brand-primary: #4f7cff; /* PLACEHOLDER — replace with YeffoDesign brand value */
  --color-brand-primary-hover: #6b91ff; /* PLACEHOLDER */
  --color-brand-accent: #21d4b4; /* PLACEHOLDER secondary accent */

  /* --- Color: semantic status --- */
  --color-status-success: #2fb673; /* PLACEHOLDER */
  --color-status-warning: #d9a441; /* PLACEHOLDER */
  --color-status-danger: #e2555a; /* PLACEHOLDER */
  --color-status-info: #4f7cff; /* PLACEHOLDER */

  /* --- Typography --- */
  --font-display:
    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; /* PLACEHOLDER — swap for final brand typeface */
  --font-body:
    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; /* PLACEHOLDER */
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Radius --- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;

  /* --- Shadow (restrained, no heavy glass/blur) --- */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.08);
  --shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.18);

  /* --- Motion --- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

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

html {
  color-scheme: dark light;
}

body {
  background-color: var(--color-surface-0);
  color: var(--color-text-primary);
  font-family: var(--font-body);
}

:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}