/* Payama theme — single source of truth for colour, type, shape, spacing and motion.
 *
 * Link this from every page:  <link rel="stylesheet" href="theme.css">
 * Dark is the default. Light applies when <html data-pa-theme="light">.
 *
 * To restyle the whole product, edit the BRAND block below. Nothing else needs to change:
 * every surface, border, button and state reads from these variables.
 */

/* ── Brand ────────────────────────────────────────────────────────────────── */

:root {
  --pa-accent:          #79abd9;
  --pa-accent-hover:    #8fbde4;
  --pa-accent-active:   #5f97cb;
  --pa-on-accent:       #0d1a26;   /* label colour on an accent fill */
  --pa-accent-rgb:      121, 171, 217;             /* for rgba() tints */
  --pa-accent-tint:     rgba(121, 171, 217, .16);  /* icon-badge / soft fill */
  --pa-accent-tint-2:   rgba(121, 171, 217, .3);
}

/* ── Status ───────────────────────────────────────────────────────────────── */
/* Desaturated on purpose: they must sit inside a greyscale UI without shouting. */

:root {
  --pa-success:      #7fae90;
  --pa-success-2:    #8bab93;   /* log lines, plugin-connected dot */
  --pa-warning:      #c0a276;
  --pa-error:        #a8776a;   /* offline / not-connected dot */
  --pa-error-text:   #c08a76;   /* error line in the build log */
  --pa-danger:       #b8695c;   /* destructive button fill */
  --pa-danger-hover: #c87a6c;
  --pa-danger-text:  #d08e7f;   /* destructive text button */
  --pa-danger-strong:#e0685a;   /* "Delete account" */
  --pa-on-danger:    #1a0f0d;
  --pa-idle:         var(--pa-muted-3b);  /* checking / unknown */
}

/* ── Typography ───────────────────────────────────────────────────────────── */

:root {
  --font-body:    "Archivo", system-ui, sans-serif;
  --font-heading: "Archivo", system-ui, sans-serif;
  --font-display: "Coolvetica", var(--font-heading);   /* wordmark + headings, weight 400 only */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-label:   11px;    /* uppercase, .08em tracking */
  --text-caption: 12.5px;
  --text-sm:      13.5px;
  --text-menu:    14px;
  --text-base:    15px;
  --text-input:   16px;
  --text-lg:      19px;
  --text-title:   24px;
  --text-display: 34px;
  --text-hero:    68px;

  --leading-tight: 1.1;
  --leading-snug:  1.45;
  --leading-body:  1.6;

  --tracking-label: .08em;
  --tracking-wide:  .14em;
}

/* ── Shape ────────────────────────────────────────────────────────────────── */

:root {
  --radius-xs:   7px;    /* tiny tile */
  --radius-sm:   9px;    /* list row, menu item */
  --radius-md:   11px;   /* small button */
  --radius-lg:   14px;   /* button, card, input */
  --radius-xl:   18px;   /* modal */
  --radius-2xl:  20px;   /* panel */
  --radius-tile: 22px;
  --radius-full: 999px;  /* pill, avatar, switch, progress */
}

/* ── Spacing ──────────────────────────────────────────────────────────────── */

:root {
  --space-1: 4px;   --space-2: 6px;   --space-3: 8px;   --space-4: 10px;
  --space-5: 12px;  --space-6: 14px;  --space-7: 16px;  --space-8: 20px;
  --space-9: 22px;  --space-10: 28px; --space-11: 40px;

  --size-header:     56px;
  --size-sidebar:    236px;
  --size-rail:       66px;
  --size-drawer:     190px;
  --size-drawer-min: 40px;
  --size-control:    38px;
  --size-button:     44px;
}

/* ── Motion ───────────────────────────────────────────────────────────────── */

:root {
  --ease-out:    cubic-bezier(.2, .7, .3, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.6, .64, 1);

  --dur-hover:  .16s;
  --dur-enter:  .2s;
  --dur-panel:  .28s;
  --dur-theme:  .42s;
}

/* ── Dark (default) ───────────────────────────────────────────────────────── */

:root {
  /* surfaces */
  --pa-bg: #1c1c1c;
  --pa-bg-2: #191919;
  --pa-surface: #212121;
  --pa-surface-2: #252525;
  --pa-input: #282828;
  --pa-deep: #141414;
  --pa-deep-2: #161616;
  --pa-deep-3: #141417;
  --pa-deep-4: #34343a;

  /* interaction */
  --pa-hover: #2b2b2b;
  --pa-hover-b: #303030;
  --pa-hover-2: #353535;
  --pa-active: #3c3c3c;
  --pa-active-2: #424242;

  /* lines */
  --pa-line: #2c2c2c;
  --pa-border: #323232;
  --pa-border-2: #4a4a4a;
  --pa-border-3: #565656;
  --pa-border-4: #6a6a6a;

  /* text — high to low contrast */
  --pa-text-hi: #ffffff;
  --pa-text-1: #fafafa;
  --pa-text-2: #f4f4f4;
  --pa-text: #f0f0f0;
  --pa-text-3: #f7f7f7;
  --pa-text-4: #e9e9ec;
  --pa-soft-2: #e8e8e8;
  --pa-soft: #e2e2e2;
  --pa-dim-2: #d7d7d7;
  --pa-dim: #d4d4d4;
  --pa-dim-3: #c6c6cb;
  --pa-dim-4: #bdbdbd;
  --pa-dim-5: #b0b0b0;
  --pa-muted: #adadad;
  --pa-muted-1: #a3a3a3;
  --pa-muted-2: #969696;
  --pa-muted-3: #8b8b8b;
  --pa-muted-3b: #8a8a90;
  --pa-muted-3c: #85858c;
  --pa-ghost: #7c7c7c;
  --pa-muted-4: #767676;
  --pa-muted-5: #6f6f6f;
  --pa-faint: #5c5c5c;

  /* texture, shadow, scrim */
  --pa-grid: rgba(255,255,255,.06);
  --pa-grid-2: rgba(255,255,255,.045);
  --pa-grid-3: rgba(255,255,255,.05);
  --pa-grid-4: rgba(255,255,255,.07);
  --pa-shadow: rgba(0,0,0,.95);
  --pa-shadow-2: rgba(0,0,0,.9);
  --pa-scrim: rgba(8,8,8,.72);
  --pa-scrim-2: rgba(8,8,8,.68);
}

/* ── Light ────────────────────────────────────────────────────────────────── */

html[data-pa-theme="light"] {
  --pa-bg: #e8e6e1;
  --pa-bg-2: #e2e0da;
  --pa-surface: #f2f0ec;
  --pa-surface-2: #ebe9e4;
  --pa-input: #f6f4f0;
  --pa-deep: #dbd8d2;
  --pa-deep-2: #e0ddd7;
  --pa-deep-3: #d4d1cb;
  --pa-deep-4: #e5e2dd;

  --pa-hover: #e3e0da;
  --pa-hover-b: #dedbd5;
  --pa-hover-2: #dad7d1;
  --pa-active: #cfccc5;
  --pa-active-2: #c6c2bb;

  --pa-line: #dcd9d3;
  --pa-border: #d0ccc5;
  --pa-border-2: #c1bdb6;
  --pa-border-3: #b7bdc4;
  --pa-border-4: #a5acb4;

  --pa-text-hi: #14120f;
  --pa-text-1: #1a1815;
  --pa-text-2: #1e1c18;
  --pa-text: #23201c;
  --pa-text-3: #101419;
  --pa-text-4: #1b2127;
  --pa-soft-2: #1a2026;
  --pa-soft: #1e2429;
  --pa-dim-2: #2c3338;
  --pa-dim: #2c3338;
  --pa-dim-3: #3a4147;
  --pa-dim-4: #4a5158;
  --pa-dim-5: #545b62;
  --pa-muted: #5c666f;
  --pa-muted-1: #646d75;
  --pa-muted-2: #6b757e;
  --pa-muted-3: #78828b;
  --pa-muted-3b: #7b858d;
  --pa-muted-3c: #7e878f;
  --pa-ghost: #949da4;
  --pa-muted-4: #8a939b;
  --pa-muted-5: #9aa2aa;
  --pa-faint: #aab1b8;

  --pa-grid: rgba(15,23,31,.08);
  --pa-grid-2: rgba(15,23,31,.06);
  --pa-grid-3: rgba(15,23,31,.07);
  --pa-grid-4: rgba(15,23,31,.09);
  --pa-shadow: rgba(18,28,38,.2);
  --pa-shadow-2: rgba(18,28,38,.16);
  --pa-scrim: rgba(22,28,35,.42);
  --pa-scrim-2: rgba(22,28,35,.38);
}

/* ── Marketing page (fixed light scheme, not theme-switched) ──────────────── */

:root {
  --pm-sky: var(--pa-accent);       /* hero fill; shifts live on scroll */
  --pm-sheet: rgba(255,255,255,.78);
  --pm-sheet-blur: blur(12px) saturate(115%);
  --pm-ink: #101317;
  --pm-body: #49525d;
  --pm-muted: #5f6874;
  --pm-kicker: #4a83b8;
  --pm-grid: rgba(74,131,184,.16);
  --pm-grid-size: 54px;
  --pm-radius-card: 34px;
  --pm-radius-sheet: 44px;
}

/* ── Elevation ────────────────────────────────────────────────────────────── */

:root {
  --shadow-popover: 0 24px 44px -22px var(--pa-shadow);
  --shadow-modal:   0 46px 80px -36px var(--pa-shadow);
  --shadow-card:    0 20px 34px -20px var(--pa-shadow-2);
  --shadow-lift:    0 6px 14px -10px var(--pa-shadow-2);
}

/* ── Global base ──────────────────────────────────────────────────────────── */

*:focus-visible {
  outline: 2px solid var(--pa-muted-4);
  outline-offset: 2px;
}

/* Added to <html> for the length of a theme change so every surface cross-fades. */
html.pa-theming, html.pa-theming * {
  transition:
    background-color var(--dur-theme) ease,
    border-color var(--dur-theme) ease,
    color var(--dur-theme) ease,
    fill var(--dur-theme) ease,
    stroke var(--dur-theme) ease,
    box-shadow var(--dur-theme) ease !important;
}

@keyframes pa-spin  { to { transform: rotate(360deg); } }
@keyframes pa-in    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pa-gate  { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pa-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes pa-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes pa-dot   { 0%,100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-5px); opacity: 1; } }
@keyframes pa-bob   { 0%,100% { transform: translateY(0) rotate(var(--tw)); } 50% { transform: translateY(-9px) rotate(var(--tw)); } }
@keyframes pa-rise  { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pa-panel-in  { from { margin-left: -44%; opacity: 0; } to { margin-left: 0; opacity: 1; } }
@keyframes pa-panel-out { from { margin-left: 0; opacity: 1; } to { margin-left: -44%; opacity: 0; } }

/* ── Components ───────────────────────────────────────────────────────────────
 * The design files themselves use inline styles; these classes are the same
 * recipes, ready to use when the real site is built.
 */

.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: var(--size-button);
  padding: 0 var(--space-8);
  border: 0;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-hover), color var(--dur-hover), transform .14s;
}
.pa-btn:disabled { opacity: .45; cursor: default; }

.pa-btn--primary { background: var(--pa-accent); color: var(--pa-on-accent); }
.pa-btn--primary:hover:not(:disabled) { background: var(--pa-accent-hover); transform: translateY(-1px); }
.pa-btn--primary:active:not(:disabled) { background: var(--pa-accent-active); transform: translateY(0); }

.pa-btn--secondary { background: transparent; border: 1px solid var(--pa-border); color: var(--pa-dim); }
.pa-btn--secondary:hover:not(:disabled) { background: var(--pa-hover-2); color: var(--pa-text-hi); }

.pa-btn--ghost { background: transparent; color: var(--pa-muted-2); }
.pa-btn--ghost:hover:not(:disabled) { background: var(--pa-hover); color: var(--pa-text-hi); }

.pa-btn--danger { background: var(--pa-danger); color: var(--pa-on-danger); }
.pa-btn--danger:hover:not(:disabled) { background: var(--pa-danger-hover); }

.pa-btn--icon {
  width: var(--size-control);
  height: var(--size-control);
  padding: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--pa-muted-2);
}
.pa-btn--icon:hover:not(:disabled) { background: var(--pa-hover); color: var(--pa-text-hi); }

.pa-input {
  width: 100%;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--pa-border);
  border-radius: var(--radius-lg);
  background: var(--pa-input);
  color: var(--pa-text);
  font-family: var(--font-body);
  font-size: var(--text-input);
  line-height: var(--leading-body);
  caret-color: var(--pa-accent);
  outline: none;
  transition: border-color var(--dur-hover);
}
.pa-input::placeholder { color: var(--pa-muted-3); }
.pa-input::selection { background: var(--pa-accent); color: var(--pa-on-accent); }
.pa-input:focus { border-color: var(--pa-border-3); }

.pa-card {
  padding: var(--space-6);
  border: 1px solid var(--pa-border);
  border-radius: var(--radius-lg);
  background: var(--pa-surface-2);
}

.pa-panel {
  border: 1px solid var(--pa-border);
  border-radius: var(--radius-2xl);
  background: var(--pa-surface);
}

.pa-popover {
  padding: var(--space-2);
  border: 1px solid var(--pa-border);
  border-radius: 13px;
  background: var(--pa-surface);
  box-shadow: var(--shadow-popover);
  animation: pa-gate var(--dur-enter) var(--ease-out) both;
}

.pa-modal {
  padding: var(--space-9);
  border: 1px solid var(--pa-border);
  border-radius: var(--radius-xl);
  background: var(--pa-surface);
  box-shadow: var(--shadow-modal);
  animation: pa-gate var(--dur-enter) var(--ease-out) both;
}
.pa-scrim {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  background: var(--pa-scrim);
  animation: pa-in .18s ease both;
}

.pa-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  height: var(--size-control);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--pa-soft);
  font-family: var(--font-body);
  font-size: var(--text-menu);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-hover), color var(--dur-hover);
}
.pa-menu-item:hover { background: var(--pa-hover); color: var(--pa-text-hi); }
.pa-menu-item--danger { color: var(--pa-danger-text); }

.pa-switch {
  position: relative;
  width: 36px;
  height: 20px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--pa-border-2);
  cursor: pointer;
  transition: background var(--dur-hover);
}
.pa-switch[aria-checked="true"] { background: var(--pa-accent); }
.pa-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: #ffffff;
  transition: left var(--dur-hover) var(--ease-out);
}
.pa-switch[aria-checked="true"]::after { left: 19px; }

.pa-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--pa-idle);
}
.pa-dot--ok    { background: var(--pa-success); }
.pa-dot--warn  { background: var(--pa-warning); }
.pa-dot--error { background: var(--pa-error); }

.pa-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border: 1px solid var(--pa-border);
  border-radius: var(--radius-full);
  background: var(--pa-hover);
  font-size: var(--text-label);
  color: var(--pa-muted);
  white-space: nowrap;
}
.pa-tag--accent { border-color: transparent; background: var(--pa-accent); color: var(--pa-on-accent); font-weight: 700; }

.pa-label {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--pa-muted-3);
}

.pa-display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  color: var(--pa-text-1);
}

.pa-progress {
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--pa-hover-2);
  overflow: hidden;
}
.pa-progress > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--pa-accent);
  transition: width .3s var(--ease-out);
}