/* Dag247 login theme — INC-0053.
 *
 * Token values carried verbatim from docs/design/dag247-design-system/tokens/.
 * This is a standalone Keycloak surface: it cannot @import from the app's
 * globals.css, so the values are declared here as static custom properties
 * (ADR-0051, "the sign-in theme carries a copy of the token VALUES").
 *
 * No CDN or external @import anywhere in this file; fonts fall back to the
 * system-grotesk stack declared in --font-sans (ADR-0051, ADR-0006).
 *
 * Structure mirrors apps/admin/app/globals.css (INC-0046):
 *   1. Raw palette tokens (verbatim from tokens/colors.css)
 *   2. Semantic tokens (composed from raw palette, same names as globals.css)
 *   3. Typography, spacing, radius, shadow (verbatim from tokens/)
 *   4. Dark mode: @media block overriding semantic tokens only
 *   5. Component styles referencing semantic tokens
 */

:root {
  color-scheme: light dark;

  /* -------------------------------------------------------------------------
   * Raw palette tokens
   * Source: docs/design/dag247-design-system/tokens/colors.css (verbatim)
   * ---------------------------------------------------------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FBFAF7;
  --neutral-50:  #F5F3EE;
  --neutral-100: #EDEAE2;
  --neutral-200: #DFDAD0;
  --neutral-300: #C9C3B5;
  --neutral-400: #A8A096;
  --neutral-500: #847C72;
  --neutral-600: #615A52;
  --neutral-700: #453F3A;
  --neutral-800: #2E2A26;
  --neutral-900: #1C1A17;

  --blue-50:  #EEF3F6;
  --blue-100: #D7E3EA;
  --blue-200: #B3CBDA;
  --blue-300: #8FADC0;
  --blue-500: #3E6E8E;
  --blue-600: #325A75;
  --blue-700: #284759;

  --brick-100: #F1DEDA;
  --brick-500: #A24B3F;
  --moss-100:  #E4EBE1;
  --moss-500:  #5B7A5E;
  --amber-100: #F3E7D2;
  --amber-500: #B98A3D;

  /* -------------------------------------------------------------------------
   * Semantic color tokens (light)
   * Same names as apps/admin/app/globals.css so the surfaces match visually.
   * ---------------------------------------------------------------------- */
  --surface-page:   var(--neutral-50);
  --surface-card:   var(--neutral-0);
  --surface-sunken: var(--neutral-100);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);

  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-500);
  --text-on-accent: var(--neutral-0);

  --accent-default: var(--blue-500);
  --accent-hover:   var(--blue-600);
  --accent-active:  var(--blue-700);

  --danger-default: var(--brick-500);
  --danger-subtle:  var(--brick-100);
  --success-default: var(--moss-500);
  --success-subtle:  var(--moss-100);
  --warning-default: var(--amber-500);
  --warning-subtle:  var(--amber-100);

  /* -------------------------------------------------------------------------
   * Typography
   * Source: docs/design/dag247-design-system/tokens/typography.css (verbatim)
   * 'Schibsted Grotesk' heads the stack; not CDN-imported (ADR-0051/ADR-0006).
   * ---------------------------------------------------------------------- */
  --font-sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-h2:      24px;
  --fs-h4:      17px;
  --fs-body-lg: 17px;
  --fs-body:    15px;
  --fs-body-sm: 13px;
  --fs-caption: 12px;

  --lh-heading: 1.25;
  --lh-body:    1.55;

  --fw-semibold: 600;

  --ls-tight: -0.01em;

  /* -------------------------------------------------------------------------
   * Spacing
   * Source: docs/design/dag247-design-system/tokens/spacing.css (verbatim)
   * ---------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;

  /* -------------------------------------------------------------------------
   * Radius
   * Source: docs/design/dag247-design-system/tokens/radius.css (verbatim)
   * ---------------------------------------------------------------------- */
  --radius-md: 6px;
  --radius-lg: 10px;

  /* -------------------------------------------------------------------------
   * Shadow + motion
   * Source: docs/design/dag247-design-system/tokens/shadow.css (verbatim)
   * ---------------------------------------------------------------------- */
  --shadow-sm:    0 1px 2px rgba(28, 26, 23, .06);
  --shadow-md:    0 2px 8px rgba(28, 26, 23, .08);
  --shadow-focus: 0 0 0 3px var(--blue-100);

  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 120ms;
}

/* ---------------------------------------------------------------------------
 * Dark mode — semantic token overrides only.
 * Derived following the same pattern as apps/admin/app/globals.css (ADR-0051):
 * warm brown-dark surfaces, warm near-white text, desaturated blue accent.
 * Because component styles reference semantic tokens via var(), they
 * automatically adopt dark values with no per-component @media block needed.
 * ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    /* Surfaces: darkest neutral → page; mid-darks → card/sunken */
    --surface-page:   #1a1814;
    --surface-card:   #231f1b;
    --surface-sunken: #141210;

    /* Borders: warm-dark equivalents of light neutral-200/300 */
    --border-subtle:  #3a342e;
    --border-default: #4e4540;

    /* Text: warm near-white primary, warm mid secondary/tertiary */
    --text-primary:   #ede5d8;
    --text-secondary: #c4b5a5;
    --text-tertiary:  #8a7d70;
    --text-on-accent: var(--neutral-0);

    /* Accent: lighter desaturated blue-steel for dark surfaces */
    --accent-default: #6a9ab8;
    --accent-hover:   #5a8aaa;
    --accent-active:  #4a7a9a;

    /* Status: lighter versions for dark surfaces */
    --danger-default: #c87060;
    --danger-subtle:  #3a1e1a;
    --success-default: #7aab7e;
    --success-subtle:  #1a2e1c;
    --warning-default: #d4a052;
    --warning-subtle:  #3a2c10;

    /* Focus + shadow */
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, .20);
    --shadow-md:    0 2px 8px rgba(0, 0, 0, .28);
    --shadow-focus: 0 0 0 3px rgba(106, 154, 184, .30);
  }
}

/* ---------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

body.dag247-signin-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-page);
  font-family: var(--font-sans);
  color: var(--text-primary);
  padding: var(--space-6);
}

/* ---------------------------------------------------------------------------
 * Card
 * ---------------------------------------------------------------------- */
.dag247-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-7) var(--space-6);
}

/* ---------------------------------------------------------------------------
 * Brand mark
 * ---------------------------------------------------------------------- */
.dag247-brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.dag247-logo {
  height: 32px;
}

/* ---------------------------------------------------------------------------
 * Page title (h1 in template.ftl)
 * ---------------------------------------------------------------------- */
.dag247-title {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  text-align: center;
  margin: 0 0 var(--space-5);
}

/* ---------------------------------------------------------------------------
 * Form fields
 * ---------------------------------------------------------------------- */
.dag247-field {
  margin-bottom: var(--space-4);
}

.dag247-field label {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-1);
  color: var(--text-secondary);
}

.dag247-field input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-family: var(--font-sans);
  background: var(--surface-card);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow   var(--duration-fast) var(--ease-standard);
}

.dag247-field input:focus {
  outline: none;
  border-color: var(--accent-default);
  box-shadow: var(--shadow-focus);
}

/* ---------------------------------------------------------------------------
 * Field-level error text (inline, below an input)
 * ---------------------------------------------------------------------- */
.dag247-field-error {
  color: var(--danger-default);
  font-size: var(--fs-body-sm);
  margin: 0 0 var(--space-4);
}

/* ---------------------------------------------------------------------------
 * INC-0041 fix 4: read-only email shown on the password step so the user
 * knows which account they are signing in to. Not editable.
 * ---------------------------------------------------------------------- */
.dag247-attempted-username {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
  word-break: break-all;
}

/* ---------------------------------------------------------------------------
 * Actions row
 * ---------------------------------------------------------------------- */
.dag247-actions {
  margin-top: var(--space-2);
}

.dag247-button {
  width: 100%;
  padding: var(--space-3) var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent-default);
  color: var(--text-on-accent);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

.dag247-button:hover {
  background: var(--accent-hover);
}

.dag247-button:active {
  background: var(--accent-active);
}

.dag247-button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* ---------------------------------------------------------------------------
 * Alert block (Keycloak message.summary, shown above the form)
 * ---------------------------------------------------------------------- */
.dag247-alert {
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin-bottom: var(--space-4);
}

.dag247-alert-error {
  background: var(--danger-subtle);
  color: var(--danger-default);
}

.dag247-alert-success {
  background: var(--success-subtle);
  color: var(--success-default);
}

.dag247-alert-warning,
.dag247-alert-info {
  background: var(--warning-subtle);
  color: var(--warning-default);
}

/* ---------------------------------------------------------------------------
 * Error page (error.ftl — generic sign-in problem before the form renders)
 * ---------------------------------------------------------------------- */
.dag247-error p {
  margin: 0 0 var(--space-2);
}

.dag247-error-hint {
  color: var(--text-secondary);
  font-size: var(--fs-body);
}

/* ---------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */
.dag247-footer {
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
  margin: var(--space-6) 0 0;
}