/* ================================================================
   KAVERI DESIGN SYSTEM v1.0
   Typography: Plus Jakarta Sans
   Aesthetic: Deep river at twilight
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* ----------------------------------------------------------------
   COLOR TOKENS
   ---------------------------------------------------------------- */
:root {
  /* Backgrounds */
  --color-bg-base:        #080D1A;   /* deepest night — app background */
  --color-bg-surface:     #0F1628;   /* card / input surface */
  --color-bg-elevated:    #172038;   /* elevated cards, modals */
  --color-bg-overlay:     #1E2B47;   /* hover, subtle separator */

  /* River / Brand */
  --color-river-50:       #E6F9FA;
  --color-river-100:      #B3EFF2;
  --color-river-200:      #66DDE6;
  --color-river-300:      #33CFDB;   /* primary interactive */
  --color-river-400:      #1BBECB;   /* hover */
  --color-river-500:      #0DAAB7;   /* pressed */

  /* Accent (warm gold — last light on the river) */
  --color-accent-warm:    #E8A83A;
  --color-accent-glow:    rgba(232, 168, 58, 0.18);

  /* Semantic */
  --color-success:        #3DD68C;
  --color-success-bg:     rgba(61, 214, 140, 0.12);
  --color-error:          #F26060;
  --color-error-bg:       rgba(242, 96, 96, 0.12);
  --color-warning:        #F4A836;

  /* Text */
  --color-text-primary:   #EDF0F7;   /* near-white — headings, body copy */
  --color-text-secondary: #B8C4DC;   /* readable slate — labels, descriptions (≥7:1) */
  --color-text-tertiary:  #C2AC7D;   /* warm parchment — captions, hints — distinct from secondary (≥9:1) */
  --color-text-inverse:   #080D1A;

  /* Borders */
  --color-border-subtle:  rgba(51, 207, 219, 0.12);
  --color-border-default: rgba(51, 207, 219, 0.24);
  --color-border-strong:  rgba(51, 207, 219, 0.48);

  /* ----------------------------------------------------------------
     TYPOGRAPHY SCALE
     ---------------------------------------------------------------- */
  --font-family:          'Plus Jakarta Sans', system-ui, sans-serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  --line-tight:   1.2;
  --line-snug:    1.35;
  --line-normal:  1.5;
  --line-relaxed: 1.65;

  --tracking-tight: -0.03em;
  --tracking-snug:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-widest: 0.14em;

  /* ----------------------------------------------------------------
     SPACING
     ---------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ----------------------------------------------------------------
     RADII
     ---------------------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 999px;

  /* ----------------------------------------------------------------
     SHADOWS & GLOWS
     ---------------------------------------------------------------- */
  --shadow-river:  0 0 32px rgba(51, 207, 219, 0.15);
  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-modal:  0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-btn:    0 2px 12px rgba(51, 207, 219, 0.3);

  /* ----------------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
}

/* ----------------------------------------------------------------
   BASE RESET
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: var(--font-family);
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----------------------------------------------------------------
   COMPONENT: RIVER LOGO MARK
   ---------------------------------------------------------------- */
.logo-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 40px;
}

.logo-mark .river-line {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--color-river-300), transparent);
}

.logo-mark .river-line:nth-child(1) { width: 100%; opacity: 1; }
.logo-mark .river-line:nth-child(2) { width: 75%; opacity: 0.75; margin-left: 6px; }
.logo-mark .river-line:nth-child(3) { width: 55%; opacity: 0.5; margin-left: 10px; }

/* ----------------------------------------------------------------
   COMPONENT: LOCKUP (logo + wordmark)
   ---------------------------------------------------------------- */
.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.brand-lockup .wordmark {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

/* ----------------------------------------------------------------
   COMPONENT: INPUT
   ---------------------------------------------------------------- */
.input-field {
  width: 100%;
  background: var(--color-bg-elevated);
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 14px var(--space-4);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  outline: none;
  transition: border-color var(--duration-normal) var(--ease-out),
              box-shadow var(--duration-normal) var(--ease-out);
  letter-spacing: 0.01em;
}

.input-field::placeholder {
  color: var(--color-text-tertiary);
  font-weight: var(--weight-regular);
}

.input-field:focus {
  border-color: var(--color-river-300);
  box-shadow: 0 0 0 3px rgba(51, 207, 219, 0.14);
}

.input-field.error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(242, 96, 96, 0.12);
}

.input-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* ----------------------------------------------------------------
   COMPONENT: BUTTON — PRIMARY
   ---------------------------------------------------------------- */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 16px var(--space-6);
  background: linear-gradient(135deg, var(--color-river-300) 0%, var(--color-river-400) 100%);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-inverse);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  box-shadow: var(--shadow-btn);
}

.btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.btn-primary:active {
  opacity: 0.85;
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ----------------------------------------------------------------
   COMPONENT: BUTTON — GHOST
   ---------------------------------------------------------------- */
.btn-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 14px var(--space-6);
  background: transparent;
  border: 1.5px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: border-color var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out);
}

.btn-ghost:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

/* ----------------------------------------------------------------
   COMPONENT: STATUS BADGE
   ---------------------------------------------------------------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.status-badge.success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid rgba(61, 214, 140, 0.24);
}

.status-badge.error {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid rgba(242, 96, 96, 0.24);
}

/* ----------------------------------------------------------------
   COMPONENT: HINT / HELPER TEXT
   ---------------------------------------------------------------- */
.field-hint {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  line-height: var(--line-relaxed);
  margin-top: var(--space-2);
}

.field-hint.error {
  color: var(--color-error);
}

/* ----------------------------------------------------------------
   LAYOUT: SCREEN SHELL
   ---------------------------------------------------------------- */
.screen {
  width: 390px;
  min-height: 844px;
  background: var(--color-bg-base);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Ambient river gradient backdrop */
.screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% -10%, rgba(51, 207, 219, 0.09) 0%, transparent 70%),
    radial-gradient(ellipse 50% 30% at 80% 90%, rgba(232, 168, 58, 0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.screen-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ----------------------------------------------------------------
   LOADING SPINNER
   ---------------------------------------------------------------- */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse-ring {
  0%   { transform: scale(0.85); opacity: 0.6; }
  50%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.85); opacity: 0.6; }
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid rgba(51, 207, 219, 0.2);
  border-top-color: var(--color-river-300);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ----------------------------------------------------------------
   DIVIDER
   ---------------------------------------------------------------- */
.divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-8) 0;
}

/* ----------------------------------------------------------------
   UTILITY
   ---------------------------------------------------------------- */
.text-center { text-align: center; }
.w-full { width: 100%; }