/*
 * Minimal styles for login page only
 */

/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
@layer theme, base, components, utilities;

@layer theme {
  :root {
    --spacing: 0.25rem;
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  }
}

@layer base {
  *, ::after, ::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }

  html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    font-family: var(--default-font-family);
  }

  button, input {
    font: inherit;
    color: inherit;
    background-color: transparent;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  label {
    display: flex;
    align-items: center;
  }
}

@layer utilities {
  .min-h-screen { min-height: 100vh; }
  .flex { display: flex; }
  .items-center { align-items: center; }
  .justify-center { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .bg-gradient-to-br {
    background-image: linear-gradient(to bottom right in oklab, var(--tw-gradient-stops));
  }
  .from-background {
    --tw-gradient-from: var(--background);
    --tw-gradient-stops: var(--tw-gradient-position, to bottom right in oklab), var(--tw-gradient-from), var(--tw-gradient-to);
  }
  .via-background {
    --tw-gradient-via: var(--background);
    --tw-gradient-via-stops: var(--tw-gradient-position, to bottom right in oklab), var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);
    --tw-gradient-stops: var(--tw-gradient-via-stops);
  }
  .to-muted {
    --tw-gradient-to: var(--muted);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position, to bottom right in oklab), var(--tw-gradient-from), var(--tw-gradient-to));
  }
  .p-4 { padding: calc(var(--spacing) * 4); }
  .w-full { width: 100%; }
  .max-w-md { max-width: 28rem; }
  .space-y-4 > :not(:last-child) { margin-bottom: calc(var(--spacing) * 4); }
  .space-y-2 > :not(:last-child) { margin-bottom: calc(var(--spacing) * 2); }
  .space-x-2 > :not(:last-child) { margin-right: calc(var(--spacing) * 2); }
  .text-center { text-align: center; }
  .h-12 { height: calc(var(--spacing) * 12); }
  .w-12 { width: calc(var(--spacing) * 12); }
  .h-6 { height: calc(var(--spacing) * 6); }
  .w-6 { width: calc(var(--spacing) * 6); }
  .rounded-lg { border-radius: 0.5rem; }
  .bg-primary { background-color: var(--primary); }
  .text-primary-foreground { color: var(--primary-foreground); }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
  }
  .mt-2 { margin-top: calc(var(--spacing) * 2); }
  .mt-6 { margin-top: calc(var(--spacing) * 6); }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }
  .text-muted-foreground { color: var(--muted-foreground); }
  .px-0 { padding-left: 0; padding-right: 0; }
  .cursor-pointer { cursor: pointer; }
  .font-normal { font-weight: var(--font-weight-normal); }
}

@layer components {
  .ui-card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing) * 6);
    border-radius: calc(0.5rem + 4px);
    border: 1px solid;
    background-color: var(--card);
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 6);
    color: var(--card-foreground);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  }

  .ui-card-header {
    display: grid;
    grid-auto-rows: min-content;
    grid-template-rows: auto auto;
    align-items: flex-start;
    gap: calc(var(--spacing) * 2);
    padding-left: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 6);
  }

  .ui-card-title {
    line-height: 1;
    font-weight: 600;
  }

  .ui-card-description {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--muted-foreground);
  }

  .ui-card-content {
    padding-left: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 6);
  }

  .ui-label {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: var(--text-sm);
    line-height: 1;
    font-weight: var(--font-weight-medium);
    user-select: none;
  }

  .ui-input {
    height: calc(var(--spacing) * 9);
    width: 100%;
    border-radius: calc(0.5rem - 2px);
    border: 1px solid var(--input);
    background-color: transparent;
    padding-left: calc(var(--spacing) * 3);
    padding-right: calc(var(--spacing) * 3);
    padding-top: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 1);
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    transition: color, box-shadow;
    transition-duration: var(--default-transition-duration);
    outline: none;
  }

  .ui-input::placeholder {
    color: var(--muted-foreground);
  }

  .ui-input:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  .ui-checkbox {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
    flex-shrink: 0;
    border-radius: 4px;
    border: 1px solid var(--input);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    outline: none;
  }

  .ui-checkbox:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  .ui-checkbox[data-state="checked"] {
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--primary-foreground);
  }

  .ui-button {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 2);
    border-radius: calc(0.5rem - 2px);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    transition: all;
    transition-duration: var(--default-transition-duration);
    outline: none;
  }

  .ui-button:focus-visible {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
  }

  .ui-button-default {
    background-color: var(--primary);
    color: var(--primary-foreground);
  }

  .ui-button-default:hover {
    background-color: color-mix(in oklab, var(--primary) 90%, transparent);
  }

  .ui-button-link {
    color: var(--primary);
    text-underline-offset: 4px;
  }

  .ui-button-link:hover {
    text-decoration: underline;
  }

  .ui-button-size-default {
    height: calc(var(--spacing) * 9);
    padding-left: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }

  .ui-flash {
    border-radius: calc(0.5rem - 2px);
    border: 1px solid;
    padding: calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .ui-flash-title {
    margin-bottom: calc(var(--spacing) * 1);
    font-weight: var(--font-weight-medium);
  }

  .ui-flash-alert {
    border-color: var(--flash-alert-border);
    background-color: var(--flash-alert-background);
    color: var(--flash-alert-foreground);
  }

  .ui-flash-notice {
    border-color: var(--flash-notice-border);
    background-color: var(--flash-notice-background);
    color: var(--flash-notice-foreground);
  }
}

:root {
  --background: oklch(0.98 0 0);
  --foreground: oklch(0.15 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.15 0 0);
  --primary: oklch(0.35 0.08 250);
  --primary-foreground: oklch(0.99 0 0);
  --muted: oklch(0.95 0 0);
  --muted-foreground: oklch(0.48 0 0);
  --input: oklch(0.92 0 0);
  --ring: oklch(0.35 0.08 250);
  --flash-alert-border: oklch(0.78 0.1 22);
  --flash-alert-background: oklch(0.97 0.02 22);
  --flash-alert-foreground: oklch(0.45 0.13 22);
  --flash-notice-border: oklch(0.82 0.08 155);
  --flash-notice-background: oklch(0.97 0.02 155);
  --flash-notice-foreground: oklch(0.42 0.11 155);
}

.dark {
  --background: oklch(0.09 0 0);
  --foreground: oklch(0.96 0 0);
  --card: oklch(0.13 0 0);
  --card-foreground: oklch(0.96 0 0);
  --primary: oklch(0.65 0.12 250);
  --primary-foreground: oklch(0.99 0 0);
  --muted: oklch(0.18 0 0);
  --muted-foreground: oklch(0.58 0 0);
  --input: oklch(0.18 0 0);
  --ring: oklch(0.65 0.12 250);
  --flash-alert-border: oklch(0.53 0.12 22);
  --flash-alert-background: oklch(0.22 0.03 22);
  --flash-alert-foreground: oklch(0.87 0.05 22);
  --flash-notice-border: oklch(0.57 0.09 155);
  --flash-notice-background: oklch(0.21 0.03 155);
  --flash-notice-foreground: oklch(0.88 0.04 155);
}

@layer base {
  * {
    border-color: var(--input);
    outline-color: var(--ring);
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
  }
}