/* Warm cream/gold theme for the Paperclip dashboard, matching website/styles.css.
   Loaded by one <link> in ui-dist/index.html. Only overrides shadcn tokens, so removing the link restores the stock look. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap");

:root {
  --radius: .75rem;
  --background: oklch(97.5% .012 85);
  --foreground: oklch(30% .02 55);
  --card: oklch(99% .008 85);
  --card-foreground: oklch(30% .02 55);
  --popover: oklch(99% .008 85);
  --popover-foreground: oklch(30% .02 55);
  --primary: oklch(32% .02 55);
  --primary-foreground: oklch(98% .01 85);
  --secondary: oklch(94% .025 85);
  --secondary-foreground: oklch(32% .02 55);
  --muted: oklch(94.5% .02 85);
  --muted-foreground: oklch(50% .025 60);
  --accent: oklch(92% .04 85);
  --accent-foreground: oklch(32% .02 55);
  --border: oklch(88% .03 85);
  --input: oklch(88% .03 85);
  --ring: oklch(66% .12 80);
  --sidebar: oklch(95.5% .02 85);
  --sidebar-foreground: oklch(30% .02 55);
  --sidebar-primary: oklch(62% .12 78);
  --sidebar-primary-foreground: oklch(99% .01 85);
  --sidebar-accent: oklch(90% .045 85);
  --sidebar-accent-foreground: oklch(30% .02 55);
  --sidebar-border: oklch(88% .03 85);
  --sidebar-ring: oklch(66% .12 80);
}

.dark {
  --background: oklch(20% .015 55);
  --foreground: oklch(95% .015 85);
  --side-panel-bg: var(--background);
  --streamlined-task-detail-bg: var(--background);
  --card: oklch(23.5% .017 55);
  --card-foreground: oklch(95% .015 85);
  --popover: oklch(23.5% .017 55);
  --popover-foreground: oklch(95% .015 85);
  --primary: oklch(80% .115 85);
  --primary-foreground: oklch(22% .02 55);
  --bubble-agent: oklch(18% .014 55);
  --secondary: oklch(28% .02 55);
  --secondary-foreground: oklch(95% .015 85);
  --muted: oklch(28% .02 55);
  --muted-foreground: oklch(72% .03 80);
  --accent: oklch(30% .03 70);
  --accent-foreground: oklch(95% .015 85);
  --border: oklch(80% .08 85 / .14);
  --input: oklch(80% .08 85 / .2);
  --ring: oklch(72% .11 82);
  --sidebar: oklch(17.5% .014 55);
  --sidebar-foreground: oklch(95% .015 85);
  --sidebar-primary: oklch(72% .115 82);
  --sidebar-primary-foreground: oklch(20% .02 55);
  --sidebar-accent: oklch(29% .03 65);
  --sidebar-accent-foreground: oklch(95% .015 85);
  --sidebar-border: oklch(80% .08 85 / .12);
  --sidebar-ring: oklch(72% .11 82);
}

h1, h2 {
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  font-weight: 600;
  letter-spacing: -.005em;
}

/* ---- Sign-in page: restyle the built-in right-hand art panel ---- */
div.fixed.inset-0.flex.bg-background:has(> div.md\:w-1\/2) {
  background:
    radial-gradient(900px 500px at 15% 10%, color-mix(in oklch, var(--ring) 14%, transparent), transparent 70%),
    var(--background);
}
div.fixed.inset-0.flex.bg-background > div.md\:block.w-1\/2 {
  position: relative;
  margin: 14px 14px 14px 0;
  border-radius: 36px;
  background:
    radial-gradient(520px 420px at 78% 18%, rgba(246, 220, 171, .28), transparent 70%),
    linear-gradient(150deg, #b98631 0%, #8f6620 38%, #3c302a 100%);
  box-shadow: -30px 0 80px -40px rgba(0, 0, 0, .55);
}
div.fixed.inset-0.flex.bg-background > div.md\:block.w-1\/2 > pre {
  position: absolute;
  inset: 0;
  color: rgba(246, 220, 171, .16);
  mix-blend-mode: soft-light;
}
div.fixed.inset-0.flex.bg-background > div.md\:block.w-1\/2::after {
  content: "Short videos,\A edited by agents.";
  white-space: pre;
  position: absolute;
  left: 56px;
  bottom: 60px;
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  line-height: 1.04;
  color: #f6dcab;
}

/* ---- Global polish ---- */
body { background: var(--background); }
[data-slot="button"][data-variant="default"] {
  border-radius: 999px;
  background-image: linear-gradient(135deg, color-mix(in oklch, var(--primary) 100%, white 12%), var(--primary));
  box-shadow: 0 8px 22px -12px color-mix(in oklch, var(--primary) 70%, transparent);
  font-weight: 600;
}
[data-slot="button"][data-variant="default"]:hover { transform: translateY(-1px); }
[data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"] { border-radius: .7rem; }
[data-slot="card"] {
  border-radius: 1.1rem;
  box-shadow: 0 16px 40px -28px rgba(60, 48, 42, .5);
}
.dark [data-slot="card"] { box-shadow: 0 18px 44px -26px rgba(0, 0, 0, .7); }
[data-slot="badge"] { border-radius: 999px; }

/* ---- Dashboard ---- */
:root { --gold: #c8923a; --gold-hi: #f6dcab; --hair: oklch(85% .09 85 / .16); }
html:not(.dark) { --gold: #a9741f; --gold-hi: #8f6620; --hair: oklch(60% .1 80 / .22); }

/* Ambient backdrop: soft gold light top-right, dot grid fading downwards */
#main-content {
  background:
    radial-gradient(900px 420px at 92% -8%, color-mix(in oklch, var(--gold) 20%, transparent), transparent 70%),
    radial-gradient(700px 380px at 0% 105%, color-mix(in oklch, var(--gold) 9%, transparent), transparent 70%),
    radial-gradient(color-mix(in oklch, var(--gold-hi) 9%, transparent) 1px, transparent 1.2px) 0 0 / 26px 26px,
    var(--background);
  background-attachment: local, local, local, local;
}

/* Section headings */
h3.uppercase.tracking-wide {
  display: flex; align-items: center; gap: .65rem;
  color: var(--gold-hi); letter-spacing: .16em; font-size: .74rem; font-weight: 600;
}
h3.uppercase.tracking-wide::before {
  content: ""; width: 24px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi));
}

/* Shared card surface: glass-like fill with a gold hairline that fades down */
.rounded-lg.border.bg-card,
div.grid.xl\:grid-cols-4 > a > div,
div.grid.xl\:grid-cols-4 > div > div {
  border: 1px solid transparent;
  border-radius: 1.2rem;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--card) 92%, white 3%), var(--card)) padding-box,
    linear-gradient(180deg, color-mix(in oklch, var(--gold) 55%, transparent), var(--hair) 38%, transparent 100%) border-box;
  box-shadow: 0 22px 44px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 236, 200, .05);
  backdrop-filter: blur(8px);
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), box-shadow .22s;
}
.rounded-lg.border.bg-card:hover,
div.grid.xl\:grid-cols-4 > a:hover > div {
  transform: translateY(-3px);
  box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .85), 0 0 0 1px color-mix(in oklch, var(--gold) 35%, transparent), inset 0 1px 0 rgba(255, 236, 200, .08);
}
/* lists inside a card should not lift or double-border */
.rounded-lg.border.bg-card .rounded-lg.border.bg-card { transform: none; }

/* Metric tiles */
p.tabular-nums.font-semibold.tracking-tight {
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1;
  font-size: 2.9rem; line-height: 1; font-weight: 700; letter-spacing: -.01em;
  background: linear-gradient(135deg, var(--gold-hi) 10%, var(--gold) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
div.grid.xl\:grid-cols-4 svg {
  box-sizing: content-box; width: 16px !important; height: 16px !important; padding: 8px;
  border-radius: 12px; color: var(--gold-hi); opacity: 1 !important;
  background: color-mix(in oklch, var(--gold) 16%, transparent);
  border: 1px solid color-mix(in oklch, var(--gold) 28%, transparent);
}
div.grid.xl\:grid-cols-4 { gap: 1rem !important; }

/* Rows in activity / task lists */
.rounded-lg.border.bg-card a:hover, .rounded-lg.border.bg-card [role="row"]:hover {
  background: color-mix(in oklch, var(--gold) 9%, transparent);
}

/* Sidebar */
aside.border-r {
  background:
    radial-gradient(260px 220px at 0% 0%, color-mix(in oklch, var(--gold) 16%, transparent), transparent 75%),
    var(--sidebar) !important;
}
aside a.bg-sidebar-accent.text-sidebar-accent-foreground {
  position: relative;
  background: linear-gradient(90deg, color-mix(in oklch, var(--gold) 26%, transparent), color-mix(in oklch, var(--gold) 4%, transparent)) !important;
  color: var(--gold-hi) !important; font-weight: 600;
}
aside a.bg-sidebar-accent.text-sidebar-accent-foreground::before {
  content: ""; position: absolute; left: -8px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold)); box-shadow: 0 0 12px var(--gold);
}
aside a:hover { color: var(--gold-hi); }

/* Top bar */
#main-content > :first-child { backdrop-filter: blur(10px); }

/* Details */
::selection { background: color-mix(in oklch, var(--gold) 45%, transparent); }
* { scrollbar-color: color-mix(in oklch, var(--gold) 35%, transparent) transparent; }
:focus-visible { outline-color: var(--gold) !important; }