/* Locato theme for the existing @kanowah/ui component contract.
   Load this entry instead of @kanowah/design-system/css. Components keep their
   names, props, slots and semantic variables. CSS is the token source; Figma
   variables are a projection. Primitives are brand values, semantics are roles. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Kumbh+Sans:wght@400;500;600&display=swap');
@import '../css/index.css';

/* Primitives / Color + Constant + Scale. Fixed UI values remain separate
   from the fluid site scale. The historical family keys retain their contract. */
:root {
  --p-color-neutral-5: #0D0D0D;
  --p-color-neutral-10: #111111;
  --p-color-neutral-20: #1E1E1E;
  --p-color-neutral-30: #3F3F46;
  --p-color-neutral-40: #52525B;
  --p-color-neutral-60: #71717A;
  --p-color-neutral-70: #D9D9D9;
  --p-color-neutral-80: #E4E4E7;
  --p-color-neutral-90: #F4F4F5;
  --p-color-neutral-100: #FFFFFF;
  --p-color-frosty-light: #F4F4F580;
  --p-color-brand-20: #2F3607;
  --p-color-brand-40: #46510A;
  --p-color-brand-60: #788717;
  --p-color-brand-70: #A8BC22;
  --p-color-brand-80: #D7EF34;
  --p-color-brand-90: #E6FA58;
  --p-color-brand-95: #F5FCD3;
  /* Lilac: auxiliary accent for the end customer and support moments. */
  --p-color-lilac-20: #241A45;
  --p-color-lilac-40: #3F2E86;
  --p-color-lilac-60: #6A4FF0;
  --p-color-lilac-70: #A58BFF;
  --p-color-lilac-80: #CDB8FF;
  --p-color-lilac-90: #E6DCFF;
  --p-color-lilac-95: #F5F0FF;
  --p-color-success-40: #14532D;
  --p-color-success-60: #166534;
  --p-color-success-70: #15803D;
  --p-color-success-80: #BBF7D0;
  --p-color-success-90: #F0FDF4;
  --p-color-warning-40: #78350F;
  --p-color-warning-60: #92400E;
  --p-color-warning-70: #B45309;
  --p-color-warning-80: #FDE68A;
  --p-color-warning-90: #FFFBEB;
  --p-color-error-40: #7F1D1D;
  --p-color-error-60: #B91C1C;
  --p-color-error-70: #DC2626;
  --p-color-error-80: #FECACA;
  --p-color-error-90: #FEF2F2;
  --p-color-info-40: #1E3A8A;
  --p-color-info-60: #1D4ED8;
  --p-color-info-70: #2563EB;
  --p-color-info-80: #BFDBFE;
  --p-color-info-90: #EFF6FF;

  --p-font-family-mono: 'Instrument Sans', Arial, sans-serif;
  --p-font-family-serif: 'Kumbh Sans', Arial, sans-serif;
  --p-font-weight-light: 400;
  --p-font-weight-book: 500;
  --p-font-weight-medium: 600;
  --p-font-weight-bold: 700;
  --p-font-size-ui-xs: 0.75rem;
  --p-font-size-ui-sm: 0.875rem;
  --p-font-size-ui-md: 1rem;
  --p-font-size-ui-lg: 1.125rem;
  --p-font-size-ui-xl: 1.5rem;
  --p-font-size-text-sm: 0.875rem;
  --p-font-size-text-md: 1rem;
  --p-font-size-text-lg: 1.125rem;
  --p-font-size-display: clamp(2.5rem, 2.07143rem + 2.14286vw, 4rem);
  --p-font-size-h1: clamp(2rem, 1.71429rem + 1.42857vw, 3rem);
  --p-font-size-h2: clamp(1.5rem, 1.35714rem + 0.71429vw, 2rem);
  --p-font-size-h3: clamp(1.25rem, 1.17857rem + 0.35714vw, 1.5rem);
  --p-font-size-h4: 1.25rem;
  --p-font-size-h5: 1.125rem;
  --p-font-size-h6: 1rem;
  --p-line-height-sm: 1.125;
  --p-letter-spacing-tight: -0.025em;
  --p-letter-spacing-loose: 0em;
  --p-radius-xs: 0.25rem;
  --p-radius-sm: 0.75rem;
  --p-radius-md: 1.5rem;
  --p-radius-lg: 2rem;
  --p-radius-pill: 999px;
  --p-space-5: clamp(0.75rem, 0.60714rem + 0.71429vw, 1.25rem);
  --p-space-7: clamp(1.5rem, 1.21429rem + 1.42857vw, 2.5rem);
  --p-space-8: clamp(2rem, 1.71429rem + 1.42857vw, 3rem);
  --p-space-9: clamp(2.5rem, 2.07143rem + 2.14286vw, 4rem);
  --p-space-10: clamp(3rem, 2.42857rem + 2.85714vw, 5rem);
}

/* Semantics / Color (Light). Every component consumes these shared names. */
:root,
[data-theme='dark'] [data-theme='invert'] {
  --color-bg: var(--p-color-neutral-100);
  --color-bg-alt: var(--p-color-neutral-100);
  --color-bg-inverse: var(--p-color-neutral-10);
  --color-bg-canvas: var(--p-color-neutral-90);
  --color-bg-card: var(--p-color-neutral-100);
  --color-bg-elevated: var(--p-color-neutral-100);
  --color-bg-hover: var(--p-color-neutral-90);
  --color-bg-rail: var(--p-color-neutral-10);
  --color-rail-fg: var(--p-color-neutral-100);
  --color-text: var(--p-color-neutral-20);
  --color-text-secondary: var(--p-color-neutral-40);
  --color-text-muted: var(--p-color-neutral-60);
  --color-text-accent: var(--p-color-neutral-10);
  --color-text-inverse: var(--p-color-neutral-100);
  --color-link: var(--color-text-accent);
  --color-border: var(--p-color-neutral-60);
  --color-border-subtle: var(--p-color-neutral-80);
  --color-form-text: var(--color-text);
  --color-btn-bg: var(--p-color-neutral-10);
  --color-btn-text: var(--p-color-neutral-100);
  --color-btn-border: var(--p-color-neutral-10);
  --color-btn-bg-hover: var(--p-color-neutral-30);
  --color-btn-text-hover: var(--p-color-neutral-100);
  --color-btn-border-hover: var(--p-color-neutral-30);
  --color-btn-secondary-bg: var(--p-color-neutral-100);
  --color-btn-secondary-text: var(--color-text);
  --color-btn-secondary-border: var(--color-border);
  --color-btn-secondary-bg-hover: var(--p-color-neutral-90);
  --color-btn-secondary-text-hover: var(--color-text);
  --color-btn-secondary-border-hover: var(--p-color-neutral-60);
  --color-surface-secondary: var(--p-color-neutral-90);
  --color-surface-secondary-hover: var(--p-color-neutral-80);
  --color-selected: var(--p-color-neutral-10);
  --color-selected-dim: var(--p-color-brand-95);
  --color-focus-ring: var(--p-color-neutral-10);
  --color-highlight: var(--p-color-brand-90);
  --color-highlight-text: var(--p-color-neutral-10);
  /* Aux (lilac): end-customer marks and support moments. Never the main
     action, never a status, small area; lime stays the dominant accent. */
  --color-aux: var(--p-color-lilac-80);
  --color-aux-subtle: var(--p-color-lilac-95);
  --color-aux-strong: var(--p-color-lilac-60);
  --color-aux-border: var(--p-color-lilac-80);
  --color-aux-text: var(--p-color-neutral-10);
}

/* Semantics / Color (Dark). Derived from the light reference for admin use. */
[data-theme='dark'],
[data-theme='invert'] {
  --color-bg: var(--p-color-neutral-10);
  --color-bg-alt: var(--p-color-neutral-20);
  --color-bg-inverse: var(--p-color-neutral-100);
  --color-bg-canvas: var(--p-color-neutral-5);
  --color-bg-card: var(--p-color-neutral-20);
  --color-bg-elevated: var(--p-color-neutral-20);
  --color-bg-hover: var(--p-color-neutral-30);
  --color-bg-rail: var(--p-color-neutral-5);
  --color-rail-fg: var(--p-color-neutral-100);
  --color-text: var(--p-color-neutral-100);
  --color-text-secondary: var(--p-color-neutral-80);
  --color-text-muted: var(--p-color-neutral-70);
  --color-text-accent: var(--p-color-brand-90);
  --color-text-inverse: var(--p-color-neutral-10);
  --color-link: var(--color-text-accent);
  --color-border: var(--p-color-neutral-60);
  --color-border-subtle: var(--p-color-neutral-30);
  --color-form-text: var(--color-text);
  --color-btn-bg: var(--p-color-brand-90);
  --color-btn-text: var(--p-color-neutral-10);
  --color-btn-border: var(--p-color-brand-90);
  --color-btn-bg-hover: var(--p-color-brand-80);
  --color-btn-text-hover: var(--p-color-neutral-10);
  --color-btn-border-hover: var(--p-color-brand-80);
  --color-btn-secondary-bg: var(--p-color-neutral-20);
  --color-btn-secondary-text: var(--color-text);
  --color-btn-secondary-border: var(--color-border);
  --color-btn-secondary-bg-hover: var(--p-color-neutral-30);
  --color-btn-secondary-text-hover: var(--color-text);
  --color-btn-secondary-border-hover: var(--p-color-neutral-70);
  --color-surface-secondary: var(--p-color-neutral-30);
  --color-surface-secondary-hover: var(--p-color-neutral-40);
  --color-selected: var(--p-color-brand-90);
  --color-selected-dim: var(--p-color-brand-20);
  --color-focus-ring: var(--p-color-brand-90);
  --color-highlight: var(--p-color-brand-90);
  --color-highlight-text: var(--p-color-neutral-10);
  --color-aux: var(--p-color-lilac-80);
  --color-aux-subtle: var(--p-color-lilac-20);
  --color-aux-strong: var(--p-color-lilac-80);
  --color-aux-border: var(--p-color-lilac-40);
  --color-aux-text: var(--p-color-neutral-10);
}

/* Semantics / Scale. Semantic roles alias primitives as in Kanowah. */
:root {
  --font-heading-weight: var(--p-font-weight-book);
  --font-body-weight: var(--p-font-weight-light);
  --font-accent-weight: var(--p-font-weight-book);
  --font-accent-style: normal;
  --font-button-letter-spacing: var(--p-letter-spacing-none);
  --font-button-transform: none;
  --font-h5-transform: none;
  --font-h6-transform: none;
  --card-pad: var(--space-ui-2xl);
  --card-gap: var(--space-ui-xl);
  --radius-control: var(--radius-input);
}

/* Brand skin for existing shared selectors; component templates do not change.
   Load this entry after the bundled component CSS. Shape and hover behavior
   require these rules because KnButton and KnTabs currently share input-radius
   and an underline treatment respectively. All values remain token based. */
.kn-button {
  border-radius: var(--radius-pill);
}
.kn-button--primary:hover {
  background: var(--color-btn-bg-hover);
  color: var(--color-btn-text-hover);
  border-color: var(--color-btn-border-hover);
}
.kn-icon-btn,
.kn-icon-button {
  border-radius: var(--radius-pill);
}
.kn-tabs {
  gap: var(--space-ui-md);
}
.kn-tabs__tab {
  box-sizing: border-box;
  min-height: var(--size-control-md);
  padding: var(--space-ui-md) var(--control-pad-md);
  border-bottom: none;
  border-radius: var(--radius-pill);
  font-size: var(--control-font-md);
  letter-spacing: var(--p-letter-spacing-none);
  text-transform: var(--font-button-transform);
}
.kn-tabs__tab.is-active {
  background: var(--color-highlight);
  color: var(--color-highlight-text);
}
.kn-tabs__tab:focus-visible {
  outline: calc(var(--p-border-width) * 2) solid var(--color-focus-ring);
  outline-offset: var(--space-ui-2xs);
}