/* ============================================================
   OCTOPUS — Design tokens & base primitives
   Shopify-adjacent (Polaris-friendly) with an Octopus signature.
   ============================================================ */

:root {
  /* ---- Tweakable (overridden by the Tweaks panel) ---- */
  --o-accent: #6D4AFF;          /* brand violet */
  --o-accent-press: #5A37EB;
  --o-radius: 14px;             /* card radius */
  --o-radius-sm: 9px;
  --o-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --o-row-pad: 15px;            /* table row vertical padding (density) */

  /* ---- Light theme ---- */
  --o-bg: #F5F4FA;
  --o-surface: #FFFFFF;
  --o-surface-2: #FBFAFE;
  --o-surface-3: #F3F1FA;
  --o-border: #E8E6F1;
  --o-border-strong: #D6D3E4;
  --o-ink: #241A3F;             /* deep brand — sidebar, headings */
  --o-ink-2: #2E2350;
  --o-text: #251C40;
  --o-text-2: #6B6685;
  --o-text-3: #9C98B0;
  --o-accent-soft: #EFEAFF;
  --o-accent-soft-2: #E4DCFF;

  --o-success-bg: #E1F6EB;
  --o-success-fg: #0E7344;
  --o-success-dot: #16A35E;
  --o-warn-bg: #FBEAD2;
  --o-warn-fg: #97570A;
  --o-warn-dot: #E3920E;
  --o-danger-bg: #FBE5E2;
  --o-danger-fg: #B5392B;
  --o-info-bg: #E5ECFF;
  --o-info-fg: #2C50C0;
  --o-neutral-bg: #EEEDF4;
  --o-neutral-fg: #5C5873;

  --o-shadow-sm: 0 1px 2px rgba(36, 26, 63, .06);
  --o-shadow: 0 1px 3px rgba(36, 26, 63, .07), 0 8px 24px -14px rgba(36, 26, 63, .18);
  --o-shadow-lg: 0 24px 60px -24px rgba(36, 26, 63, .30);
  --o-ring: 0 0 0 3px color-mix(in oklab, var(--o-accent) 28%, transparent);
}

[data-theme="dark"] {
  /* ---- Deep-sea / abyssal "fond marin" ---- */
  --o-bg: #06171D;              /* abyss — body, deepest */
  --o-surface: #0E2A33;         /* raised card, lit from above */
  --o-surface-2: #123139;
  --o-surface-3: #173A45;
  --o-border: #1E4853;
  --o-border-strong: #2C5F6B;
  --o-ink: #0A2128;             /* dark water panels — hero, sections */
  --o-ink-2: #0E2A33;
  --o-text: #E6F4F1;            /* seafoam white */
  --o-text-2: #9CBBBB;
  --o-text-3: #6C8B8C;
  --o-accent: #8E72FF;          /* violet bioluminescence */
  --o-accent-press: #7A5DF5;
  --o-accent-soft: #122C35;
  --o-accent-soft-2: #18353F;

  --o-success-bg: #103226;
  --o-success-fg: #56D699;
  --o-success-dot: #2BC07E;
  --o-warn-bg: #3A2A12;
  --o-warn-fg: #F0B259;
  --o-warn-dot: #E3920E;
  --o-danger-bg: #3A1E1C;
  --o-danger-fg: #F08A7E;
  --o-info-bg: #1A2347;
  --o-info-fg: #8FA9F5;
  --o-neutral-bg: #262236;
  --o-neutral-fg: #A8A3BE;

  --o-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --o-shadow: 0 1px 3px rgba(0,0,0,.4), 0 12px 28px -16px rgba(0,0,0,.7);
  --o-shadow-lg: 0 28px 70px -28px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--o-font);
  background: var(--o-bg);
  color: var(--o-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Typography helpers ---- */
.o-display { font-weight: 800; letter-spacing: -.03em; line-height: 1.02; }
.o-h1 { font-weight: 700; letter-spacing: -.02em; }
.mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; }

/* ---- Badge / pill ---- */
.o-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.o-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.o-badge--success { background: var(--o-success-bg); color: var(--o-success-fg); }
.o-badge--success .dot { background: var(--o-success-dot); }
.o-badge--warn { background: var(--o-warn-bg); color: var(--o-warn-fg); }
.o-badge--warn .dot { background: var(--o-warn-dot); }
.o-badge--danger { background: var(--o-danger-bg); color: var(--o-danger-fg); }
.o-badge--danger .dot { background: var(--o-danger-fg); }
.o-badge--info { background: var(--o-info-bg); color: var(--o-info-fg); }
.o-badge--info .dot { background: var(--o-info-fg); }
.o-badge--neutral { background: var(--o-neutral-bg); color: var(--o-neutral-fg); }
.o-badge--neutral .dot { background: var(--o-neutral-fg); }
.o-badge--accent { background: var(--o-accent-soft); color: var(--o-accent); }

/* ---- Buttons ---- */
.o-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  padding: 0 16px; height: 38px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  text-decoration: none;
  transition: background .14s, border-color .14s, transform .06s, box-shadow .14s, color .14s;
}
.o-btn:active { transform: translateY(1px); }
.o-btn--primary { background: var(--o-accent); color: #fff; box-shadow: 0 1px 1px rgba(36,26,63,.2); }
.o-btn--primary:hover { background: var(--o-accent-press); }
.o-btn--dark { background: var(--o-ink); color: #fff; }
.o-btn--dark:hover { background: var(--o-ink-2); }
[data-theme="dark"] .o-btn--dark { background: #ECEAF6; color: #1A1530; }
[data-theme="dark"] .o-btn--dark:hover { background: #FFFFFF; }
.o-btn--ghost { background: var(--o-surface); color: var(--o-text); border-color: var(--o-border-strong); box-shadow: var(--o-shadow-sm); }
.o-btn--ghost:hover { background: var(--o-surface-3); }
.o-btn--subtle { background: transparent; color: var(--o-text-2); }
.o-btn--subtle:hover { background: var(--o-surface-3); color: var(--o-text); }
.o-btn:disabled { opacity: .5; cursor: not-allowed; }
.o-btn--sm { height: 32px; font-size: 13px; padding: 0 12px; border-radius: 8px; }
.o-btn--danger { background: var(--o-danger-fg); color: #fff; }
.o-btn--danger:hover { background: color-mix(in oklab, var(--o-danger-fg) 88%, black); }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--o-ink) 55%, transparent); backdrop-filter: blur(3px); padding: 24px;
  animation: octoFade .14s ease;
}
@keyframes octoFade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--o-surface); border: 1px solid var(--o-border); border-radius: 16px;
  box-shadow: var(--o-shadow-lg); width: 520px; max-width: 100%; overflow: hidden;
  animation: octoRise .16s cubic-bezier(.2,.8,.3,1);
}
@keyframes octoRise { from { transform: translateY(8px) scale(.99); opacity: .6; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 17px 22px; border-bottom: 1px solid var(--o-border); }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.modal-body { padding: 22px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 22px; border-top: 1px solid var(--o-border); background: var(--o-surface-2); }

/* ---- Card ---- */
.o-card {
  background: var(--o-surface);
  border: 1px solid var(--o-border);
  border-radius: var(--o-radius);
  box-shadow: var(--o-shadow-sm);
}

/* ---- Inputs ---- */
.o-input, .o-select, .o-textarea {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--o-text);
  background: var(--o-surface); border: 1px solid var(--o-border-strong);
  border-radius: 10px; padding: 10px 12px; transition: border-color .14s, box-shadow .14s;
}
.o-input:focus, .o-select:focus, .o-textarea:focus {
  outline: none; border-color: var(--o-accent); box-shadow: var(--o-ring);
}
.o-input::placeholder, .o-textarea::placeholder { color: var(--o-text-3); }
.o-label { display: block; font-size: 13px; font-weight: 600; color: var(--o-text); margin-bottom: 7px; }
.o-help { font-size: 12.5px; color: var(--o-text-2); margin-top: 6px; line-height: 1.5; }

::selection { background: color-mix(in oklab, var(--o-accent) 26%, transparent); }