/*
 * Enlinka theme — enterprise reskin for the Ory Kratos self-service UI.
 * Loaded LAST (after style.css / theme.css / main.css) so these :root
 * overrides win the cascade and re-tint every @ory/elements-markup component.
 * Light theme only. Palette: Violet / Graphite.
 */

:root {
  /* Accent (violet) */
  --ory-theme-accent-def: #7c3aed;
  --ory-theme-accent-muted: #8b5cf6;
  --ory-theme-accent-emphasis: #6d28d9;
  --ory-theme-accent-disabled: #e4e4e7;
  --ory-theme-accent-subtle: #f5f3ff;

  /* Foreground (graphite) */
  --ory-theme-foreground-def: #18181b;
  --ory-theme-foreground-muted: #52525b;
  --ory-theme-foreground-subtle: #a1a1aa;
  --ory-theme-foreground-disabled: #d4d4d8;
  --ory-theme-foreground-on-dark: #ffffff;
  --ory-theme-foreground-on-accent: #ffffff;
  --ory-theme-foreground-on-disabled: #a1a1aa;

  /* Surfaces */
  --ory-theme-background-surface: #ffffff;
  --ory-theme-background-canvas: #fafafa;
  --ory-theme-background-subtle: #f4f4f5;

  /* Feedback */
  --ory-theme-error-def: #b91c1c;
  --ory-theme-error-subtle: #fef2f2;
  --ory-theme-error-muted: #ef4444;
  --ory-theme-error-emphasis: #dc2626;
  --ory-theme-success-emphasis: #059669;

  /* Lines */
  --ory-theme-border-def: #e4e4e7;

  /* Buttons / inputs */
  --ory-theme-text-def: #ffffff;
  --ory-theme-text-disabled: #a1a1aa;
  --ory-theme-input-background: #ffffff;
  --ory-theme-input-disabled: #f4f4f5;
  --ory-theme-input-placeholder: #a1a1aa;
  --ory-theme-input-text: #18181b;

  /* Enlinka design tokens */
  --enlinka-brand-from: #7c3aed;
  --enlinka-brand-to: #4c1d95;
  --enlinka-radius: 14px;
  --enlinka-radius-sm: 10px;
  --enlinka-ring: 0 0 0 3px rgba(124, 58, 237, 0.18);
  --enlinka-shadow-card:
    0 1px 2px rgba(24, 24, 27, 0.04), 0 12px 32px -12px rgba(24, 24, 27, 0.18);
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- Cards */
/* Target ONLY the outer card container (it carries a `card_size_*` class);
 * the inner title/image sub-divs share the `card__` prefix, so matching on
 * `card__` alone would wrongly box them. */
div[class*="ory_elements__card_size_"] {
  border-radius: var(--enlinka-radius);
  box-shadow: var(--enlinka-shadow-card);
  padding: 2.75rem;
}
/* card logo (cardImage) */
img[class*="ory_elements__card__"] {
  max-height: 2.75rem;
  margin-bottom: 0.5rem;
}
/* the "wide" / nested card variants reset border to 0 — keep them flat */
div[class*="ory_elements__card_gradient__"] {
  border-radius: var(--enlinka-radius-sm);
}

/* ------------------------------------------------------------- Inputs */
/* Scope to real <input> elements only. The required-asterisk span and the
 * password show/hide toggle share the `input_field__` class prefix, so an
 * unscoped selector would apply input padding to them (that was the cause
 * of the huge gap between a label and its "*"). */
input[class*="ory_elements__input_field__"] {
  border-radius: var(--enlinka-radius-sm) !important;
  padding: 0.8125rem 1rem !important;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
input[class*="ory_elements__input_field__"]:hover {
  border-color: var(--ory-theme-foreground-subtle);
}
input[class*="ory_elements__input_field__"]:focus,
input[class*="ory_elements__input_field__"]:focus-visible {
  outline: none;
  border-color: var(--ory-theme-accent-def) !important;
  box-shadow: var(--enlinka-ring);
}

/* ------------------------------------------------------------- Buttons */
[class*="ory_elements__button__"] {
  border-radius: var(--enlinka-radius-sm) !important;
  font-weight: 600;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}
[class*="ory_elements__button__"]:not(:disabled):hover {
  box-shadow: 0 6px 16px -6px rgba(124, 58, 237, 0.55);
}
[class*="ory_elements__button__"]:not(:disabled):active {
  transform: translateY(1px);
}

/* Social / OIDC buttons */
[class*="ory_elements__button_social__"] {
  border-radius: var(--enlinka-radius-sm) !important;
  border: 1px solid var(--ory-theme-border-def);
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
[class*="ory_elements__button_social__"]:hover {
  border-color: var(--ory-theme-foreground-subtle);
  background-color: var(--ory-theme-background-canvas);
}

/* Links */
[class*="ory_elements__button_link__"] {
  transition: color 0.15s ease;
}

/* --------------------------------------------------------- Code box */
[class*="ory_elements__codebox__"] {
  border-radius: var(--enlinka-radius-sm);
  background-color: var(--ory-theme-background-canvas);
}

/* ------------------------------------------------------------ Messages */
[class*="ory_elements__message__"] {
  border-radius: var(--enlinka-radius-sm);
}

/* -------------------------------------------------------- Nav (sidebar) */
[class*="ory_elements__nav__"] {
  background-color: var(--ory-theme-background-surface);
}
/* selected / hovered menu links */
[class*="ory_elements__menu_link__"] {
  border-radius: var(--enlinka-radius-sm);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
[class*="ory_elements__menu_link__"]:hover {
  background-color: var(--ory-theme-accent-subtle);
}