/* AbroadJao Mail theme v1 - deep teal + warm amber, Plus Jakarta Sans, soft depth, quick eased motion.
   Variables first (always honoured); component polish below (honoured where the app allows selectors). */
@font-face { font-family: "AJ Sans"; src: url("/branding/fonts/plusjakartasans-vf.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --font-sans: "AJ Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --color-background: #fbfaf7; --color-foreground: #12201f;
  --color-card: #ffffff; --color-card-foreground: #12201f;
  --color-popover: #ffffff; --color-popover-foreground: #12201f;
  --color-primary: #0f4c4a; --color-primary-foreground: #ffffff;
  --color-secondary: #f3f1ea; --color-secondary-foreground: #12201f;
  --color-muted: #efede6; --color-muted-foreground: #5d6b69;
  --color-accent: #e3f0ee; --color-accent-foreground: #0b3b39;
  --color-border: #e4e1d8; --color-input: #e4e1d8; --color-ring: #2a8a85;
  --color-sidebar: #f5f3ec; --color-sidebar-foreground: #12201f; --color-sidebar-border: #e4e1d8;
  --color-sidebar-accent: #e7efe9; --color-sidebar-accent-foreground: #0b3b39;
  --color-selection: #dcefeb; --color-selection-foreground: #0b3b39;
  --color-unread: #d98a1f; --color-info: #1f7a8c; --color-success: #2f9e6b; --color-warning: #d98a1f;
  --color-destructive: #c8412f; --color-destructive-foreground: #ffffff;
  --color-chart-1: #0f4c4a; --color-chart-2: #d98a1f; --color-chart-3: #1f7a8c; --color-chart-4: #c8412f; --color-chart-5: #7a5cc7;
  --transition-duration: 0.18s;
}
.dark {
  --color-background: #0c1514; --color-foreground: #e9f0ee;
  --color-card: #111d1c; --color-card-foreground: #e9f0ee;
  --color-popover: #142322; --color-popover-foreground: #e9f0ee;
  --color-primary: #3fb6ad; --color-primary-foreground: #04201e;
  --color-secondary: #142322; --color-secondary-foreground: #e9f0ee;
  --color-muted: #172826; --color-muted-foreground: #93a5a2;
  --color-accent: #17302e; --color-accent-foreground: #bfeee8;
  --color-border: #1f3432; --color-input: #1f3432; --color-ring: #3fb6ad;
  --color-sidebar: #0a1211; --color-sidebar-foreground: #e9f0ee; --color-sidebar-border: #1a2c2a;
  --color-sidebar-accent: #14282a; --color-sidebar-accent-foreground: #bfeee8;
  --color-selection: #163432; --color-selection-foreground: #d6fbf6;
  --color-unread: #f2a541; --color-info: #56b6c9; --color-success: #4cc38a; --color-warning: #f2a541;
  --color-destructive: #ef6a57; --color-destructive-foreground: #1a0906;
}

@keyframes aj-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes aj-pop  { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

html, body, button, input, textarea, select { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; letter-spacing: -0.006em; }
h1, h2, h3 { letter-spacing: -0.02em; font-weight: 700; }
body { background: radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--color-primary) 7%, transparent), transparent 60%), var(--color-background); }

button, a, [role="button"], [role="option"], [role="menuitem"], input, textarea {
  transition: background-color .18s cubic-bezier(.2,.7,.2,1), color .18s, border-color .18s, box-shadow .22s cubic-bezier(.2,.7,.2,1), transform .18s cubic-bezier(.2,.7,.2,1);
}
button:active, [role="button"]:active { transform: scale(.975); }
button.bg-primary, .bg-primary.text-primary-foreground { box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 6px 18px -8px color-mix(in srgb, var(--color-primary) 70%, transparent); border-radius: 12px; }
button.bg-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgb(255 255 255 / .22) inset, 0 12px 26px -10px color-mix(in srgb, var(--color-primary) 80%, transparent); }
input, textarea { border-radius: 12px; }
input:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-ring) 22%, transparent); }
[role="dialog"], [role="menu"], [role="listbox"], [data-radix-popper-content-wrapper] > * { animation: aj-pop .16s cubic-bezier(.2,.8,.2,1) both; border-radius: 16px; box-shadow: 0 24px 60px -20px rgb(8 30 29 / .35), 0 2px 8px rgb(8 30 29 / .08); }
main, [role="main"] { animation: aj-rise .28s cubic-bezier(.2,.8,.2,1) both; }
[role="option"]:hover, [role="row"]:hover, li:hover > a { background-color: color-mix(in srgb, var(--color-primary) 6%, transparent); }
::selection { background: color-mix(in srgb, var(--color-primary) 22%, transparent); }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--color-foreground) 22%, transparent) transparent; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- login screen ---- */
@keyframes aj-float { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2%, -3%, 0) scale(1.06); } }
body:has(form input[type="password"]) { background:
    radial-gradient(900px 520px at 12% 8%, color-mix(in srgb, #0f4c4a 16%, transparent), transparent 62%),
    radial-gradient(760px 480px at 92% 96%, color-mix(in srgb, #f2a541 20%, transparent), transparent 60%),
    var(--color-background) !important; }
body:has(form input[type="password"])::before { content: ""; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
    background: radial-gradient(420px 320px at 70% 25%, color-mix(in srgb, #2a8a85 14%, transparent), transparent 70%); animation: aj-float 14s ease-in-out infinite; }
body:has(form input[type="password"]) .rounded-2xl { position: relative; z-index: 1; border-radius: 24px; border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
    box-shadow: 0 40px 80px -36px rgb(8 40 38 / .45), 0 2px 10px rgb(8 40 38 / .06); animation: aj-rise .5s cubic-bezier(.2,.8,.2,1) both; backdrop-filter: blur(14px) saturate(1.2); }
body:has(form input[type="password"]) label { font-weight: 600; letter-spacing: 0; }
body:has(form input[type="password"]) input { height: 46px; }
body:has(form input[type="password"]) button[type="submit"] { height: 48px; font-weight: 700; letter-spacing: .01em; }